深入理解iuap design-06-进击的grid
GuoYongfeng opened this issue · comments
背景介绍
实际应用过程中，除了以表格形式进行数据展示之外，还有需要排序、复选、合计、自定义渲染、编辑数据等复杂的功能，而表格控件则为了解决此类问题而生。
主要功能
- 排序
- 交换列
- 复选
- 数字列
- 合计
- 自定义渲染
- 编辑功能
- 显示/隐藏列
- 拖动
- 固定列
- 表单展示
- 多级表头
- 树表展示
基础应用说明
插件依赖
http://design.yyuap.com/static/uui/latest/css/u.css
http://design.yyuap.com/static/jquery/jquery-1.9.1.min.js
http://design.yyuap.com/static/uui/latest/js/u.js
示例代码
1、创建div
<div class="grid-body">
<div class="grid" id="grid-comp1"></div>
</div>
2、创建column对象
var colu = [{
field: "id",
title: "id"
}, {
field: "pid",
title: "pid"
}, {
field: "column1",
title: "column1"
}, {
field: "column2",
title: "column2"
}, {
field: "column3",
title: "column3"
}
];
3、创建数据信息
var data1 = {
values: [{
column1: "11",
column2: "12",
column3: "13",
id: '0',
pid: ''
}, {
column1: "21",
column2: "22",
column3: "23",
id: '1',
pid: '0'
}, {
column1: "31",
column2: "32",
column3: "33",
id: '3',
pid: '1'
}
]
};
4、创建表格控件
$("#grid-comp1").grid({
dataSource: data1,
id: 'case-g1',
editable: true,
keyField: 'id',
columnmenu: false,
parentKeyField: 'pid',
columns: colu
});
kero应用说明
依赖资源
http://design.yyuap.com/static/uui/latest/css/font-awesome.css
http://design.yyuap.com/static/uui/latest/css/u.css
http://design.yyuap.com/static/uui/latest/css/grid.css
http://design.yyuap.com/static/jquery/jquery-1.9.1.min.js
http://design.yyuap.com/static/uui/latest/js/u-polyfill.js
http://design.yyuap.com/static/uui/latest/js/u.js
http://design.yyuap.com/static/uui/latest/js/u-grid.js
示例代码
1、创建div
<div id="gridTest1" u-meta='{"id":"grid1","data":"dataTable","type":"grid","multiSelect":true,"editable":true,"onBeforeClickFun":"onBeforeClickFun1"}'>
<div options='{"field":"name","dataType":"String","title":"名","editType":"string","sortable":true,"canSwap":true}'></div>
<div options='{"field":"surname","dataType":"String","title":"姓氏","editType":"string" ,"renderType":"timeRender","sortable":true}'></div>
<div options='{"field":"currency","dataType":"String","title":"余额","editType":"float","editOptions":{"validType":"float","precision":"3","max":10000},"sumCol":true}'></div>
</div>
示例中#gridTest1为表格控件的顶层div，u-meta中为表格控件的属性设置，其中data为dataTable的变量名，type固定为grid。子项div对应的每个column的属性设置，如果要设置编辑控件的属性，需要将属性设置到editOptions中。
框架默认支持的editType如下：
- string
- integer
- checkbox
- combo
- radio
- float
- currency
- datetime
- date
- time
- url
- password
- percent
框架默认支持的renderType如下：
- booleanRender
- integerRender
- currencyRender
- floatRender
- comboRender
- dateRender
- dateTimeRender
- radioRender
- urlRender
- passwordRender
- percentRender
表格的详细API：http://design.yyuap.com/dist/pages/plugins/grid.html
2、创建viewModel
$(document).ready(function () {
viewModel = {
dataTable: new u.dataTable({
meta: {
"name": "",
"time":"",
"currency": ""
}
}, this),
onBeforeClickFun1:function(obj){
obj.gridObj.setGridEditType('default');
return true;
},
}
});
过程1中使用的dataTable以及grid中的function类型的变量都需要定义到viewModel中。
3、创建app
var app = u.createApp({
el: 'body',
model: viewModel
});
创建app的时候会根据传入的el对应的选择器查找dom元素，并将dom元素下的所有代码u-meta的元素解析为控件，model属性为对应之前定义的viewModel。
4、dataTable中添加数据
var data = [{
"name": "赵四",
"time": "12:22:00",
"currency": "200"
}, {
"name": "王一",
"time": "04:44:22",
"currency": "300"
}]
viewModel.dataTable.removeAllRows();
viewModel.dataTable.setSimpleData(data);
通过dataTable的setSimpleData方法将数据插入dataTable中。框架会自动将数据传入表格控件并显示。