easyui combogrid下拉表格的分頁/按鍵/動態搜索

時間 2020-05-09

標籤 easyui combogrid 下拉表格分頁按鍵動態搜索简体版

原文原文鏈接

做者：xfl4629712 《 easyui combogrid下拉表格的分頁/按鍵/動態搜索》javascript

需求：css

一、下拉框下拉時出現表格；html

二、表格帶分頁功能；java

三、可使用向上鍵、向下鍵在表格中移動選擇行數據；jquery

四、可使用回車鍵在表格中選中行數據；ajax

五、在下拉框的文本框中輸入內容，能查詢表格；json

六、下拉框的文本框的內容變化時，表格數據按分頁設置顯示app

效果以下：ide

圖一、post

圖二、

圖三、

圖四、

思路：

很簡單，分拆爲combo、datagrid、pagination三個組件分別操做，注意結合的操做就好。

在製做的過程當中，比較頭痛的是整合，大致上代碼中都加了註釋，有些狀況你們本身試一下就明白爲何要那樣作了，

好比：在分頁的頁改變事件中要設置表格的pageSize，是爲了在文本框變化時，能強制表格按分頁的pageSize顯示數據。

代碼：

一、html代碼

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <link rel="external nofollow" href="style/js/easyui/themes/metro-green/easyui.css" rel="stylesheet" type="text/css" />
 6     <link rel="external nofollow" href="style/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
 7     <script src="style/js/easyui/jquery.min.js" type="text/javascript"></script>
 8     <script src="style/js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
 9     <script src="style/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
 10     <script src="style/js/biz/comboGridBiz.js" type="text/javascript"></script>
 11 </head>
 12 <body>
 13     <h3>EasyUI ComboGrid 集成分頁示例</h3>
 14     <div><input id="cg" style="width:150px" /><input type="text" id="txtGender" /></div>
 15     <input type="hidden" id="hdKeyword" />
 16 </body>
 17 </html>

