HTML5定制全选列头

TWaverGeek

浏览: 165394 次
性别:
来自: 上海

最近访客更多访客>>

hanjin313

wyx065747

WuShiG

emoking

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

MONO Design
TWaver HTML5

html5 TWaver 3D TWaver HTML5

随着HTML5产品分支的不断深入使用，HTML5的需求也是越来越多，表格组件的使用也不例外，什么排序，分页，自动列宽等。最近有客户提出了如果让表格的列头加上全选的功能。细细分析其实就是两部分，表格的body部分是勾选的列，表头也绘制成勾选的列。
对于表格body部分的勾选，最简单是应用TWaver默认的boolean类型的render，方法很简单，只要在创建表格列时设置下面的语句就行：

1

column.setValueType('boolean');

主要就是绘制表头的render，表头的render设置也是很easy，我们只要在表头的div中加上checkbox，然后再给checkbox加上动作，如果勾选上，就让这一列所有的数据都为true，反之亦然。代码如下：

1

var checkbox = document.createElement('input');

2

checkbox.setAttribute("type","checkbox");

3

checkbox.checked = true;

4
checkbox.onclick = function(e){

5

var checked = this.checked;

6
column.checked = checked;

7
databox.forEach(function(element){

8

    element.setClient("nVisible",checked);

9
});

10
}

11
column.renderHeader = function(div){

12

    div.style.textAlign = 'center';

13

    div.appendChild(checkbox);

14
}

这样的默认效果感觉还不是那么美观，我们用图片来替代checkbox也可以达到同样的效果，再来看看这张图，感觉是不是好看了一点。

完整的代码实现见下方：

1
<!DOCTYPE html>

2

<meta charset="utf-8">

3
<html>

4
<head>

5

    <title>Custom Table</title>

6

    <style>

7

        .visible-header{background:url(checkeye.png) 0px 0px; border:none; width: 12px; height: 7px; cursor: pointer;}

8

        .unVisible-header{background:url(checkeye.png) -17px 0px;}

9

    </style>

10

    <script type="text/javascript" src="twaver.js"></script>

11

    <script type="text/javascript">

12

        function init() {

13

            var box = new twaver.ElementBox();

14

            initDataBox(box);

15

            var table = new twaver.controls.Table(box);

16

            table.setEditable(true);

17

            var tablePane = new twaver.controls.TablePane(table);

18

            var visibleColumn = createColumn(table, 'Visible', 'nVisible','client', 'boolean', 30);

19

            createColumn(table, 'Id', 'id', 'accessor', 'string',300);

20

            createColumn(table, 'Name', 'name', 'accessor', 'string',70);

21

            renderHeaderCheckBox(visibleColumn,box);

22

            visibleColumn.renderCell = function(cell){renderCellCheckbox(cell)};

23

            document.body.appendChild(tablePane.getView());

24

            tablePane.getView().style.left = '50px';

25

            tablePane.getView().style.top = '50px';

26

            tablePane.getView().style.width = '400px';

27

            tablePane.getView().style.height = '800px';

28

        }

29
 
30

        function renderHeaderCheckBox(column,databox){

31

            var checkbox = document.createElement('input');

32

            checkbox.setAttribute("type","button");

33

            checkbox.setAttribute("class","visible-header");

34

            checkbox.checked = true;

35

            checkbox.onclick = function(e){

36

                var checked = this.checked;

37

                column.checked = checked;

38

                if(checked){

39

                    checkbox.setAttribute("class","visible-header");

40

                }else{

41

                    checkbox.setAttribute("class","visible-header unVisible-header");

42

                }

43

                this.checked = !this.checked;

44

                databox.forEach(function(element){

45

                    element.setClient("nVisible",checked);

46

                });

47

            }

48

            column.renderHeader = function(div){

49

                div.style.textAlign = 'center';

50

                div.appendChild(checkbox);

51

            }

52

        }

53
 
54

        function renderCellCheckbox(cell){

55

                var checkbox = document.createElement('input');

56

                checkbox.setAttribute("type","button");

57

                var checked = cell.data.getClient("nVisible");

58

                if(checked){

59

                    checkbox.setAttribute("class","visible-header");

60

                }else{

61

                    checkbox.setAttribute("class","visible-header unVisible-header");

62

                }

63

                checkbox.onclick = function(e){

64

                    var checked = cell.data.getClient("nVisible");

65

                    cell.data.setClient("nVisible",!checked);

66

                }

67

                cell.div.style.textAlign = 'center';

68

                cell.div.appendChild(checkbox);

69

        }

70
 
71

        function initDataBox(box){

72

            for(var i = 0; i < 10; i++){

73

                var node = new twaver.Node();

74

                node.setName("node"+i);

75

                node.setClient('nVisible',true);

76

                box.add(node);

77

            }

78

        }

79
 
80

        function createColumn(table, name, propertyName, propertyType, valueType, width) {

81

            var column = new twaver.Column(name);

82

            column.setName(name);

83

            column.setPropertyName(propertyName);

84

            column.setPropertyType(propertyType);

85

            if (valueType) column.setValueType(valueType);

86

            if(width) column.setWidth(width);

87

            column.setEditable(true);

88

            column.setSortable(false);

89

            table.getColumnBox().add(column);

90

            return column;

91

        }

92

    </script>

93
</head>

94

<body onload="init()" style="margin:0;">

95
</body>

96
</html>

分享到：

服务器各项指标的图形化显示 | Autolayout性能优化

2014-09-10 14:57
浏览 710
评论(0)
分类:行业应用
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5定制全选列头

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5定制全选列头

评论

发表评论

相关推荐

HTML5数据可视化第四弹：交互式地铁线路图

HTML5数据可视化第三弹：萌萌哒拓扑图分组

看HTML5如何化解大型复杂网络拓扑图的分组嵌套效果

HTML5数据可视化第二弹：打造最美3D机房

HTML5数据可视化第一弹：彩虹爆炸图

HTML5组织结构图之名片式网元布局

HTML5流程图之矢量可伸展workflow

HTML5流程图之复杂关系网

TWaver GIS制作穹顶之下的雾霾地图

TWaver HTML5之树形布局

TWaver推智能手表挑战华为苹果

TWaver 3D应用于大型数据中心(续)

TWaver动画之雷达扫描效果

HTML5 实现Link跳线效果

在TWaver的Tree节点上画线

22万个木箱！TWaver 3D极限压榨

如何在MONO 3D寻找最短路路径

如何创建TWaver 3D的轮廓选中效果

巧用TWaver 3D 矢量图形功能

TWaver MONO Design 中动画的导出与播放

最近访客更多访客>>