使用easyui datagrid部分，主要是節省了寫一堆html代碼。
通過封裝，可以節省每個頁面都寫一堆easyui的代碼，相對要簡單一些，個人覺得，畢竟是自己做的，難免自我感覺好些，哈哈。
封裝好了之后，只需要在html中引用各種需要庫，並在body中寫<table id="myid"><table>
然后js中調用baseGrid('myid',"focus_ft","<{:U('Focus/focuslist')}>",cols,data_opt); 即可。
該方法中第一個參數，是table id，
第二個參數是需要加的一些過濾功能的所在的div 的id，比如紅框的區域
第三個參數是加載數據的地址，可以是一個路由路徑，或者別的數據地址比如靜態文件地址,例子中的uri是thinkphp的路由地址
第四個參數，是列的配置，有多少列，配置多少個，就復制粘貼的活，應該是挺輕松的。見
第五個參數是需要改變的配置，具體配置項參考easyui官方文檔，可以省略，會默認加載。
所以必須要的就是下面框內的東西啦（注意啦，
formatter:orderOperateFormatter 這個東西是什么？
orderOperateFormatter這個是一個js方法，自己寫，每個頁面都不一樣。比如編輯，刪除等。
其他的列如果有需要也可以這么寫，這是easyui的屬性
），OK
$(function(){ var data_opt = { 'pageList':[5,10, 20, 30,50], 'pageSize':10, "sortName":"id", "sortOrder":"desc" }; var cols = [[ //注意要兩個嵌套的中括號 { field:'ck', checkbox:true }, { field:'id', title: '單號', width: 60, align: 'center', sortable: true }, { field:'name', title: '推薦位名稱', width: 80, align: 'center'}, { field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter } ]]; baseGrid('dg',"focus_ft","<{:U('Focus/focuslist')}>",cols); }); function orderOperateFormatter(val){ var btn = []; btn.push('<a id="btedit" href="__URL__/modify/id/'+val+'">編輯</a>'); btn.push('<a id="btdel" href="#">刪除</a>'); return btn.join("|"); }
下面是頁面部分，和封裝的完整代碼。
頁面部分：
<body> <div class="right-page"> <form id="submitForm" name="submitForm" action="" method="post"> <div class="order-search"> <span> <input type="hidden" name="ids"> <input id="roleBt70" type="button" class="order-search-button" onclick="allDel()" value="全部刪除"/> <input id="roleBt71" type="button" class="order-search-button" onclick="allDisplay()" value="全部顯示"/> <input id="roleBt72" type="button" class="order-search-button" onclick="allHidden()" value="全部隱藏"/> </span> </div> </form> <div class="order-list"> <div class="order-list-table"> <table id="dg" title="推薦位" style="width:80%;height:650px" > </table> </div> </div> <div id="focus_ft" class="order-search"> <form> <span> <select name="search[type]" id="order_select_one"> <option value="id">單號</option> <option value="name">名稱</option> </select> </span> <span> <input name="search[txt_value]" type="text" size="15" /> </span> <span> 發布日期： <input type="text" size="20" name="search[date_from]" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})" />-<input type="text" size="20" name="search[date_to]" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})"/> </span> <input type="button" id="roleBt1" value="查 詢" class="order-search-button" onclick="search('dg',this);" /> </form> </div> <br/> </div> </body>
封裝js代碼：
/*version 1.0 *mj */ /**點擊后列出該行的擴展內容，使用此方法 * id:grid 的ID * dg_toolbar：grid的復雜操作部分id，"dg_area_id" * Url:獲取數據URL地址,--"<{:U('Focus/focuslist')}>"--"a.json" * expandUrl:隱藏內容URL地址 * cols:列信息var cols = [[ //注意要兩個嵌套的中括號 { field:'id', title: '單號', width: 60, align: 'center', sortable: true }, { field:'name', title: '推薦位名稱', width: 80, align: 'center'}, { field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter } ]]; * data_opt：grid屬性，可省略 var data_opt = { 'pageList':[10, 20, 30,50], 'pageSize':10, }; */ function expandGrid(id,dg_toolbar,mainUrl,expandUrl,cols,data_opt){ var default_opt = { 'border':false, 'fit':true, 'fitColumns':true, 'rownumbers':true, 'singleSelect':false, 'checkOnSelect':false, 'selectOnCheck':true, 'pagination':true, 'pageList':[10, 20, 30, 50], 'pageSize':10 }; for(opt in data_opt){ default_opt[opt]=data_opt[opt]; } $('#'+id).datagrid({ url: mainUrl, loadMsg: '數據加載中,請稍候...', pageSize: default_opt["pageSize"], pageList: default_opt["pageList"], pagination:default_opt["pagination"], singleSelect:default_opt["singleSelect"], fitColumns:default_opt["fitColumns"], checkOnSelect:default_opt["checkOnSelect"], selectOnCheck:default_opt["selectOnCheck"], view: detailview, toolbar: dg_toolbar==""?"":"#"+dg_toolbar, columns:cols, detailFormatter:function(index,row){ return '<div class="ddv" style="padding:5px 0"></div>'; }, onExpandRow: function(index,row){ var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv'); ddv.panel({ height:"auto", border:false, cache:false, href:expandUrl+row.id, onLoad:function(){ $('#'+id).datagrid('fixDetailRowHeight',index); } }); $('#'+id).datagrid('fixDetailRowHeight',index); } }); } /**普通grid展示 * id:grid 的ID * dg_toolbar：grid的復雜操作部分id，"dg_area_id" * Url:獲取數據URL地址,--"<{:U('Focus/focuslist')}>"--"a.json" * cols:列信息var cols = [[ //注意要兩個嵌套的中括號 { field:'id', title: '單號', width: 60, align: 'center', sortable: true }, { field:'name', title: '推薦位名稱', width: 80, align: 'center'}, { field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter } ]]; * data_opt：grid屬性，可省略 var data_opt = { 'pageList':[10, 20, 30,50], 'pageSize':10, }; */ function baseGrid(id,dg_toolbar,Url,cols,data_opt){ var default_opt = { 'border':false, 'fit':true, 'fitColumns':true, 'rownumbers':true, 'singleSelect':false, 'checkOnSelect':false, 'selectOnCheck':true, 'pagination':true, 'pageList':[5, 10, 20, 30, 50], 'pageSize':10 }; for(opt in data_opt){ default_opt[opt]=data_opt[opt]; } $('#'+id).datagrid({ url: Url, loadMsg: '數據加載中,請稍候...', pageSize: default_opt["pageSize"], pageList: default_opt["pageList"], pagination:default_opt["pagination"], singleSelect:default_opt["singleSelect"], fitColumns:default_opt["fitColumns"], checkOnSelect:default_opt["checkOnSelect"], selectOnCheck:default_opt["selectOnCheck"], toolbar: dg_toolbar==""?"":"#"+dg_toolbar, columns:cols }); } function contains(arr, obj) { for (var i = 0; i < arr.length; i++) { if (arr[i] === obj) { return true; } } return false; } /*獲取grid的id串，以，隔開，如果是字符串，則以'',''進行隔開 *grid_id grid的id *id 要組拼的字段id */ function getSelections(grid_id,id){ var rows = $("#"+grid_id).datagrid('getSelections'); var ss=[]; for(var i=0; i<rows.length; i++){ var row = rows[i]; ss.push(eval("row."+id)); } return ss.join(','); } /* * 查詢方法，查詢區域必須用<form></form>包裹住，方便提交服務器處理 * 傳入grid的id,that表示查詢按鈕，傳入this即可 */ function search(grid_id,that){ var data = $("#"+grid_id); var queryParams = data.datagrid('options').queryParams; $.each($(that).parent('form').serializeArray(), function() { queryParams[this['name']] = this['value']; }); data.datagrid({ pageNumber: 1 }); }