easyUI datagrid 使用方法

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官网介绍 官网