写了一段时间的心情，今天开始写第一篇算是跟技术有点沾边的文章，将今天在公司对一个老项目改版中涉及的代码粘贴出来，也算开个张。
由于以前主要是做后端开发，对前端代码了解不多，加上有一段时间没有实际动手写代码，思路虽然还在，但真正写起来才发现不是那么容易，所以记录下来，有很好的纪念意义。
主要场景是解决服务端控件的兼容性问题，因为没有专业的前端，对于样式调整也是无能为力，只好借助成熟的前端框架进行替换升级，经过一翻对比选型，最终选定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',//自定义toolbar26 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);