jquery easyui 封装
使用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 }); }
