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

最新推荐文章于 2023-05-24 11:25:02 发布

weixin_33895695

最新推荐文章于 2023-05-24 11:25:02 发布

阅读量390

点赞数

文章标签： javascript ViewUI

本文介绍使用EasyUI框架加载表格数据的方法，包括多行标题设置及两种不同方式的数据加载示例。通过JavaScript代码实现静态数据加载到表格中，并展示了如何配置表格列属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加载标题写法：

多行标题：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 }

]]

});

方法二：