easyUI之datagrid綁定后端返回數據的兩種方式

先來看一下某一位大佬留下的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
    });
}

以上就是小編的分享，覺得有用的小伙伴，記得點贊！