包含多行数据的行表格支持单个逻辑行包含多行数据。这可以通过将 colSpan 属性添加到布局定义中来实现，如清单 10 所示。
清单 10.定义包含多行数据的行的 JavaScript 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| var layout = [[{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field:'manager',
width:'100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
},{
name: 'On Board date',
field: 'date',
width: '100px'
}], [ {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
colSpan: '2'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
colSpan: '2'
}]];
|
名为 “Total annual leave days” 和 “Annual leave days already taken” 的列与其他列的数据位于同一行
图 4. 具有多行的表格 表格数据格式可以使用一种表格格式函数来更改数据存储中的数据的呈现方式。这是 MVC 的一种核心概念。它可以定义一种符合用户当地习惯的数据格式，比如日期，甚至可以构造 HTML 组件，比如复选框。清单 11 给出了一个示例。
清单 11. 格式化表格数据的 JavaScript 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| var dateFormatter = function(data, rowIndex){
return dojo.date.locale.format(new Date(data), {
datePattern: "dd MMM yyyy",
selector: "date",
locale: "en"
});
};
var managerFormatter = function(data, rowIndex){
if (data) {
return "<input type='checkbox' checked />";
}
else {
return "<input type='checkbox' />";
}
};
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field: 'manager',
formatter: managerFormatter,
width: '100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
formatter: dateFormatter
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}];
|
图 5. 表格数据格式 使用 get interface您可以使用 get interface 在数据存储之外定义其他列来动态检索值。在上面的例子中，我拥有 “Total annual leave days” 和 “Annual leave days already taken” 列。如果您想知道还有多少天年假（可以根据现有的两列计算得出），可以使用 get interface 动态检索它。
我添加了一个名为 “Annual leave days left” 的新列，它的值为 “Total annual leave days” 减 “Annual leave days already taken” 的差，如清单 12 所示。
清单 12. 使用 get interface 的 JavaScript 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| function getLeftDays(rowIndex, item){
if (item != null) {
return item.annualLeaveTotal - item.annualLeaveTaken;
}
}
var layout = [{
name: 'ID',
field: 'id',
width: '10px'
}, {
name: 'Name',
field: 'name',
width: '50px'
}, {
name: 'Is manager',
field: 'manager',
formatter: managerFormatter,
width: '100px'
}, {
name: 'Sex',
field: 'sex',
width: '50px'
}, {
name: 'Age',
field: 'age',
width: '50px'
}, {
name: 'On Board date',
field: 'date',
width: '100px',
formatter: dateFormatter
}, {
name: 'Total annual leave days',
field: 'annualLeaveTotal',
width: '100px'
}, {
name: 'Annual leave days already taken',
field: 'annualLeaveTaken',
width: '100px'
}, {
name: 'Annual leave days left',
get: getLeftDays,
width: '100px'
}];
|
图 6. 使用 get interface |
