easyui表格使用方法
.html文件
<table id="mainList" style="width: 100%;height: 100%" ></table>
.js文件
$('#mainList').datagrid({
url:"请求地址",
headers:{token: sessionStorage.getItem('token')}, //根据接口需求添加
checkOnSelect: false,
rownumbers: true,
pagination: true,
fitColumns: true,
scrollbarSize: 0,
pageSize: 10,
pageList:[10],
onClickCell: function(){
$(this).datagrid('clearSelections');
},
columns: [[
{field: 'ck',checkbox: true,width: '5%'},
{field: 'id',title:'id', hidden:'true'},
{field: 'name', title: '名称', width: '50%'},
{field: 'age', title: '年龄', width: '30%'},
{field: 'operation', title: '操作', width: '15%',
formatter:function(value,rec,index){
return '<a class="editClass" href="javascript:void(0)">编辑</a>';
}
}
]],
onLoadSuccess:function(data){
$('.editClass').linkbutton({plain:true,iconCls:'icon-edit'});
$(this).datagrid('fixRowHeight');
},
onBeforeLoad: function(param){ //提供给接口分页数据
param["pageNo"] = param.page;
param["limit"] = param.rows;
delete param.rows;
delete param.page;
},
loadFilter: function (res) {
if (res.result == 'Y'){//接口返回成功信息
return res.message;
} else { //接口返回失败信息
$.messager.alert("提示",res.message);
setTimeout(function(){ //自动关闭提示信息
$(".messager-body").window('close');
},1000);
}
}
})
具体可查看easyui官网介绍 官网