-
Notifications
You must be signed in to change notification settings - Fork 14
Expand file tree
/
Copy pathtest_jquery_treeintable.html
More file actions
154 lines (145 loc) · 7.27 KB
/
test_jquery_treeintable.html
File metadata and controls
154 lines (145 loc) · 7.27 KB
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI TreeInTable</title>
<link href="jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/ise.treeintable.css">
</head>
<body>
<div id="datastore1" class="datastore"></div>
<div id="treeintable1" class="treeintable">Tree in Table 1 - each layer has own column structure</div><br/>
<div id="treeintable2" class="treeintable">Tree in Table 2 - tree in table (Drag and Drop)</div><br/>
<div id="treeintable3" class="treeintable">Tree in Table 2 - tree only</div><br/>
<script src="jquery-ui-1.11.4/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.ise.datastore.js"></script>
<script type="text/javascript" src="js/jquery.ise.treeintable.js"></script>
<script type="text/javascript">
var treeintableWidget= null;
var storeWidget= null;
// build a store node and assign datastore plugin to it. Upon receiving datastore "complete" event, assign "treeintable" plugin
// to "#treeintable1" node. Get treeintable plugin and run its buildTreeTable()
var store2 =$( "<div></div>" )
.appendTo( "body" )
.datastore({
url: "data/test1.json",
// once receives "complete" event from "datastore" object. carry on this function
complete: function( event, data ) {
console.log( "datastore build complete" );
//instantiate "treeintable" object.
var treeinTableNode =$("#treeintable1").treeintable({ store: store2,
getProcessAttributes:function(storeAttributes){
//instance override the class api
//console.log("instance option override getProcessAttributes()");
return storeAttributes;
},
isToBuildExpandieBasedOnRank:function(){
// use the idx=0 column to show expandie
return 0;
},
shouldThisAttributeHaveExpandie:function(attribute){
//instance override the class api
//console.log("instance option override shouldThisAttributeHaveExpandie()");
return false;
}
});
storeWidget= treeinTableNode.data("iseTreeintable").store;
treeintableWidget=treeinTableNode.data("iseTreeintable");
treeintableWidget.decorateTablerow=function(cpmTableRow){
//instance level override the class api
//console.log("instance override decorateTablerow()");
};
treeintableWidget.onRowSelect=function(trNode){
console.log("TreeInColumnable-items onRowSelect()" + trNode.treetableArrayItem);
// for debugging. Test various api
// storeWidget.getChildItemIndex(trNode.treetableArrayItem)
// storeWidget.getParentRowItem(trNode.treetableArrayItem)
// storeWidget.getSubTree(trNode.treetableArrayItem)
// storeWidget.getDirectChildren(trNode.treetableArrayItem)
// storeWidget.getParentRowItemsList(trNode.treetableArrayItem)
// storeWidget.getChildIndexOfParent(trNode.treetableArrayItem)
// storeWidget.getPreviousSiblingRowItem(trNode.treetableArrayItem);
// storeWidget.getNexeSiblingRowItem(trNode.treetableArrayItem);
// storeWidget.getRootLevelRowItems();
//*/
},
treeintableWidget.buildTreeTable();
}
});
//222--------------------
var treeintableWidget2= null;
var storeWidget2= null;
var store2 =$( "<div></div>" )
.appendTo( "body" )
.datastore({
url: "data/test2.json",
// once receives "complete" event from "datastore" object. carry on this function
complete: function( event, data ) {
console.log( "datastore build complete" );
//instantiate "treeintable" object.
var treeinTableNode =$("#treeintable2").treeintable({ store: store2});
storeWidget2= treeinTableNode.data("iseTreeintable").store;
treeintableWidget2=treeinTableNode.data("iseTreeintable");
treeintableWidget2.decorateTablerow=function(cpmTableRow){
//instance level override the class api
//console.log("instance override decorateTablerow()");
};
treeintableWidget2.onRowSelect=function(trNode){
console.log("TreeInColumnable-items onRowSelect()" + trNode.treetableArrayItem);
};
treeintableWidget2.shouldThisAttributeHaveExpandie=function(attribute){
// Overridable api which determine this attribute need to present expandie icon
return (attribute=="name"); // this is the column showing tree
};
// table headers and display attribute should be matching.
treeintableWidget2.getProcessAttributes=function(storeAttributes){
return ['name', 'id', 'population','area'];
//return storeAttributes;
};
treeintableWidget2.getHeaderDisplayNames=function(){
return [ 'name', 'id', 'population','area'];
};
treeintableWidget2.buildTreeTable();
treeintableWidget2.setTreetableDragAndDrop(); //<------ enable Drag-and-Drop
}
});
//333--------------------
var treeintableWidget3= null;
var storeWidget3= null;
var store3 =$( "<div></div>" )
.appendTo( "body" )
.datastore({
url: "data/test2.json",
// once receives "complete" event from "datastore" object. carry on this function
complete: function( event, data ) {
console.log( "datastore build complete" );
//instantiate "treeintable" object.
var treeinTableNode =$("#treeintable3").treeintable({ store: store3});
storeWidget3= treeinTableNode.data("iseTreeintable").store;
treeintableWidget3=treeinTableNode.data("iseTreeintable");
treeintableWidget3.decorateTablerow=function(cpmTableRow){
//instance level override the class api
//console.log("instance override decorateTablerow()");
};
treeintableWidget3.onRowSelect=function(trNode){
console.log("TreeInColumnable-items onRowSelect()" + trNode.treetableArrayItem);
};
treeintableWidget3.shouldThisAttributeHaveExpandie=function(attribute){
// Overridable api which determine this attribute need to present expandie icon
return (attribute=="name"); // this is the column showing tree
};
// table headers and display attribute should be matching.
treeintableWidget3.getProcessAttributes=function(storeAttributes){
return ['name'];
//return storeAttributes;
};
treeintableWidget3.getHeaderDisplayNames=function(){
return [ 'name'];
};
treeintableWidget3.buildTreeTable();
}
});
</script>
</body>
</html>