寫了一段時間的心情，今天開始寫第一篇算是跟技術有點沾邊的文章，將今天在公司對一個老項目改版中涉及的代碼粘貼出來，也算開個張。 由於以前主要是做後端開發，對前端代碼瞭解不多，加上有一段時間沒有實際動手寫代碼，思路雖然還在，但真正寫起來才發現不是那麼容易，所以記錄下來，有很好的紀念意義。 主要場景是解決
寫了一段時間的心情，今天開始寫第一篇算是跟技術有點沾邊的文章，將今天在公司對一個老項目改版中涉及的代碼粘貼出來，也算開個張。
由於以前主要是做後端開發，對前端代碼瞭解不多，加上有一段時間沒有實際動手寫代碼，思路雖然還在，但真正寫起來才發現不是那麼容易，所以記錄下來，有很好的紀念意義。
主要場景是解決服務端控制項的相容性問題，因為沒有專業的前端，對於樣式調整也是無能為力，只好藉助成熟的前端框架進行替換升級，經過一翻對比選型，最終選定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);
