easyui中datagrid用法,加载table数据与标题

加载标题写法:

多行标题:columns: [[
    columns: [[
                       { field: 'itemid', title: 'Item ID', rowspan: 2, width: 80, sortable: true },
                       { field: 'productid', title: 'Product ID', rowspan: 2, width: 80, sortable: true },
                       { title: 'Item Details', colspan: 4 }
                       ], [
                      { field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true },
                       { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true },
                       { field: 'attr1', title: 'Attribute', width: 100 },
                       { field: 'status', title: 'Status', width: 60 }
                       ]]

单行标题用Js实现:

$('#tt').datagrid({
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 80 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right' },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
{ field: 'attr1', title: 'Attribute', width: 100 },
{ field: 'status', title: 'Status', width: 60 }
]]
});

实现一个table的数据加载例子:

静态:   

 var data_ = [{

            "dataindex0": "1",

            "dataindex1": "Y08",

            "dataindex2": "Y00000000158",

            "dataindex3": "注",

            "dataindex4": "Z",

            "dataindex5": "注",

            "dataindex6": "250",

            "dataindex7": "东北厂",

            "dataindex8": "国",

            "dataindex9": "123123",

            "dataindex10": null,

            "dataindex11": null,

            "dataindex12": null,

            "dataindex13": null

        },

       {

            "dataindex0": "1",

            "dataindex1": "Y08",

            "dataindex2": "Y00000000158",

            "dataindex3": "注",

            "dataindex4": "Z",

            "dataindex5": "注",

            "dataindex6": "250",

            "dataindex7": "东北厂",

            "dataindex8": "国",

            "dataindex9": "123123",

            "dataindex10": null,

            "dataindex11": null,

            "dataindex12": null,

            "dataindex13": null

        }];

   方法一:

 $('#dg').datagrid({

        fit: true,

        checkOnSelect: true,

        selectOnCheck: true,

        singleSelect: true,

        fitColumns: true,

        data:data_,

        //pageSize:100,

        //pagination:true,

        columns: [[

            { field: 'dataindex0', title: 'dataindex0', width: 80 },

            { field: 'dataindex1', title: 'dataindex1', width: 80 },

            { field: 'dataindex2', title: 'dataindex2', width: 80 },

            { field: 'dataindex3', title: 'dataindex3', width: 80 },

            { field: 'dataindex4', title: 'dataindex4', width: 80 },

            { field: 'dataindex5', title: 'dataindex5', width: 80 },

            { field: 'dataindex6', title: 'dataindex6', width: 80 },

            { field: 'dataindex7', title: 'dataindex7', width: 80 },

            { field: 'dataindex8', title: 'dataindex8', width: 80 },

            { field: 'dataindex9', title: 'dataindex9', width: 80 }

        ]]

    });

方法二:

 $('#dg').datagrid({

        fit: true,

        checkOnSelect: true,

        selectOnCheck: true,

        singleSelect: true,

        fitColumns: true,

        //pageSize:100,

        //pagination:true,

        columns: [[

            { field: 'dataindex1', title: 'dataindex1', width: 80 },

            { field: 'dataindex2', title: 'dataindex2', width: 80 },

            { field: 'dataindex3', title: 'dataindex3', width: 80 },

            { field: 'dataindex4', title: 'dataindex4', width: 80 },

            { field: 'dataindex5', title: 'dataindex5', width: 80 },

            { field: 'dataindex6', title: 'dataindex6', width: 80 },

            { field: 'dataindex7', title: 'dataindex7', width: 80 },

            { field: 'dataindex8', title: 'dataindex8', width: 80 },

            { field: 'dataindex9', title: 'dataindex9', width: 80 },

            { field: 'dataindex10', title: 'dataindex10', width: 80 }

        ]]

    });

posted @ 2016-09-02 09:57  芜明-追星  阅读(1110)  评论(0编辑  收藏  举报