/** * @description {Class} wdTree * This is the main class of wdTree. */ (function($) { $.fn.swapClass = function(c1, c2) { return this.removeClass(c1).addClass(c2); }; $.fn.switchClass = function(c1, c2) { if (this.hasClass(c1)) { return this.swapClass(c1, c2); } else { return this.swapClass(c2, c1); } }; $.fn.treeview = function(settings) { var dfop = { method: "POST", datatype: "json", /** * @description {Config} url * {String} Url for child nodes retrieving. */ url: false, /** * @description {Config} cbiconpath * {String} Checkbox image path. */ cbiconpath: "images/wdTree/icons/", icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"], /** * @description {Config} showcheck * {Boolean} Whether to show check box or not. */ showcheck: false, /** * @description {Event} oncheckboxclick:function(tree, item, status) * Fired when check box is clicked on. * @param {Object} tree This tree object. * @param {Object} item Node item clicked on. * @param {Number} status 1 for checked, 0 for unchecked. */ oncheckboxclick: false, /** * @description {Event} onnodeclick:function(tree, item) * Fired when a node is clicked on. * @param {Object} tree This tree object. * @param {Object} item Ndde item clicked on. */ onnodeclick: false, /** * @description {Config} cascadecheck * {Boolean} Whether node being seleted leads to parent/sub node being selected. */ cascadecheck: true, /** * @description {Config} data * {Object} Tree theme. Three themes provided. 'bbit-tree-lines' ,'bbit-tree-no-lines' and 'bbit-tree-arrows'. * @sample * data:[{ * id:"node1", //node id * text:"node 1", //node text for display. * value:"1", //node value * showcheck:false, //whether to show checkbox * checkstate:0, //Checkbox checking state. 0 for unchecked, 1 for partial checked, 2 for checked. * hasChildren:true, //If hasChildren and complete set to true, and ChildNodes is empty, tree will request server to get sub node. * isexpand:false, //Expand or collapse. * complete:false, //See hasChildren. * ChildNodes:[] // child nodes * }] * */ data: null, /** * @description {Config} clicktoggle * {String} Whether to toggle node when node clicked. */ clicktoggle: true, /** * @description {Config} theme * {String} Tree theme. Three themes provided. 'bbit-tree-lines' ,'bbit-tree-no-lines' and 'bbit-tree-arrows'. */ theme: "bbit-tree-arrows" //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows }; $.extend(dfop, settings); var treenodes = dfop.data; var me = $(this); var id = me.attr("id"); if (id == null || id == "") { id = "bbtree" + new Date().getTime(); me.attr("id", id); } var html = []; buildtree(dfop.data, html); me.addClass("bbit-tree").html(html.join("")); InitEvent(me); html = null; //pre load the icons if (dfop.showcheck) { for (var i = 0; i < 3; i++) { var im = new Image(); im.src = dfop.cbiconpath + dfop.icons[i]; } } //region function buildtree(data, ht) { ht.push("
"); // Wrap ; ht.push("
"); // body ; ht.push(""); // root and; ht.push("
"); // body end; ht.push("
"); // Wrap end; } //endregion function buildnode(nd, ht, deep, path, isend) { var nid = nd.id.replace(/[^\w]/gi, "_"); ht.push("
  • "); ht.push("
    "); //span indent ht.push(""); if (deep == 1) { ht.push(""); } else if (deep > 1) { ht.push(""); for (var j = 1; j < deep; j++) { ht.push(""); } } ht.push(""); //img cs.length = 0; if (nd.hasChildren) { if (nd.isexpand) { cs.push(isend ? "bbit-tree-elbow-end-minus" : "bbit-tree-elbow-minus"); } else { cs.push(isend ? "bbit-tree-elbow-end-plus" : "bbit-tree-elbow-plus"); } } else { cs.push(isend ? "bbit-tree-elbow-end" : "bbit-tree-elbow"); } ht.push(""); ht.push(""); //checkbox if (dfop.showcheck && nd.showcheck) { if (nd.checkstate == null || nd.checkstate == undefined) { nd.checkstate = 0; } ht.push(""); } //a ht.push(""); ht.push("", nd.text, ""); ht.push(""); ht.push("
    "); //Child if (nd.hasChildren) { if (nd.isexpand) { ht.push(""); } else { ht.push(""); } } ht.push("
  • "); nd.render = true; } function getItem(path) { var ap = path.split("."); var t = treenodes; for (var i = 0; i < ap.length; i++) { if (i == 0) { t = t[ap[i]]; } else { t = t.ChildNodes[ap[i]]; } } return t; } function check(item, state, type) { var pstate = item.checkstate; if (type == 1) { item.checkstate = state; } else {// go to childnodes var cs = item.ChildNodes; var l = cs.length; var ch = true; for (var i = 0; i < l; i++) { if ((state == 1 && cs[i].checkstate != 1) || state == 0 && cs[i].checkstate != 0) { ch = false; break; } } if (ch) { item.checkstate = state; } else { item.checkstate = 2; } } //change show if (item.render && pstate != item.checkstate) { var nid = item.id.replace(/[^\w]/gi, "_"); var et = $("#" + id + "_" + nid + "_cb"); if (et.length == 1) { et.attr("src", dfop.cbiconpath + dfop.icons[item.checkstate]); } } } //iterate all children nodes function cascade(fn, item, args) { if (fn(item, args, 1) != false) { if (item.ChildNodes != null && item.ChildNodes.length > 0) { var cs = item.ChildNodes; for (var i = 0, len = cs.length; i < len; i++) { cascade(fn, cs[i], args); } } } } //bubble to parent function bubble(fn, item, args) { var p = item.parent; while (p) { if (fn(p, args, 0) === false) { break; } p = p.parent; } } function nodeclick(e) { var path = $(this).attr("tpath"); var et = e.target || e.srcElement; var item = getItem(path); if (et.tagName == "IMG") { //+ if collapsed, expend it if ($(et).hasClass("bbit-tree-elbow-plus") || $(et).hasClass("bbit-tree-elbow-end-plus")) { var ul = $(this).next(); //"bbit-tree-node-ct" if (ul.hasClass("bbit-tree-node-ct")) { ul.show(); } else { var deep = path.split(".").length; if (item.complete) { item.ChildNodes != null && asnybuild(item.ChildNodes, deep, path, ul, item); } else { $(this).addClass("bbit-tree-node-loading"); asnyloadc(item, true, function(data) { data = data.jsonArray; item.complete = true; item.ChildNodes = data; asnybuild(data, deep, path, ul, item); }); } } if ($(et).hasClass("bbit-tree-elbow-plus")) { $(et).swapClass("bbit-tree-elbow-plus", "bbit-tree-elbow-minus"); } else { $(et).swapClass("bbit-tree-elbow-end-plus", "bbit-tree-elbow-end-minus"); } $(this).swapClass("bbit-tree-node-collapsed", "bbit-tree-node-expanded"); } //if expended, collapse it else if ($(et).hasClass("bbit-tree-elbow-minus") || $(et).hasClass("bbit-tree-elbow-end-minus")) { $(this).next().hide(); if ($(et).hasClass("bbit-tree-elbow-minus")) { $(et).swapClass("bbit-tree-elbow-minus", "bbit-tree-elbow-plus"); } else { $(et).swapClass("bbit-tree-elbow-end-minus", "bbit-tree-elbow-end-plus"); } $(this).swapClass("bbit-tree-node-expanded", "bbit-tree-node-collapsed"); } else if ($(et).hasClass("bbit-tree-node-cb")) // click on checkbox { var s = item.checkstate != 1 ? 1 : 0; var r = true; if (dfop.oncheckboxclick) { r = dfop.oncheckboxclick.call(et, item, s); } if (r != false) { if (dfop.cascadecheck) { cascade(check, item, s); bubble(check, item, s); } else { check(item, s, 1); } } } } else { if (dfop.citem) { var nid = dfop.citem.id.replace(/[^\w]/gi, "_"); $("#" + id + "_" + nid).removeClass("bbit-tree-selected"); } dfop.citem = item; $(this).addClass("bbit-tree-selected"); if (dfop.onnodeclick) { if (!item.expand) { item.expand = function() { expandnode.call(item); }; } dfop.onnodeclick.call(this, item); } } } function expandnode() { var item = this; var nid = item.id.replace(/[^\w]/gi, "_"); var img = $("#" + id + "_" + nid + " img.bbit-tree-ec-icon"); if (img.length > 0) { img.click(); } } function asnybuild(nodes, deep, path, ul, pnode) { var l = nodes.length; if (l > 0) { var ht = []; for (var i = 0; i < l; i++) { nodes[i].parent = pnode; buildnode(nodes[i], ht, deep, path + "." + i, i == l - 1); } ul.html(ht.join("")); ht = null; InitEvent(ul); } ul.addClass("bbit-tree-node-ct").css({ "z-index": 0, position: "static", visibility: "visible", top: "auto", left: "auto", display: "" }); ul.prev().removeClass("bbit-tree-node-loading"); } function asnyloadc(pnode, isAsync, callback) { if (dfop.url) { if (pnode && pnode != null) var param = builparam(pnode); $.ajax({ type: dfop.method, url: dfop.url, data: param, async: isAsync, dataType: dfop.datatype, success: callback, error: function(e) { alert("error occur!"); } }); } } function builparam(node) { var p = {"id": node.id, "text": node.text, "value": JSON.stringify(node.value), "checkstate": node.checkstate}; return p; } function bindevent() { $(this).hover(function() { $(this).addClass("bbit-tree-node-over"); }, function() { $(this).removeClass("bbit-tree-node-over"); }).click(nodeclick) .find("img.bbit-tree-ec-icon").each(function(e) { if (!$(this).hasClass("bbit-tree-elbow")) { $(this).hover(function() { $(this).parent().addClass("bbit-tree-ec-over"); }, function() { $(this).parent().removeClass("bbit-tree-ec-over"); }); } }); } function InitEvent(parent) { var nodes = $("li.bbit-tree-node>div", parent); nodes.each(bindevent); } function reflash(itemId) { var nid = itemId.replace(/[^\w-]/gi, "_"); var node = $("#" + id + "_" + nid); if (node.length > 0) { node.addClass("bbit-tree-node-loading"); var isend = node.hasClass("bbit-tree-elbow-end") || node.hasClass("bbit-tree-elbow-end-plus") || node.hasClass("bbit-tree-elbow-end-minus"); var path = node.attr("tpath"); var deep = path.split(".").length; var item = getItem(path); if (item) { asnyloadc(item, true, function(data) { data = data.jsonArray; item.complete = true; item.ChildNodes = data; item.isexpand = true; if (data && data.length > 0) { item.hasChildren = true; } else { item.hasChildren = false; } var ht = []; buildnode(item, ht, deep - 1, path, isend); ht.shift(); ht.pop(); var li = node.parent(); li.html(ht.join("")); ht = null; InitEvent(li); bindevent.call(li.find(">div")); }); } } else { //node not created yet } } function getck(items, c, fn) { for (var i = 0, l = items.length; i < l; i++) { (items[i].showcheck == true && items[i].checkstate == 1) && c.push(fn(items[i])); if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) { getck(items[i].ChildNodes, c, fn); } } } function getCkAndHalfCk(items, c, fn) { for (var i = 0, l = items.length; i < l; i++) { (items[i].showcheck == true && (items[i].checkstate == 1 || items[i].checkstate == 2)) && c.push(fn(items[i])); if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) { getCkAndHalfCk(items[i].ChildNodes, c, fn); } } } me[0].t = { getSelectedNodes: function(gethalfchecknode) { var s = []; if (gethalfchecknode) { getCkAndHalfCk(treenodes, s, function(item) { return item; }); } else { getck(treenodes, s, function(item) { return item; }); } return s; }, getSelectedValues: function() { var s = []; getck(treenodes, s, function(item) { return item.value; }); return s; }, getCurrentItem: function() { return dfop.citem; }, reflash: function(itemOrItemId) { var id; if (typeof (itemOrItemId) == "string") { id = itemOrItemId; } else { id = itemOrItemId.id; } reflash(id); } }; return me; }; //get all checked nodes, and put them into array. no hierarchy $.fn.getCheckedNodes = function() { if (this[0].t) { return this[0].t.getSelectedValues(); } return null; }; $.fn.getTSNs = function(gethalfchecknode) { if (this[0].t) { return this[0].t.getSelectedNodes(gethalfchecknode); } return null; }; $.fn.getCurrentNode = function() { if (this[0].t) { return this[0].t.getCurrentItem(); } return null; }; $.fn.reflash = function(ItemOrItemId) { if (this[0].t) { return this[0].t.reflash(ItemOrItemId); } }; })(jQuery);