二、js代碼。

 1 $(function () {
 2     $('#cg').combogrid({
 3         panelWidth: 400,
 4         idField: 'PersonId',        //ID字段 
 5         textField: 'PersonName',    //顯示的字段 
 6         url: "ashx/ComboGridHandler.ashx?action=search",
 7         fitColumns: true,
 8         striped: true,
 9         editable: true,
 10         pagination: true,           //是否分頁 
 11         rownumbers: true,           //序號 
 12         collapsible: false,         //是否可摺疊的 
 13         fit: true,                  //自動大小 
 14         method: 'post',
 15         columns: [[
 16                     { field: 'PersonId', title: '用戶編號', width: 80, hidden: true },
 17                     { field: 'PersonName', title: '用戶名稱', width: 150 },
 18                     { field: 'Gender', title: '用戶性別', width: 150 }
 19                 ]],
 20         keyHandler: {
 21             up: function () {               //【向上鍵】押下處理 
 22                 //取得選中行 
 23                 var selected = $('#cg').combogrid('grid').datagrid('getSelected');
 24                 if (selected) {
 25                     //取得選中行的rowIndex 
 26                     var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
 27                     //向上移動到第一行爲止 
 28                     if (index > 0) {
 29                         $('#cg').combogrid('grid').datagrid('selectRow', index - 1);
 30                     }
 31                 } else {
 32                     var rows = $('#cg').combogrid('grid').datagrid('getRows');
 33                     $('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);
 34                 }
 35             },
 36             down: function () {             //【向下鍵】押下處理 
 37                 //取得選中行 
 38                 var selected = $('#cg').combogrid('grid').datagrid('getSelected');
 39                 if (selected) {
 40                     //取得選中行的rowIndex 
 41                     var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
 42                     //向下移動到當頁最後一行爲止 
 43                     if (index < $('#cg').combogrid('grid').datagrid('getData').rows.length - 1) {
 44                         $('#cg').combogrid('grid').datagrid('selectRow', index + 1);
 45                     }
 46                 } else {
 47                     $('#cg').combogrid('grid').datagrid('selectRow', 0);
 48                 }
 49             },
 50             enter: function () {             //【回車鍵】押下處理 
 51                 //設置【性別】文本框的內容爲選中行的的性別字段內容 
 52                 $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
 53                 //選中後讓下拉表格消失 
 54                 $('#cg').combogrid('hidePanel');
 55             },
 56             query: function (keyword) {     //【動態搜索】處理 
 57                 //設置查詢參數 
 58                 var queryParams = $('#cg').combogrid("grid").datagrid('options').queryParams;
 59                 queryParams.keyword = keyword;
 60                 $('#cg').combogrid("grid").datagrid('options').queryParams = queryParams;
 61                 //從新加載 
 62                 $('#cg').combogrid("grid").datagrid("reload");
 63 
 64                 $('#cg').combogrid("setValue", keyword);
 65                 //將查詢條件存入隱藏域 
 66                 $('#hdKeyword').val(keyword);
 67             }
 68         },
 69         onSelect: function () {              //選中處理 
 70             $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
 71         }
 72     });
 73 
 74     //取得分頁組件對象 
 75     var pager = $('#cg').combogrid('grid').datagrid('getPager');
 76 
 77     if (pager) {
 78         $(pager).pagination({
 79             pageSize: 10,               //每頁顯示的記錄條數，默認爲10 
 80             pageList: [10, 5, 3],       //能夠設置每頁記錄條數的列表 
 81             beforePageText: '第',       //頁數文本框前顯示的漢字 
 82             afterPageText: '頁    共 {pages} 頁',
 83             displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄',
 84             //選擇頁的處理 
 85             onSelectPage: function (pageNumber, pageSize) {
 86                 //按分頁的設置取數據 
 87                 getData(pageNumber, pageSize);
 88                 //設置表格的pageSize屬性，表格變化時按分頁組件設置的pageSize顯示數據 
 89                 $('#cg').combogrid("grid").datagrid('options').pageSize = pageSize;
 90                 //將隱藏域中存放的查詢條件顯示在combogrid的文本框中 
 91                 $('#cg').combogrid("setValue", $('#hdKeyword').val());
 92                 $('#txtGender').val('');
 93             },
 94             //改變頁顯示條數的處理 
 95             //（處理後仍是走onSelectPage事件，因此設置也寫到onSelectPage事件中了） 
 96             onChangePageSize: function () { },
 97             //點擊刷新的處理 
 98             onRefresh: function (pageNumber, pageSize) {
 99                 //按分頁的設置取數據 
100                 getData(pageNumber, pageSize);
101                 //將隱藏域中存放的查詢條件顯示在combogrid的文本框中 
102                 $('#cg').combogrid("setValue", $('#hdKeyword').val());
103                 $('#txtGender').val('');
104             }
105         });
106     }
107 
108     var getData = function (page, rows) {
109         $.ajax({
110             type: "POST",
111             url: "ashx/ComboGridHandler.ashx?action=search",
112             data: "page=" + page + "&rows=" + rows + "&keyword=" + $('#hdKeyword').val(),
113             error: function (XMLHttpRequest, textStatus, errorThrown) {
114                 alert(textStatus);
115                 $.messager.progress('close');
116             },
117             success: function (data) {
118                 $('#cg').combogrid('grid').datagrid('loadData', data);
119             }
120         });
121     };
122 });

三、ashx代碼

 1 /// <summary>
 2 /// ComboGridHandler 的摘要說明
 3 /// </summary>
 4 public class ComboGridHandler : IHttpHandler
 5 {
 6     /// <summary>
 7     ///
 8     /// </summary>
 9     /// <param name="context"></param>
 10     public void ProcessRequest(HttpContext context)
 11     {
 12         context.Response.ContentType = "application/json";
 13         string action = context.Request.Params["action"];
 14 
 15         //頁數
 16         int PageNum = Convert.ToInt32(context.Request["page"]);
 17         //每一頁多少條數據
 18         int Record = Convert.ToInt32(context.Request["rows"]);
 19 
 20         //模擬數據
 21         List<Person> list = MockData();
 22         Dictionary<string, object> resultDic = new Dictionary<string, object>();
 23 
 24         switch (action)
 25         {
 26             case "search":
 27                 var condition = context.Request["keyword"] ?? string.Empty;
 28                 List<Person> result = (from item in list
 29                             where item.PersonName.Contains(condition)    //條件查詢
 30                             select item).ToList<Person>();
 31                 resultDic.Add("total", result.Count);
 32                 resultDic.Add("rows", (result.Skip(Record * (PageNum - 1)).Take(Record)).ToList());
 33                 break;
 34         }
 35 
 36         JavaScriptSerializer serializer = new JavaScriptSerializer();
 37         context.Response.Write(serializer.Serialize(resultDic));
 38     }
 39 
 40     public bool IsReusable
 41     {
 42         get
 43         {
 44             return false;
 45         }
 46     }
 47 
 48     /// <summary>
 49     /// 模擬數據
 50     /// </summary>
 51     /// <returns></returns>
 52     public List<Person> MockData()
 53     {
 54         List<Person> list = new List<Person>() {
 55             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "葉宇", Gender = "女" },
 56             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張兄家", Gender = "男" },
 57             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張洋", Gender = "男" },
 58             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "洪自軍", Gender = "男" },
 59             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "王生傑", Gender = "男" },
 60             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "吳慶慶", Gender = "男" },
 61             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "武建昌", Gender = "男" },
 62             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "劉瑞", Gender = "男" },
 63             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張遼", Gender = "男" },
 64             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張頜", Gender = "男" },
 65             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "劉備", Gender = "男" },
 66             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "劉禪", Gender = "男" },
 67             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "劉表", Gender = "男" },
 68             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張震嶽", Gender = "男" },
 69             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張學友", Gender = "男" },
 70             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張信哲", Gender = "男" },
 71             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張懸", Gender = "女" },
 72             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "張惠妹", Gender = "女" }
 73         };
 74         return list;
 75     }
 76 }

四、實體類代碼

 1 [Serializable]
 2 public class Person
 3 {
 4     public string PersonId { get; set; }
 5 
 6     public string PersonName { get; set; }
 7 
 8     public string Gender { get; set; }
 9 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。