easyUI datagrid 使用方法

最新推荐文章于 2024-06-10 16:05:11 发布

qq_37656005

最新推荐文章于 2024-06-10 16:05:11 发布

阅读量370

点赞数

分类专栏： easyui 文章标签： javascript easyui

本文链接：https://blog.csdn.net/qq_37656005/article/details/113877853

版权

easyui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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);
            }
        }
    })