EasyUI ComboGrid集成分页按键示例

最新推荐文章于 2019-11-15 09:47:38 发布

qingxukang

最新推荐文章于 2019-11-15 09:47:38 发布

阅读量826

点赞数

分类专栏： C# 文章标签： web .net c# easyui datagrid

C# 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、下拉框下拉时出现表格；

2、表格带分页功能；

3、可以使用向上键、向下键在表格中移动选择行数据；

4、可以使用回车键在表格中选中行数据；

5、在下拉框的文本框中输入内容，能查询表格；

6、下拉框的文本框的内容变化时，表格数据按分页设置显示

效果如下：

图1、

图2、

图3、

图4、

思路：

很简单，分拆为combo、datagrid、pagination三个组件分别操作，注意结合的操作就好。

在制作的过程中，比较头痛的是整合，大体上代码中都加了注释，有些情况大家自己试一下就明白为什么要那样做了，

比如：在分页的页改变事件中要设置表格的pageSize，是为了在文本框变化时，能强制表格按分页的pageSize显示数据。

代码：

1、html代码

 
   01. 
   <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>  
  
   02. 
   <html xmlns='http://www.w3.org/1999/xhtml'>  
  
   03. 
   <head>  
  
   04. 
       <title></title>  
  
   05. 
       <link href='style/js/easyui/themes/metro-green/easyui.css' rel='stylesheet'  type='text/css' />   
  
   06. 
       <link href='style/js/easyui/themes/icon.css' rel='stylesheet'  type='text/css' />   
  
   07. 
       <script src='style/js/easyui/jquery.min.js' type='text/javascript'></script>  
  
   08. 
       <script src='style/js/easyui/jquery.easyui.min.js' type='text/javascript'></script>  
  
   09. 
       <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='hdKey<A class=keylink href="http://www.it165.net/edu/ebg/" target=_blank>word</A>' />  
  
   16. 
   </body>  
  
   17. 
   </html>

