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 }
]]
});
最新文章
- 使用axis开发web service服务端
- 《Administrator's Guide》之Managing Memory
- Linux下查看所有CPU核心使用率的方法
- jQuery工具函数
- [转]Hulu 2013北京地区校招笔试题
- 解析微信node开发;拿token
- centOS7 mini配置linux服务器(一)安装centOs7
- DDD理论学习系列(10)-- 聚合
- ceph存储引擎bluestore解析
- SoapUI实践:自动化测试、压力测试、持续集成
- ShoneSharp语言(S#)的设计和使用介绍系列(2)— 掀开盖头
- &;&;和&;、||和|的区别
- .NET Core微服务之基于Steeltoe使用Eureka实现服务注册与发现
- Vue CLI 3使用:浏览器兼容性
- Django之JWT理解及简单应用
- nginx + keepalived 主从模式
- python super超类方法
- js实现页面锚点定位动画滚动
- arcengine实现右键菜单打开/关闭所有图层
- react 使用 redux 的时候 用 ref获取子组件的state
热门文章
- DataGridView合并单元格(一列或一行)
- Report_SRW工具的基本用法(概念)
- Linux内核(11) - 子系统的初始化之内核选项解析
- hdu 1213 How Many Tables(并查集求无向图有几个连通分量)
- 2-05. 求集合数据的均方差(15) (数学啊 ZJU_PAT)
- 导入sklearn 报错,找不到相关模块
- python标准库介绍——4 string模块详解
- cocos2dx 3.x ccPositionTextureColor_vert与ccPositionTextureColor_noMVP_vert
- Mybatis里Mapper映射sql文件里insert的主键返回selectKey使用
- [na]PKI公钥处理思路