About the usage of jquery data() in treetable
Hi:
I recently try to read source codes in jquery treetable in deep, and found some problems I don't know.
here is the problem about the usage of jquery data, and the code snippet is following:
- init: function(options, force) {
var settings;
settings = $.extend({
branchAttr: "ttBranch",
clickableNodeNames: false,
column: 0,
columnElType: "td", // i.e. 'td', 'th' or 'td,th'
expandable: false,
expanderTemplate: "<a href='#'> </a>",
indent: 19,
indenterTemplate: "<span class='indenter'></span>",
initialState: "collapsed",
nodeIdAttr: "ttId", // maps to data-tt-id
parentIdAttr: "ttParentId", // maps to data-tt-parent-id
stringExpand: "Expand",
stringCollapse: "Collapse",
// Events
onInitialized: null,
onNodeCollapse: null,
onNodeExpand: null,
onNodeInitialized: null
}, options);
return this.each(function() {
var el = $(this), tree;
if (force || el.data("treetable") === undefined) {
tree = new Tree(this, settings);
tree.loadRows(this.rows).render();
el.addClass("treetable").data("treetable", tree);
if (settings.onInitialized != null) {
settings.onInitialized.apply(tree);
}
}
return el;
});
},
the main problem is about el.addClass("treetable").data("treetable", tree);
why it can store the tree data via data("treetable", tree), and when I use chrome to debug
this code snippet, i didn't see any data-treetable attribute in "this" instruction content, even
to tree data.
And then what's more, when I click and invoke function node, the code snippet as below
- node: function(id) {
return this.data("treetable").tree[id];
},
it really get the data from this.data("treetable").tree[id], but still I can not find any info about that
from chrome debug tools. Is anyone know the reason and how it did , and what's its principle?
Thanks