easyui grid的简单应用
写了一段时间的心情，今天开始写第一篇算是跟技术有点沾边的文章，将今天在公司对一个老项目改版中涉及的代码粘贴出来，也算开个张。
由于以前主要是做后端开发，对前端代码了解不多，加上有一段时间没有实际动手写代码，思路虽然还在，但真正写起来才发现不是那么容易，所以记录下来，有很好的纪念意义。
主要场景是解决服务端控件的兼容性问题，因为没有专业的前端，对于样式调整也是无能为力，只好借助成熟的前端框架进行替换升级，经过一翻对比选型，最终选定easy ui来改版。
html代码--添加js、css引用
1 <!--加载jquery--> 2 <script type="text/javascript" src="../ztree/js/jquery-1.4.4.min.js"></script> 3 <!-- 加载jquery-easyui --> 4 <link rel="stylesheet" href="../jquery-easyui-1.4.4/themes/default/easyui.css" type="text/css" /> 5 <link rel="stylesheet" href="../jquery-easyui-1.4.4/themes/icon.css" type="text/css" /> 6 <script type="text/javascript" src="../jquery-easyui-1.4.4/jquery.easyui.min.js"></script> 7 <script type="text/javascript" src="../jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"> </script>
页面完成加载数据
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 loadGrid(); 4 }); 5 </script>
搜索和复位功能
1 function GdSearch() { 2 var keyWord = $("#searchword").val(); 3 if (keyWord == "") 4 return; 5 $('#tableGrid').datagrid({ url: '../handler/tableHandler.ashx', queryParams: { keyWord: keyWord } }); 6 } 7 function GdReload() { 8 $("#searchword").val(""); 9 $("#tableGrid").datagrid('load'); 10 }
html--body部分
1 <body> 2 <div id="customtb"> 3 <input type="text" maxlength="99" name="searchword" id="searchword" /> 4 <input onclick="GdSearch()" type="button" value="搜索" /> 5 <input onclick="GdReload()" type="button" value="恢复表格" /> 6 </div> 7 <div id="tableGrid"></div> 8 <script type="text/javascript"> 9 function loadGrid() { 10 //加载数据 11 $('#tableGrid').datagrid({ 12 title: '个人信息', 13 width: 'auto', 14 height: 'auto', 15 striped: true, 16 fit: true, 17 fitColumns: true, 18 singleSelect: true, 19 pageSize: 15, 20 url: '../handler/tableHandler.ashx', 21 loadMsg: '数据加载中请稍后……', 22 pagination: true, 23 rownumbers: true, 24 pageList: [15, 20, 30, 40, 50], 25 toolbar: '#customtb',//自定义toolbar 26 columns: [[ 27 { field: 'tName', title: '姓名', align: 'left', width: "45%" }, 28 { field: 'tDesc', title: '描述', align: 'left', width: "45%" } 29 ]] 30 }); 31 } 32 </script> 33 </body>
后端代码--根据传入的参数将数据按json方式输出即可。
1 context.Response.ContentType = "text/json"; 2 int pageIndex = Convert.ToInt32(context.Request["page"]); 3 int pageSize = Convert.ToInt32(context.Request["rows"]); 4 string keyWord = context.Request["keyWord"] == null ? "" : context.Request["keyWord"]; 5 ........ 6 var json =Newtonsoft.Json.JsonConvert.SerializeObject(result); 7 context.Response.Write(json);
