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 }

]]

});