使用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
});
}
时间： 2024-10-13 23:24:17