easyUI之datagrid绑定后端返回数据的两种方式

Posted 2021-02-03 wulisz

先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍。

虽然精简，但是，很具有“师傅领进门，修行靠个人”的精神，先发自内心的赞一个。

但是，很多人和小编一样，第一次接触easyUI，对这么精简的问题，问题颇多，因此，小编在这里献上一份个人认为比较详尽的版本

 

通过HTML/JSP页面初始化表格，JS绑定数据

在JSP中定义table和列名，以及列属性。

列属性却不定义在data-option属性中，field对应的字段名，需和后台返回的字段名相同。

    <table id="good_tables" style="height: 484px;">
        <thead>
        <tr>
           <th data-options="field:‘id‘,sortable:true">商品ID</th>
            <th data-options="field:‘goodsName‘">商品名称</th>
            <th data-options="field:‘supplier‘">供应商</th>
        </tr>
        </thead>
    </table>

在JS文件中获取并绑定数据

$(document).ready(function () {
    initGoodsTable();
});

function initGoodsTable(){
    $(‘#good_tables‘).datagrid({
        nowrap: true,
        autoRowHeight: true,
        striped: true,
        fitColumns: true,
        collapsible: true,
        url: ‘xxx‘,
        border: false,
        idField: ‘id‘,
        selectOnCheck: true,
        singleSelect: true,
        width:‘100%‘ ,
        resizable:true,
        remoteSort: false,
        pagination: true,
        pageSize: 10,
        rowNumbers: false,
        success:function (data) {
            var rows=[];
            for(var i=0; i< data.length; i++){
                rows.push({
                    id:data[i].id,
                    goodsName:data[i].goodsName,
                    supplier:data[i].supplier
                });
            }
            $("#good_tables").datagrid({data:rows});
        },
        error:function () {
            $.messager.alert("提示","获取数据失败");
        }
    });
}

通过JS获取并绑定数据

在JSP中定义table

<table id="good_tables" style="height: 484px;"></table>

在JS页面中初始化列名和数据

$(document).ready(function () {
    initGoodsTable();
});

function initGoodsTable(){
    $(‘#good_tables‘).datagrid({
        nowrap: true,
        autoRowHeight: true,
        striped: true,
        fitColumns: true,
        collapsible: true,
        url: ‘xxx‘,
        border: false,
        idField: ‘id‘,
        selectOnCheck: true,
        singleSelect: true,
        width:‘100%‘ ,
        resizable:true,
        remoteSort: false,
        columns: [[
            {
                field: ‘id‘,
                title: ‘商品ID‘,
                align: ‘center‘,
                formatter: function (value) {
                    return value;
                }
            },
            {
                field: ‘goodsName‘,
                title: ‘商品名称‘,
                align: ‘center‘,
                formatter: function (value) {
                    return value;
                }
            }, {
                field: ‘supplier‘,
                title: ‘供应商‘,
                align: ‘center‘,
                formatter: function (value,row) {
                    return value;
                }
            }
        ]],
        pagination: true,
        pageSize: 10,
        rowNumbers: false
    });
}

以上就是小编的分享，觉得有用的小伙伴，记得点赞！