2、js代码

 
   001. 
     1 $(function () {  
  
   002. 
     2     $('#cg').combogrid({  
  
   003. 
     3         panelWidth: 400,  
  
   004. 
     4         idField: 'PersonId',        //ID字段    
  
   005. 
     5         textField: 'PersonName',    //显示的字段    
  
   006. 
     6         url: 'ashx/ComboGridHandler.ashx?action=search',  
  
   007. 
     7         fitColumns: true,  
  
   008. 
     8         striped: true,  
  
   009. 
     9         editable: true,  
  
   010. 
    10         pagination: true,           //是否分页  
  
   011. 
    11         rownumbers: true,           //序号  
  
   012. 
    12         collapsible: false,         //是否可折叠的  
  
   013. 
    13         fit: true,                  //自动大小  
  
   014. 
    14         method: 'post',  
  
   015. 
    15         columns: [[  
  
   016. 
    16                     { field: 'PersonId', title: '用户编号', width: 80, hidden: true },  
  
   017. 
    17                     { field: 'PersonName', title: '用户名称', width: 150 },  
  
   018. 
    18                     { field: 'Gender', title: '用户性别', width: 150 }  
  
   019. 
    19                 ]],  
  
   020. 
    20         keyHandler: {  
  
   021. 
    21             up: function () {               //【向上键】押下处理  
  
   022. 
    22                 //取得选中行  
  
   023. 
    23                 var selected = $('#cg').combogrid('grid').datagrid('getSelected');  
  
   024. 
    24                 if (selected) {  
  
   025. 
    25                     //取得选中行的rowIndex  
  
   026. 
    26                     var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);  
  
   027. 
    27                     //向上移动到第一行为止  
  
   028. 
    28                     if (index > 0) {  
  
   029. 
    29                         $('#cg').combogrid('grid').datagrid('selectRow', index - 1);  
  
   030. 
    30                     }  
  
   031. 
    31                 } else  {  
  
   032. 
    32                     var rows = $('#cg').combogrid('grid').datagrid('getRows');  
  
   033. 
    33                     $('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);  
  
   034. 
    34                 }  
  
   035. 
    35             },  
  
   036. 
    36             down: function () {             //【向下键】押下处理  
  
   037. 
    37                 //取得选中行  
  
   038. 
    38                 var selected = $('#cg').combogrid('grid').datagrid('getSelected');  
  
   039. 
    39                 if (selected) {  
  
   040. 
    40                     //取得选中行的rowIndex  
  
   041. 
    41                     var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);  
  
   042. 
    42                     //向下移动到当页最后一行为止  
  
   043. 
    43                     if (index < $('#cg').combogrid('grid').datagrid('getData').rows.length - 1) {  
  
   044. 
    44                         $('#cg').combogrid('grid').datagrid('selectRow', index + 1);  
  
   045. 
    45                     }  
  
   046. 
    46                 } else  {  
  
   047. 
    47                     $('#cg').combogrid('grid').datagrid('selectRow', 0);  
  
   048. 
    48                 }  
  
   049. 
    49             },  
  
   050. 
    50             enter: function () {             //【回车键】押下处理  
  
   051. 
    51                 //设置【性别】文本框的内容为选中行的的性别字段内容  
  
   052. 
    52                 $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);  
  
   053. 
    53                 //选中后让下拉表格消失  
  
   054. 
    54                 $('#cg').combogrid('hidePanel');  
  
   055. 
    55             },  
  
   056. 
    56             query: function (key<A class=keylink href="http://www.it165.net/edu/ebg/" target=_blank>word</A>) {     //【动态搜索】处理  
  
   057. 
    57                 //设置查询参数  
  
   058. 
    58                 var queryParams = $('#cg').combogrid('grid').datagrid('options').queryParams;  
  
   059. 
    59                 queryParams.keyword = keyword;  
  
   060. 
    60                 $('#cg').combogrid('grid').datagrid('options').queryParams = queryParams;  
  
   061. 
    61                 //重新加载  
  
   062. 
    62                 $('#cg').combogrid('grid').datagrid('reload');  
  
   063. 
    63  
  
   064. 
    64                 $('#cg').combogrid('setValue', keyword);  
  
   065. 
    65                 //将查询条件存入隐藏域  
  
   066. 
    66                 $('#hdKeyword').val(keyword);  
  
   067. 
    67             }  
  
   068. 
    68         },  
  
   069. 
    69         onSelect: function () {              //选中处理  
  
   070. 
    70             $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);  
  
   071. 
    71         }  
  
   072. 
    72     });  
  
   073. 
    73  
  
   074. 
    74     //取得分页组件对象  
  
   075. 
    75     var pager = $('#cg').combogrid('grid').datagrid('getPager');  
  
   076. 
    76  
  
   077. 
    77     if (pager) {  
  
   078. 
    78         $(pager).pagination({  
  
   079. 
    79             pageSize: 10,               //每页显示的记录条数，默认为10  
  
   080. 
    80             pageList: [10, 5, 3],       //可以设置每页记录条数的列表  
  
   081. 
    81             beforePageText: '第',       //页数文本框前显示的汉字  
  
   082. 
    82             afterPageText: '页    共 {pages} 页',  
  
   083. 
    83             displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
  
   084. 
    84             //选择页的处理  
  
   085. 
    85             onSelectPage: function (pageNumber, pageSize) {  
  
   086. 
    86                 //按分页的设置取数据  
  
   087. 
    87                 getData(pageNumber, pageSize);  
  
   088. 
    88                 //设置表格的pageSize属性，表格变化时按分页组件设置的pageSize显示数据  
  
   089. 
    89                 $('#cg').combogrid('grid').datagrid('options').pageSize = pageSize;  
  
   090. 
    90                 //将隐藏域中存放的查询条件显示在combogrid的文本框中  
  
   091. 
    91                 $('#cg').combogrid('setValue', $('#hdKeyword').val());  
  
   092. 
    92                 $('#txtGender').val('');  
  
   093. 
    93             },  
  
   094. 
    94             //改变页显示条数的处理  
  
   095. 
    95             //（处理后还是走onSelectPage事件，所以设置也写到onSelectPage事件中了）  
  
   096. 
    96             onChangePageSize: function () { },  
  
   097. 
    97             //点击刷新的处理  
  
   098. 
    98             onRefresh: function (pageNumber, pageSize) {  
  
   099. 
    99                 //按分页的设置取数据  
  
   100. 
   100                 getData(pageNumber, pageSize);  
  
   101. 
   101                 //将隐藏域中存放的查询条件显示在combogrid的文本框中  
  
   102. 
   102                 $('#cg').combogrid('setValue', $('#hdKeyword').val());  
  
   103. 
   103                 $('#txtGender').val('');  
  
   104. 
   104             }  
  
   105. 
   105         });  
  
   106. 
   106     }  
  
   107. 
   107  
  
   108. 
   108     var getData = function (page, rows) {  
  
   109. 
   109         $.ajax({  
  
   110. 
   110             type: 'POST',  
  
   111. 
   111             url: 'ashx/ComboGridHandler.ashx?action=search',  
  
   112. 
   112             data: 'page='  + page + '&rows=' + rows + '&keyword=' + $('#hdKeyword').val(),  
  
   113. 
   113             error: function (XMLHttpRequest, textStatus, errorThrown) {   
  
   114. 
   114                 alert(textStatus);  
  
   115. 
   115                 $.messager.progress('close');  
  
   116. 
   116             },  
  
   117. 
   117             success: function (data) {  
  
   118. 
   118                 $('#cg').combogrid('grid').datagrid('loadData', data);  
  
   119. 
   119             }  
  
   120. 
   120         });  
  
   121. 
   121     };  
  
   122. 
   122 });

