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

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