前言
使用$.fn.tree.defaults重写默认值对象。下载该插件翻译源码
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
源码
/** * jQuery EasyUI 1.3.2 * *翻译：qq 1364386878 */ (function ($) { //渲染样式 function wrapTree(jq) { var tree = $(jq); tree.addClass("tree"); return tree; }; // 获取树数据 function _getTreeData(jq) { var data = []; collectTreeData(data, $(jq)); //递归获取节点 function collectTreeData(nodes, ul) { ul.children("li").each(function () { var li = $(this); var node = $.extend({}, $.parser.parseOptions(this, ["id", "iconCls", "state"]), { checked: (li.attr("checked") ? true : undefined) }); node.text = li.children("span").html(); if (!node.text) { node.text = li.html(); } var uls = li.children("ul"); if (uls.length) { node.children = []; collectTreeData(node.children, uls);//递归本事 } nodes.push(node); }); }; return data; }; //事件绑定 function bindEvent(jq) { var options = $.data(jq, "tree").options; $(jq).unbind().bind("mouseover", function (e) { //鼠标移上事件 var tt = $(e.target); var nodes = tt.closest("div.tree-node"); if (!nodes.length) { return; } nodes.addClass("tree-node-hover"); if (tt.hasClass("tree-hit")) { if (tt.hasClass("tree-expanded")) { tt.addClass("tree-expanded-hover"); } else { tt.addClass("tree-collapsed-hover"); } } e.stopPropagation(); }).bind("mouseout", function (e) {//鼠标离开事件 var tt = $(e.target); var nodes = tt.closest("div.tree-node"); if (!nodes.length) { return; } nodes.removeClass("tree-node-hover"); if (tt.hasClass("tree-hit")) { if (tt.hasClass("tree-expanded")) { tt.removeClass("tree-expanded-hover"); } else { tt.removeClass("tree-collapsed-hover"); } } e.stopPropagation(); }).bind("click", function (e) {//单击节点事件 var tt = $(e.target); var nodes = tt.closest("div.tree-node"); if (!nodes.length) { return; } if (tt.hasClass("tree-hit")) { _toggle(jq, nodes[0]); return false; } else { if (tt.hasClass("tree-checkbox")) { _check(jq, nodes[0], !tt.hasClass("tree-checkbox1")); return false; } else { select(jq, nodes[0]); options.onClick.call(jq, _getNode(jq, nodes[0])); } } e.stopPropagation(); }).bind("dblclick", function (e) {//双击结点事件 var nodes = $(e.target).closest("div.tree-node"); if (!nodes.length) { return; } select(jq, nodes[0]); options.onDblClick.call(jq, _getNode(jq, nodes[0])); e.stopPropagation(); }).bind("contextmenu", function (e) {//右键菜单 var nodes = $(e.target).closest("div.tree-node"); if (!nodes.length) { return; } options.onContextMenu.call(jq, e, _getNode(jq, nodes[0])); e.stopPropagation(); }); }; //禁用拖放功能 function _disableDnd(jq) { var node = $(jq).find("div.tree-node"); node.draggable("disable"); node.css("cursor", "pointer"); }; //启用拖放功能 function _enableDnd(jq) { var Tree = $.data(jq, "tree"); var options = Tree.options; var tree = Tree.tree; Tree.disabledNodes = []; //拖动功能 设置 tree.find("div.tree-node").draggable({ disabled: false, revert: true, cursor: "pointer", proxy: function (_1d) { var p = $("<div class=\"tree-node-proxy\"></div>").appendTo("body"); p.html("<span class=\"tree-dnd-icon tree-dnd-no\"> </span>" + $(_1d).find(".tree-title").html()); p.hide(); return p; }, deltaX: 15, deltaY: 15, onBeforeDrag: function (e) { if (options.onBeforeDrag.call(jq, _getNode(jq, this)) == false) { return false; } if ($(e.target).hasClass("tree-hit") || $(e.target).hasClass("tree-checkbox")) { return false; } if (e.which != 1) { return false; } $(this).next("ul").find("div.tree-node").droppable({ accept: "no-accept" }); var indent = $(this).find("span.tree-indent"); if (indent.length) { e.data.offsetWidth -= indent.length * indent.width(); } }, onStartDrag: function () { $(this).draggable("proxy").css({ left: -10000, top: -10000 }); options.onStartDrag.call(jq, _getNode(jq, this)); var node = _getNode(jq, this); if (node.id == undefined) { node.id = "easyui_tree_node_id_temp"; _update(jq, node); } Tree.draggingNodeId = node.id; }, onDrag: function (e) { var x1 = e.pageX, y1 = e.pageY, x2 = e.data.startX, y2 = e.data.startY; var d = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); if (d > 3) { $(this).draggable("proxy").show(); } this.pageY = e.pageY; }, onStopDrag: function () { $(this).next("ul").find("div.tree-node").droppable({ accept: "div.tree-node" }); for (var i = 0; i < Tree.disabledNodes.length; i++) { $(Tree.disabledNodes[i]).droppable("enable"); } Tree.disabledNodes = []; var _20 = _find(jq, Tree.draggingNodeId); if (_20.id == "easyui_tree_node_id_temp") { _20.id = ""; _update(jq, _20); } options.onStopDrag.call(jq, _20); } }).droppable({//拉伸插件设置 accept: "div.tree-node", onDragEnter: function (e, source) { if (options.onDragEnter.call(jq, this, _getNode(jq, source)) == false) { setdndClass(source, false); $(this).removeClass("tree-node-append tree-node-top tree-node-bottom"); $(this).droppable("disable"); Tree.disabledNodes.push(this); } }, onDragOver: function (e, source) { if ($(this).droppable("options").disabled) { return; } var pageY = source.pageY; var top = $(this).offset().top; var height = top + $(this).outerHeight(); setdndClass(source, true); $(this).removeClass("tree-node-append tree-node-top tree-node-bottom"); if (pageY > top + (height - top) / 2) { if (height - pageY < 5) { $(this).addClass("tree-node-bottom"); } else { $(this).addClass("tree-node-append"); } } else { if (pageY - top < 5) { $(this).addClass("tree-node-top"); } else { $(this).addClass("tree-node-append"); } } if (options.onDragOver.call(jq, this, _getNode(jq, source)) == false) { setdndClass(source, false); $(this).removeClass("tree-node-append tree-node-top tree-node-bottom"); $(this).droppable("disable"); Tree.disabledNodes.push(this); } }, onDragLeave: function (e, source) { setdndClass(source, false); $(this).removeClass("tree-node-append tree-node-top tree-node-bottom"); options.onDragLeave.call(jq, this, _getNode(jq, source)); }, onDrop: function (e, source) { var target = this; var action, point; if ($(this).hasClass("tree-node-append")) { action = moveNode; } else { action = insertNode; point = $(this).hasClass("tree-node-top") ? "top" : "bottom"; } action(source, target, point); $(this).removeClass("tree-node-append tree-node-top tree-node-bottom"); } }); //设置拖动样式 function setdndClass(source, dnd) { var dndicon = $(source).draggable("proxy").find("span.tree-dnd-icon"); dndicon.removeClass("tree-dnd-yes tree-dnd-no").addClass(dnd ? "tree-dnd-yes" : "tree-dnd-no"); }; function moveNode(nodeEl, parent) { if (_getNode(jq, parent).state == "closed") { expand(jq, parent, function () { doMoveNode(); }); } else { doMoveNode(); } function doMoveNode() { var nodeData = $(jq).tree("pop", nodeEl); $(jq).tree("append", { parent: parent, data: [nodeData] }); options.onDrop.call(jq, parent, nodeData, "append"); }; }; function insertNode(nodeEl, parent, point) { var param = {}; if (point == "top") { param.before = parent; } else { param.after = parent; } var nodeData = $(jq).tree("pop", nodeEl); param.data = nodeData; $(jq).tree("insert", param); options.onDrop.call(jq, parent, nodeData, point); }; }; //将节点设置为勾选或不勾选 function _check(jq, target, isCheck) { var options = $.data(jq, "tree").options; if (!options.checkbox) { return; } var node2 = _getNode(jq, target); if (options.onBeforeCheck.call(jq, node2, isCheck) == false) { return; } var node = $(target); var ck = node.find(".tree-checkbox"); ck.removeClass("tree-checkbox0 tree-checkbox1 tree-checkbox2");//清空样式 if (isCheck) { ck.addClass("tree-checkbox1");//勾选样式 } else { ck.addClass("tree-checkbox0");//不勾选样式 } //设置级联选中 if (options.cascadeCheck) { setParentsChecked(node); setChildrenChecked(node); } options.onCheck.call(jq, node2, isCheck); //勾选子结点 function setChildrenChecked(node) { var ck = node.next().find(".tree-checkbox"); ck.removeClass("tree-checkbox0 tree-checkbox1 tree-checkbox2"); if (node.find(".tree-checkbox").hasClass("tree-checkbox1")) { ck.addClass("tree-checkbox1");//勾选样式（非级联） } else { ck.addClass("tree-checkbox0");//不勾选样式 } }; //级联勾选父结点 function setParentsChecked(node) { var parentNode = _getParent(jq, node[0]); if (parentNode) { var ck = $(parentNode.target).find(".tree-checkbox"); ck.removeClass("tree-checkbox0 tree-checkbox1 tree-checkbox2"); if (isAllSelected(node)) { ck.addClass("tree-checkbox1"); } else { if (isAllNull(node)) { ck.addClass("tree-checkbox0"); } else { ck.addClass("tree-checkbox2"); } } setParentsChecked($(parentNode.target)); } //是否全选（非级联勾选） function isAllSelected(node) { var ck = node.find(".tree-checkbox"); //判断当前勾选框的样式状态 if (ck.hasClass("tree-checkbox0") || ck.hasClass("tree-checkbox2")) { return false; } var b = true; node.parent().siblings().each(function () { if (!$(this).children("div.tree-node").children(".tree-checkbox").hasClass("tree-checkbox1")) { b = false; } }); return b; }; //是否全未勾选 function isAllNull(node) { var ck = node.find(".tree-checkbox"); if (ck.hasClass("tree-checkbox1") || ck.hasClass("tree-checkbox2")) { return false; } var b = true; node.parent().siblings().each(function () { if (!$(this).children("div.tree-node").children(".tree-checkbox").hasClass("tree-checkbox0")) { b = false; } }); return b; }; }; }; // 设置勾选框的值 function setCheckBoxValue(jq, target) { var options = $.data(jq, "tree").options; var node = $(target); if (_isLeaf(jq, target)) {//叶子结点 var ck = node.find(".tree-checkbox"); if (ck.length) { if (ck.hasClass("tree-checkbox1")) { _check(jq, target, true); } else { _check(jq, target, false); } } else { if (options.onlyLeafCheck) {////只显示叶子节点前的复选框 $("<span class=\"tree-checkbox tree-checkbox0\"></span>").insertBefore(node.find(".tree-title")); } } } else {////非叶子结点 var ck = node.find(".tree-checkbox"); if (options.onlyLeafCheck) { ck.remove(); } else { if (ck.hasClass("tree-checkbox1")) { _check(jq, target, true); } else { if (ck.hasClass("tree-checkbox2")) { var checked = true; var unchecked = true; var children = _getChildren(jq, target); for (var i = 0; i < children.length; i++) { if (children[i].checked) { unchecked = false; } else { checked = false; } } if (checked) { _check(jq, target, true); } if (unchecked) { _check(jq, target, false); } } } } } }; //加载树数据 function _loadData(jq, ul, data, isAppend) { var options = $.data(jq, "tree").options; data = options.loadFilter.call(jq, data, $(ul).prev("div.tree-node")[0]); if (!isAppend) { $(ul).empty(); } var checkedNodes = []; var depth = $(ul).prev("div.tree-node").find("span.tree-indent, span.tree-hit").length; appendNodes(ul, data, depth); if (options.dnd) { _enableDnd(jq); } else { _disableDnd(jq); } for (var i = 0; i < checkedNodes.length; i++) { _check(jq, checkedNodes[i], true); } setTimeout(function () { _61(jq, jq); }, 0); var node = null; if (jq != ul) { var _5b = $(ul).prev(); node = _getNode(jq, _5b[0]); } options.onLoadSuccess.call(jq, node, data); function appendNodes(ul, children, depth) { for (var i = 0; i < children.length; i++) { var li = $("<li></li>").appendTo(ul); var item = children[i]; if (item.state != "open" && item.state != "closed") { item.state = "open"; } var node = $("<div class=\"tree-node\"></div>").appendTo(li); node.attr("node-id", item.id); $.data(node[0], "tree-node", { id: item.id, text: item.text, iconCls: item.iconCls, attributes: item.attributes }); $("<span class=\"tree-title\"></span>").html(item.text).appendTo(node); if (options.checkbox) { if (options.onlyLeafCheck) { if (item.state == "open" && (!item.children || !item.children.length)) { if (item.checked) { $("<span class=\"tree-checkbox tree-checkbox1\"></span>").prependTo(node); } else { $("<span class=\"tree-checkbox tree-checkbox0\"></span>").prependTo(node); } } } else { if (item.checked) { $("<span class=\"tree-checkbox tree-checkbox1\"></span>").prependTo(node); checkedNodes.push(node[0]); } else { $("<span class=\"tree-checkbox tree-checkbox0\"></span>").prependTo(node); } } } if (item.children && item.children.length) { var subul = $("<ul></ul>").appendTo(li); if (item.state == "open") { $("<span class=\"tree-icon tree-folder tree-folder-open\"></span>").addClass(item.iconCls).prependTo(node); $("<span class=\"tree-hit tree-expanded\"></span>").prependTo(node); } else { $("<span class=\"tree-icon tree-folder\"></span>").addClass(item.iconCls).prependTo(node); $("<span class=\"tree-hit tree-collapsed\"></span>").prependTo(node); subul.css("display", "none"); } appendNodes(subul, item.children, depth + 1); } else { if (item.state == "closed") { $("<span class=\"tree-icon tree-folder\"></span>").addClass(item.iconCls).prependTo(node); $("<span class=\"tree-hit tree-collapsed\"></span>").prependTo(node); } else { $("<span class=\"tree-icon tree-file\"></span>").addClass(item.iconCls).prependTo(node); $("<span class=\"tree-indent\"></span>").prependTo(node); } } for (var j = 0; j < depth; j++) { $("<span class=\"tree-indent\"></span>").prependTo(node); } } }; }; function _61(jq, ul, _63) { var options = $.data(jq, "tree").options; if (!options.lines) { return; } if (!_63) { _63 = true; $(jq).find("span.tree-indent").removeClass("tree-line tree-join tree-joinbottom"); $(jq).find("div.tree-node").removeClass("tree-node-last tree-root-first tree-root-one"); var _65 = $(jq).tree("getRoots"); if (_65.length > 1) { $(_65[0].target).addClass("tree-root-first"); } else { if (_65.length == 1) { $(_65[0].target).addClass("tree-root-one"); } } } $(ul).children("li").each(function () { var _66 = $(this).children("div.tree-node"); var ul = _66.next("ul"); if (ul.length) { if ($(this).next().length) { _67(_66); } _61(jq, ul, _63); } else { _68(_66); } }); var _69 = $(ul).children("li:last").children("div.tree-node").addClass("tree-node-last"); _69.children("span.tree-join").removeClass("tree-join").addClass("tree-joinbottom"); function _68(_6a, _6b) { var _6c = _6a.find("span.tree-icon"); _6c.prev("span.tree-indent").addClass("tree-join"); }; function _67(_6d) { var _6e = _6d.find("span.tree-indent, span.tree-hit").length; _6d.next().find("div.tree-node").each(function () { $(this).children("span:eq(" + (_6e - 1) + ")").addClass("tree-line"); }); }; }; function request(_70, ul, _71, _72) { var _73 = $.data(_70, "tree").options; _71 = _71 || {}; var _74 = null; if (_70 != ul) { var _75 = $(ul).prev(); _74 = _getNode(_70, _75[0]); } if (_73.onBeforeLoad.call(_70, _74, _71) == false) { return; } var _76 = $(ul).prev().children("span.tree-folder"); _76.addClass("tree-loading"); var _77 = _73.loader.call(_70, _71, function (_78) { _76.removeClass("tree-loading"); _loadData(_70, ul, _78); if (_72) { _72(); } }, function () { _76.removeClass("tree-loading"); _73.onLoadError.apply(_70, arguments); if (_72) { _72(); } }); if (_77 == false) { _76.removeClass("tree-loading"); } }; function expand(_7a, _7b, _7c) { var _7d = $.data(_7a, "tree").options; var hit = $(_7b).children("span.tree-hit"); if (hit.length == 0) { return; } if (hit.hasClass("tree-expanded")) { return; } var _7e = _getNode(_7a, _7b); if (_7d.onBeforeExpand.call(_7a, _7e) == false) { return; } hit.removeClass("tree-collapsed tree-collapsed-hover").addClass("tree-expanded"); hit.next().addClass("tree-folder-open"); var ul = $(_7b).next(); if (ul.length) { if (_7d.animate) { ul.slideDown("normal", function () { _7d.onExpand.call(_7a, _7e); if (_7c) { _7c(); } }); } else { ul.css("display", "block"); _7d.onExpand.call(_7a, _7e); if (_7c) { _7c(); } } } else { var _7f = $("<ul style=\"display:none\"></ul>").insertAfter(_7b); request(_7a, _7f[0], { id: _7e.id }, function () { if (_7f.is(":empty")) { _7f.remove(); } if (_7d.animate) { _7f.slideDown("normal", function () { _7d.onExpand.call(_7a, _7e); if (_7c) { _7c(); } }); } else { _7f.css("display", "block"); _7d.onExpand.call(_7a, _7e); if (_7c) { _7c(); } } }); } }; function _collapse(_81, _82) { var _83 = $.data(_81, "tree").options; var hit = $(_82).children("span.tree-hit"); if (hit.length == 0) { return; } if (hit.hasClass("tree-collapsed")) { return; } var _84 = _getNode(_81, _82); if (_83.onBeforeCollapse.call(_81, _84) == false) { return; } hit.removeClass("tree-expanded tree-expanded-hover").addClass("tree-collapsed"); hit.next().removeClass("tree-folder-open"); var ul = $(_82).next(); if (_83.animate) { ul.slideUp("normal", function () { _83.onCollapse.call(_81, _84); }); } else { ul.css("display", "none"); _83.onCollapse.call(_81, _84); } }; function _toggle(_86, _87) { var hit = $(_87).children("span.tree-hit"); if (hit.length == 0) { return; } if (hit.hasClass("tree-expanded")) { _collapse(_86, _87); } else { expand(_86, _87); } }; function _expandAll(_89, _8a) { var _8b = _getChildren(_89, _8a); if (_8a) { _8b.unshift(_getNode(_89, _8a)); } for (var i = 0; i < _8b.length; i++) { expand(_89, _8b[i].target); } }; function _expandTo(_8d, _8e) { var _8f = []; var p = _getParent(_8d, _8e); while (p) { _8f.unshift(p); p = _getParent(_8d, p.target); } for (var i = 0; i < _8f.length; i++) { expand(_8d, _8f[i].target); } }; function _collapseAll(_92, _93) { var _94 = _getChildren(_92, _93); if (_93) { _94.unshift(_getNode(_92, _93)); } for (var i = 0; i < _94.length; i++) { _collapse(_92, _94[i].target); } }; // 获取根结点 function _getRoot(jq) { var rootNodes = _getRoots(jq); if (rootNodes.length) { return rootNodes[0]; } else { return null; } }; // 获取所有根结点 function _getRoots(jq) { var roots = []; $(jq).children("li").each(function () { var nodes = $(this).children("div.tree-node"); roots.push(_getNode(jq, nodes[0])); }); return roots; }; //获取所有子结点 function _getChildren(jq, target) { var ndoes = []; if (target) { findChildren($(target)); } else { var rootNodes = _getRoots(jq); for (var i = 0; i < rootNodes.length; i++) { ndoes.push(rootNodes[i]); findChildren($(rootNodes[i].target)); } } function findChildren(target) { target.next().find("div.tree-node").each(function () { ndoes.push(_getNode(jq, this)); }); }; return ndoes; }; //获取父结点 function _getParent(jq, target) { var ul = $(target).parent().parent(); if (ul[0] == jq) { return null; } else { return _getNode(jq, ul.prev()[0]); } }; //获取所有被勾选的结点 function _getChecked(jq, state) { state = state || "checked"; var stateClass = ""; if (state == "checked") { stateClass = "span.tree-checkbox1"; } else { if (state == "unchecked") { stateClass = "span.tree-checkbox0"; } else { if (state == "indeterminate") { stateClass = "span.tree-checkbox2"; } } } var node = []; $(jq).find(stateClass).each(function () { var _a9 = $(this).parent(); node.push(_getNode(jq, _a9[0])); }); return node; }; //获取被选中的结点 function _getSelected(jq) { var nodes = $(jq).find("div.tree-node-selected"); if (nodes.length) { return _getNode(jq, nodes[0]); } else { return null; } }; //追加若干子节点到一个父节点 function _append(jq, param) { var parent = $(param.parent); var ul; if (parent.length == 0) { ul = $(jq); } else { ul = parent.next(); if (ul.length == 0) { ul = $("<ul></ul>").insertAfter(parent); } } if (param.data && param.data.length) { var icon = parent.find("span.tree-icon"); if (icon.hasClass("tree-file")) { icon.removeClass("tree-file").addClass("tree-folder tree-folder-open"); var hit = $("<span class=\"tree-hit tree-expanded\"></span>").insertBefore(icon); if (hit.prev().length) { hit.prev().remove(); } } } _loadData(jq, ul[0], param.data, true); setCheckBoxValue(jq, ul.prev()); }; //在一个指定节点之前或之后插入节点 function _insert(jq, target) { var ref = target.before || target.after; var parentNode = _getParent(jq, ref); var li; if (parentNode) { _append(jq, { parent: parentNode.target, data: [target.data] }); li = $(parentNode.target).next().children("li:last"); } else { _append(jq, { parent: null, data: [target.data] }); li = $(jq).children("li:last"); } if (target.before) { li.insertBefore($(ref).parent()); } else { li.insertAfter($(ref).parent()); } }; //删除一个节点和它的子节点 function _remove(jq, target) { var parentNode = _getParent(jq, target); var node = $(target); var li = node.parent(); var ul = li.parent(); li.remove(); if (ul.children("li").length == 0) { var node = ul.prev(); node.find(".tree-icon").removeClass("tree-folder").addClass("tree-file"); node.find(".tree-hit").remove(); $("<span class=\"tree-indent\"></span>").prependTo(node); if (ul[0] != jq) { ul.remove(); } } if (parentNode) { setCheckBoxValue(jq, parentNode.target); } _61(jq, jq); }; //递归获取某结点数据（包括子结点） function _getData(jq, target) { // 获取下一结点的子结点 function getChildrenOfNextNode(node, ul) { ul.children("li").each(function () { var nodes = $(this).children("div.tree-node"); var node = _getNode(jq, nodes[0]); var sub = $(this).children("ul"); if (sub.length) { node.children = []; getChildrenOfNextNode(node.children, sub); } node.push(node); }); }; if (target) { var node = _getNode(jq, target); node.children = []; getChildrenOfNextNode(node.children, $(target).next()); return node; } else { return null; } }; //更新指定的节点 function _update(jq, param) { var target = $(param.target); var node = _getNode(jq, param.target); if (node.iconCls) { target.find(".tree-icon").removeClass(node.iconCls); } var options = $.extend({}, node, param); $.data(param.target, "tree-node", options); target.attr("node-id", options.id); target.find(".tree-title").html(options.text); if (options.iconCls) { target.find(".tree-icon").addClass(options.iconCls); } if (node.checked != options.checked) { _check(jq, param.target, options.checked); } }; //获取结点 function _getNode(jq, target) { var node = $.extend({}, $.data(target, "tree-node"), { target: target, checked: $(target).find(".tree-checkbox").hasClass("tree-checkbox1") }); if (!_isLeaf(jq, target)) { node.state = $(target).find(".tree-hit").hasClass("tree-expanded") ? "open" : "closed"; } return node; }; //根据ID查找结点 function _find(jq, id) { // var nodes = $(jq).find("div.tree-node[node-id=" + id + "]"); if (nodes.length) { return _getNode(jq, nodes[0]); } else { return null; } }; // 选择结点 function select(jq, target) { var options = $.data(jq, "tree").options; var node = _getNode(jq, target); if (options.onBeforeSelect.call(jq, node) == false) { return; } $("div.tree-node-selected", jq).removeClass("tree-node-selected"); $(target).addClass("tree-node-selected"); options.onSelect.call(jq, node); }; //是否叶子结点 function _isLeaf(jq, target) { var node = $(target); var hit = node.children("span.tree-hit"); return hit.length == 0; }; //开始编辑结点 function _beginEdit(jq, target) { var options = $.data(jq, "tree").options; var node = _getNode(jq, target); if (options.onBeforeEdit.call(jq, node) == false) { return; } $(target).css("position", "relative"); var nt = $(target).find(".tree-title"); var outerWidth = nt.outerWidth(); nt.empty(); var editor = $("<input class=\"tree-editor\">").appendTo(nt);//编辑器 editor.val(node.text).focus(); editor.width(outerWidth + 20); editor.height(document.compatMode == "CSS1Compat" ? (18 - (editor.outerHeight() - editor.height())) : 18); //设置编辑器事件 editor.bind("click", function (e) { return false; }).bind("mousedown", function (e) { e.stopPropagation(); }).bind("mousemove", function (e) { e.stopPropagation(); }).bind("keydown", function (e) { if (e.keyCode == 13) { _endEdit(jq, target); return false; } else { if (e.keyCode == 27) { _cancelEdit(jq, target); return false; } } }).bind("blur", function (e) { e.stopPropagation(); _endEdit(jq, target); }); }; //结束编辑 function _endEdit(jq, target) { var options = $.data(jq, "tree").options; $(target).css("position", ""); var editor = $(target).find("input.tree-editor"); var val = editor.val(); editor.remove(); var node = _getNode(jq, target); node.text = val; _update(jq, node); options.onAfterEdit.call(jq, node); }; // 取消编辑 function _cancelEdit(jq, target) { var options = $.data(jq, "tree").options; $(target).css("position", ""); $(target).find("input.tree-editor").remove(); var node = _getNode(jq, target); _update(jq, node); options.onCancelEdit.call(jq, node); }; //实例化树 $.fn.tree = function (options, param) { if (typeof options == "string") { return $.fn.tree.methods[options](this, param); } var options = options || {}; return this.each(function () { var data = $.data(this, "tree"); var options; if (data) { options = $.extend(data.options, options); data.options = options; } else { options = $.extend({}, $.fn.tree.defaults, $.fn.tree.parseOptions(this), options); $.data(this, "tree", { options: options, tree: wrapTree(this) }); var jsonData = _getTreeData(this); if (jsonData.length && !options.data) { options.data = jsonData; } } bindEvent(this); if (options.lines) { $(this).addClass("tree-lines"); } if (options.data) { _loadData(this, this, options.data); } else { if (options.dnd) { _enableDnd(this); } else { _disableDnd(this); } } request(this, this); }); }; //树 方法 $.fn.tree.methods = { //返回树控件属性 options: function (jq) { return $.data(jq[0], "tree").options; }, //读取树控件数据 loadData: function (jq, data) { return jq.each(function () { _loadData(this, this, data); }); }, //获取指定节点对象 getNode: function (jq, target) { return _getNode(jq[0], target); }, //获取指定节点数据，包含它的子节点 getData: function (jq, target) { return _getData(jq[0], target); }, //重新载入树控件数据 reload: function (jq, target) { return jq.each(function () { if (target) { var node = $(target); var hit = node.children("span.tree-hit");//获取结点前的展开/折叠对象 hit.removeClass("tree-expanded tree-expanded-hover").addClass("tree-collapsed"); node.next().remove();//删除子结点 expand(this, target);//调用展开方法，重新加载树 } else { $(this).empty(); request(this, this); } }); }, //获取根节点，返回节点对象 getRoot: function (jq) { return _getRoot(jq[0]); }, //获取所有根节点，返回节点数组 getRoots: function (jq) { return _getRoots(jq[0]); }, //获取父节点，'target'参数代表节点的DOM对象 getParent: function (jq, target) { return _getParent(jq[0], target); }, //获取所有子节点，'target'参数代表节点的DOM对象 getChildren: function (jq, target) { return _getChildren(jq[0], target); }, //获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点 getChecked: function (jq, state) { return _getChecked(jq[0], state); }, //获取选择节点并返回它，如果未选择则返回null getSelected: function (jq) { return _getSelected(jq[0]); }, //判断指定的节点是否是叶子节点，target参数是一个节点DOM对象 isLeaf: function (jq, target) { return _isLeaf(jq[0], target); }, //查找指定节点并返回节点对象 find: function (jq, id) { return _find(jq[0], id); }, //选择一个节点，'target'参数表示节点的DOM对象 select: function (jq, target) { return jq.each(function () { select(this, target); }); }, //选中指定节点 check: function (jq, target) { return jq.each(function () { _check(this, target, true); }); }, //取消选中指定节点 uncheck: function (jq, target) { return jq.each(function () { _check(this, target, false); }); }, //折叠一个节点，'target'参数表示节点的DOM对象 collapse: function (jq, target) { return jq.each(function () { _collapse(this, target); }); }, //展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器 请求子节点的数据。 expand: function (jq, target) { return jq.each(function () { expand(this, target); }); }, //折叠所有节点 collapseAll: function (jq, target) { return jq.each(function () { _collapseAll(this, target); }); }, //展开所有节点 expandAll: function (jq, target) { return jq.each(function () { _expandAll(this, target); }); }, //打开从根节点到指定节点之间的所有节点 expandTo: function (jq, target) { return jq.each(function () { _expandTo(this, target); }); }, //打开或关闭节点的触发器，target参数是一个节点DOM对象 toggle: function (jq, target) { return jq.each(function () { _toggle(this, target); }); }, //追加若干子节点到一个父节点，param参数有2个属性 append: function (jq, param) { return jq.each(function () { _append(this, param); }); }, //在一个指定节点之前或之后插入节点，'param'参数包含如下属性： //before：DOM对象，在某个节点之前插入。 //after：DOM对象，在某个节点之后插入。 //data：对象，节点数据 insert: function (jq, param) { return jq.each(function () { _insert(this, param); }); }, //移除一个节点和它的子节点，'target'参数是该节点的DOM对象 remove: function (jq, target) { return jq.each(function () { _remove(this, target); }); }, //移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据 pop: function (jq, target) { var node = jq.tree("getData", target); jq.tree("remove", target); return node; }, //更新指定节点。'param'参数包含以下属性： //target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等 update: function (jq, target) { return jq.each(function () { _update(this, target); }); }, //启用拖拽功能 enableDnd: function (jq) { return jq.each(function () { _enableDnd(this); }); }, //禁用拖拽功能 disableDnd: function (jq) { return jq.each(function () { _disableDnd(this); }); }, //开始编辑一个节点 beginEdit: function (jq, target) { return jq.each(function () { _beginEdit(this, target); }); }, //结束编辑一个节点 endEdit: function (jq, target) { return jq.each(function () { _endEdit(this, target); }); }, //取消编辑一个节点 cancelEdit: function (jq, target) { return jq.each(function () { _cancelEdit(this, target); }); } }; //解析器 $.fn.tree.parseOptions = function (target) { var t = $(target); return $.extend({}, $.parser.parseOptions(target, ["url", "method", { checkbox: "boolean", cascadeCheck: "boolean", onlyLeafCheck: "boolean" }, { animate: "boolean", lines: "boolean", dnd: "boolean" }])); }; //树-默认属性+事件 $.fn.tree.defaults = { url: null,//检索远程数据的URL地址 method: "post",//检索数据的HTTP方法。（POST / GET） animate: false,//定义节点在展开或折叠的时候是否显示动画效果 checkbox: false,//定义是否在每一个借点之前都显示复选框 cascadeCheck: true,//定义是否层叠选中状态 onlyLeafCheck: false,//定义是否只在末级节点之前显示复选框 lines: false,//定义是否显示树控件上的虚线 dnd: false,//定义是否启用拖拽功能 data: null,//节点数据加载 //定义如何从远程服务器加载数据。返回false可以忽略本操作 loader: function (param, _success, _error) { var opts = $(this).tree("options"); if (!opts.url) { return false; } $.ajax({ type: opts.method, url: opts.url, data: param, dataType: "json", success: function (data) { _success(data); }, error: function () { _error.apply(this, arguments); } }); }, //返回过滤过的数据进行展示。返回数据是标准树格式 loadFilter: function (data, parent) { return data; }, //事件-- //在请求加载远程数据之前触发，返回false可以取消加载操作 onBeforeLoad: function (node, param) { }, //在数据加载成功以后触发 onLoadSuccess: function (node, data) { }, //在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同 onLoadError: function () { }, //在用户点击一个节点的时候触发 onClick: function (node) { }, //在用户双击一个节点的时候触发 onDblClick: function (node) { }, //在节点展开之前触发，返回false可以取消展开操作 onBeforeExpand: function (node) { }, //在节点展开的时候触发 onExpand: function (node) { }, //在节点折叠之前触发，返回false可以取消折叠操作 onBeforeCollapse: function (node) { }, //在节点折叠的时候触发 onCollapse: function (node) { }, //在用户点击勾选复选框之前触发，返回false可以取消选择动作 onBeforeCheck: function (node, checked) { }, //在用户点击勾选复选框的时候触发 onCheck: function (node, checked) { }, //在用户选择一个节点之前触发，返回false可以取消选择动作 onBeforeSelect: function (node) { }, //在用户选择节点的时候触发 onSelect: function (node) { }, //在右键点击节点的时候触发 onContextMenu: function (e, node) { }, //在开始拖动节点之前触发，返回false可以拒绝拖动 onBeforeDrag: function (node) { }, //在开始拖动节点的时候触发 onStartDrag: function (node) { }, //在停止拖动节点的时候触发 onStopDrag: function (node) { }, //在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动 onDragEnter: function (target, source) { }, //在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动 onDragOver: function (target, source) { }, //在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动 onDragLeave: function (target, source) { }, //当节点位置被拖动时触发 onDrop: function (target, source, point) { }, //在编辑节点之前触发 onBeforeEdit: function (node) { }, //在编辑节点之后触发 onAfterEdit: function (node) { }, //在取消编辑操作的时候触发 onCancelEdit: function (node) { } }; })(jQuery);
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tree - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script> <script src="../../plugins2/jquery.parser.js"></script> <script src="../../plugins2/jquery.draggable.js"></script> <script src="../../plugins2/jquery.droppable.js"></script> <script src="../../plugins2/jquery.tree.js"></script> </head> <body> <h2>Basic Tree</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click the arrow on the left to expand or collapse nodes.</div> </div> <div style="margin:10px 0;"></div> <ul class="easyui-tree"> <li> <span>My Documents</span> <ul> <li data-options="state:'closed'"> <span>Photos</span> <ul> <li> <span>Friend</span> </li> <li> <span>Wife</span> </li> <li> <span>Company</span> </li> </ul> </li> <li> <span>Program Files</span> <ul> <li>Intel</li> <li>Java</li> <li>Microsoft Office</li> <li>Games</li> </ul> </li> <li>index.html</li> <li>about.html</li> <li>welcome.html</li> </ul> </li> </ul> </body> </html>
插件效果
