-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtabular_ztree.js
111 lines (96 loc) · 2.97 KB
/
tabular_ztree.js
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*
** 利用addDiyDom初始化zTree
*/
function init_tabular_ztree(obj, zSetting, nodes, tSetting)
{
// tabular_ztree配置参数
default_setting = {
cols:[{
key:"",
name:"TREE_NODES",
width:0.4
},{
key:"k1",
name:"COL1",
width:0.2
},{
key:"k2",
name:"COL2",
width:0.2
},{
key:"k3",
name:"COL3",
width:0.2
}],
config: {
switch: true, /*zTree展开/折叠图标*/
space: 20 /*不同层级基础边距*/
}
};
tSetting = $.extend(default_setting, tSetting);
// 自定义dom
zSetting.view.addDiyDom = function(treeId, treeNode){
diyDom(treeId, treeNode, tSetting)
};
// 初始化zTree
var treeObj = $.fn.zTree.init(obj, zSetting, nodes);
// 添加表头
var header = treeHeader(tSetting.cols);
if (obj.find('li')) obj.prepend(header);
// 设置样式
obj.addClass("tabular_ztree");
return treeObj;
}
/*
** 根据配置参数生成表头结构
*/
function treeHeader(cols)
{
var header = '<li class="tabular_head"><a>';
for(k in cols){
header += '<div class="tabular_col" style="width:'+cols[k].width*100+'%;">'+cols[k].name+'</div>';
}
header += '</a></li>';
return header;
}
/*
** 重新组织zTree节点结构,以便配合样式文件显示表格样式
*/
function diyDom(treeId, treeNode, tSetting)
{
var spaceWidth = tSetting.config.space || 20; // 左边距控制
// zTree节点主要dom
var liObj = $("#" + treeNode.tId);
var switchObj = $("#" + treeNode.tId + "_switch"); // 展开/折叠图标
var checkObj = $("#" + treeNode.tId + "_check"); // checkbox
var aObj = $("#" + treeNode.tId + "_a"); // 节点
var icoObj = $("#" + treeNode.tId + "_ico"); // 节点图标
var spanObj = $("#" + treeNode.tId + "_span"); // 节点名称
// 删除原位置dom
switchObj.remove();
checkObj.remove();
icoObj.remove();
spanObj.remove();
// 转移到<div>标签下作为第一列
var node = $('<div class="tabular_col" style="width:'+tSetting.cols[0].width*100+'%;"></div>');
var spaceSpan = $('<span style="height:1px;display: inline-block;width:' + (spaceWidth * treeNode.level) + 'px"></span>');
node.append(spaceSpan);
if(tSetting.config.switch) node.append(switchObj);
if(checkObj.length) node.append(checkObj);
node.append(icoObj);
node.append(spanObj);
aObj.append(node);
// 添加新列
var editStr = '';
for(k in tSetting.cols){
if(k==0) continue;
editStr += '<div class="tabular_col" style="width:'+tSetting.cols[k].width*100+'%;">' + getData(treeNode[tSetting.cols[k].key], "") + '</div>';
}
aObj.append(editStr);
};
/*
** 获取节点属性值
*/
function getData(val, empty){
return val==null ? empty : val;
}