-
Notifications
You must be signed in to change notification settings - Fork 0
/
datatable-masterdetail-source.mustache
115 lines (99 loc) · 3.62 KB
/
datatable-masterdetail-source.mustache
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
<div id="template" class="yui3-skin-sam dt-example">
Select an animal category below;
<div id="mtable"></div>
<div id="chars" style="display:none;">
<br/>Characters of the <span id="acategory"></span> category include;
<div id="dtable"></div>
</div>
</div>
<script type="text/javascript">
YUI().use( "datatable", function (Y) {
var animal_data = [
{ aname: 'Lions', chars:[ 'Leo', 'Simba', 'Elsa', 'Cowardly Lion' ] },
{ aname: 'Amoebas' },
{ aname: 'Tigers', chars:[ 'Shere Kahn', 'Tigger', 'Tony' ] },
{ aname: 'Mules', chars:[ 'Francis' ] },
{ aname: 'Bears', chars:[ 'Smokey', 'Reginald', 'Winnie-the-Pooh', 'Baloo', 'Yogi' ] },
{ aname: 'Snakes', chars:[ 'Kaa', 'The Serpent', 'Nagini' ] }
];
//
// Create the "parent" DataTable
//
var dt_master = new Y.DataTable({
columns : [
{ key:'aname', label:'Type' },
{ name:'nchars', label:'No. of Chars',
formatter: function(o){
return ( o.data.chars ) ? o.data.chars.length : 0;
}
}
],
data : animal_data,
width: 200
}).render("#mtable");
//
// Add a new attribute to track the last TR clicked,
// this is used in the details DT formatter below and later
// in the row click handler `delegate` for row highlighting
//
dt_master.addAttr("currentTR", { value: null });
//
// Create the characters DataTable and render it (it is hidden initially)
//
var dt_detail = new Y.DataTable({
columns : [
{ name:'aname', label:'Animal Category',
formatter: function(o){
// just retrieve the current Master record and return the "aname" column
var parent_rec = dt_master.getRecord( dt_master.get('currentTR') );
return parent_rec.get('aname');
}
},
{ key:'char_name', label:'Character' }
],
data : [],
strings : {
emptyMessage : "No critter characters were found!"
},
width: 350
}).render("#dtable");
//
// Setup TR click delegation on the master table
//
dt_master.delegate( "click", function(e){
var tr = e.currentTarget, // this is the Node for the TR clicked ...
rec = this.getRecord(tr); // returns the current Record for the clicked TR
//
// This if-block does double duty,
// (a) it tracks the first click to toggle the "details" DIV to visible
// and (b) it un-hightlights the last TR clicked
//
if ( !this.get('currentTR') )
Y.one("#chars").show(); // first time thru ... display the Detail DT DIV that was hidden
else
this.get('currentTR').all("td").removeClass("myhilite");
//
// After unhighlighting, now set the currentTR, and highlight the clicked TR,
// also update the heading in "acategory"
//
this.set('currentTR',tr);
tr.all("td").addClass("myhilite");
Y.one("#acategory").setContent(rec.get('aname')); // update text preceding table
//
// Collect the "chars" member of the parent record into an array of objects
// with property name "aname"
//
var detail_data =[];
if ( rec.get('chars') ) {
Y.each( rec.get('chars'), function(item){
detail_data.push( {char_name:item});
});
}
//
// Set the "detail_data" to the dt_detail DataTable
// ( it automatically refreshes )
//
dt_detail.set('data', detail_data );
},"tr", dt_master );
});
</script>