写了一段时间的心情，今天开始写第一篇算是技术的文章，将今天在公司对一个老项目改版中涉及的代码粘贴出来，也算开个张。
主要场景是解决服务端控件的兼容性问题，因为没有专业的前端，对于样式调整也是无能为力，只好借助成熟的前端框架进行替换升级，经过一翻对比选型，最终选定easy ui来改版。
html代码--js应用部分
<!--加载jquery-->
<script type="text/javascript" src='/images/loading.gif' data-original="../ztree/js/jquery-1.4.4.min.js"></script> <!-- 加载jquery-easyui --> <link rel="stylesheet" href="../jquery-easyui-1.4.4/themes/default/easyui.css" type="text/css" /> <link rel="stylesheet" href="../jquery-easyui-1.4.4/themes/icon.css" type="text/css" /> <script type="text/javascript" src='/images/loading.gif' data-original="../jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <script type="text/javascript" src='/images/loading.gif' data-original="../jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"> </script>
页面完成加载数据
<script type="text/javascript"> $(document).ready(function () { loadGrid(); });
</script>搜索和复位功能
1 function GdSearch() { 2 var keyWord = $("#searchword").val(); 3 if (keyWord == "") 4 return; 5 $('#tableDefineGrid').datagrid({ url: '../handler/tableHandler.ashx', queryParams: { keyWord: keyWord } }); 6 } 7 function GdReload() { 8 $("#searchword").val(""); 9 $("#tableDefineGrid").datagrid('load');10 }
body部分
<body> <div id="customtb"> <input type="text" maxlength="99" name="searchword" id="searchword" /> <input onclick="GdSearch()" type="button" value="搜索" /> <input onclick="GdReload()" type="button" value="恢复表格" /> <input type="button" value="新增" onclick="window.open('tabledefine.aspx?oper=a', 'newwin', 'height=540, width=740top=0,left=0,toolbar=yes ,scrollbars=yes,menubar=no');" /> </div> <div id="tableDefineGrid"></div> <script type="text/javascript"> function loadGrid() { //加载数据 $('#tableDefineGrid').datagrid({ title: '个人信息', width: 'auto', height: 'auto', striped: true, fit: true, fitColumns: true, singleSelect: true, pageSize: 15, url: '../handler/tableHandler.ashx', loadMsg: '数据加载中请稍后……', pagination: true, rownumbers: true, pageList: [15, 20, 30, 40, 50], toolbar: '#customtb',//自定义toolbar columns: [[ { field: 'tName', title: '姓名', align: 'left', width: "45%" }, { field: 'tDesc', title: '描述', align: 'left', width: "45%" } ]] }); } </script></body>
后端根据传入的参数将数据按json方式输出即可。 context.Response.ContentType = "text/json"; int pageIndex = Convert.ToInt32(context.Request["page"]); int pageSize = Convert.ToInt32(context.Request["rows"]); string keyWord = context.Request["keyWord"] == null ? "" : context.Request["keyWord"]; ........ var json =Newtonsoft.Json.JsonConvert.SerializeObject(result); context.Response.Write(json);
原标题：easy ui grid的简单应用
关键词：
我知道了 