3、ashx代码

 
   01. 
   1 /// <summary>  
  
   02. 
    2 /// ComboGridHandler 的摘要说明  
  
   03. 
    3 /// </summary>  
  
   04. 
    4 public class  ComboGridHandler : IHttpHandler  
  
   05. 
    5 {  
  
   06. 
    6 /// <summary>  
  
   07. 
    7 ///   
  
   08. 
    8 /// </summary>  
  
   09. 
    9 /// <param name='context'></param>  
  
   10. 
   10 public void  ProcessRequest(HttpContext context)  
  
   11. 
   11 {  
  
   12. 
   12     context.Response.ContentType = 'application/json';  
  
   13. 
   13     string action = context.Request.Params['action'];  
  
   14. 
   14  
  
   15. 
   15     //页数  
  
   16. 
   16     int PageNum = Convert.ToInt32(context.Request['page']);  
  
   17. 
   17     //每一页多少条数据  
  
   18. 
   18     int Record = Convert.ToInt32(context.Request['rows']);  
  
   19. 
   19  
  
   20. 
   20     //模拟数据  
  
   21. 
   21     List<Person> list = MockData();  
  
   22. 
   22  
  
   23. 
   23     Dictionary<string, object> resultDic = new Dictionary<string, object>();  
  
   24. 
   24  
  
   25. 
   25     switch (action)  
  
   26. 
   26     {  
  
   27. 
   27         case 'search':  
  
   28. 
   28  
  
   29. 
   29             var condition = context.Request['keyword'] ?? string.Empty;  
  
   30. 
   30  
  
   31. 
   31             List<Person> result = (from item in list  
  
   32. 
   32                         where item.PersonName.Contains(condition)    //条件查询  
  
   33. 
   33                         select item).ToList<Person>();  
  
   34. 
   34  
  
   35. 
   35             resultDic.Add('total', result.Count);  
  
   36. 
   36             resultDic.Add('rows', (result.Skip(Record * (PageNum - 1)).Take(Record)).ToList());  
  
   37. 
   37  
  
   38. 
   38             break;  
  
   39. 
   39     }  
  
   40. 
   40  
  
   41. 
   41     JavaScriptSerializer serializer = new JavaScriptSerializer();  
  
   42. 
   42  
  
   43. 
   43     context.Response.Write(serializer.Serialize(resultDic));   
  
   44. 
   44 }  
  
   45. 
   45  
  
   46. 
   46 public bool IsReusable  
  
   47. 
   47 {  
  
   48. 
   48     get  
  
   49. 
   49     {  
  
   50. 
   50         return false;  
  
   51. 
   51     }  
  
   52. 
   52 }  
  
   53. 
   53  
  
   54. 
   54 /// <summary>  
  
   55. 
   55 /// 模拟数据  
  
   56. 
   56 /// </summary>  
  
   57. 
   57 /// <returns></returns>  
  
   58. 
   58 public List<Person> MockData()   
  
   59. 
   59 {  
  
   60. 
   60     List<Person> list = new  List<Person>() {   
  
   61. 
   61         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '叶宇', Gender = '女' },  
  
   62. 
   62         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张兄家', Gender = '男' },  
  
   63. 
   63         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张洋', Gender = '男' },  
  
   64. 
   64         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '洪自军', Gender = '男' },  
  
   65. 
   65         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '王生杰', Gender = '男' },  
  
   66. 
   66         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '吴庆庆', Gender = '男' },  
  
   67. 
   67         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '武建昌', Gender = '男' },  
  
   68. 
   68         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘瑞', Gender = '男' },  
  
   69. 
   69         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张辽', Gender = '男' },  
  
   70. 
   70         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张颌', Gender = '男' },  
  
   71. 
   71         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘备', Gender = '男' },  
  
   72. 
   72         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘禅', Gender = '男' },  
  
   73. 
   73         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘表', Gender = '男' },  
  
   74. 
   74         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张震岳', Gender = '男' },  
  
   75. 
   75         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张学友', Gender = '男' },  
  
   76. 
   76         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张信哲', Gender = '男' },  
  
   77. 
   77         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张悬', Gender = '女' },  
  
   78. 
   78         new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张惠妹', Gender = '女' }  
  
   79. 
   79     };  
  
   80. 
   80  
  
   81. 
   81     return list;  
  
   82. 
   82 }

4、实体类代码

 

[Serializable]  
  

public class  Person  
  

{  
  

   4     public string PersonId { get; set; }  
  

   5  
  

   6     public string PersonName { get; set; }  
  

   7  
  

   8     public string Gender { get; set; }  
  

}