easyui源码翻译1.32--TreeGrid（树形表格）
前言
扩展自$.fn.datagrid.defaults。使用$.fn.treegrid.defaults重写默认值对象。下载该插件翻译源码
树形表格用于显示分层数据表格。它是基于数据表格、组合树控件和可编辑表格。树形表格允许用户创建可定制的、异步展开行和显示在多列上的分层数据。
源码
/** * jQuery EasyUI 1.3.2 * *翻译：qq 1364386878 下拉树 */ (function ($) { //获取行索引 function getObjectIndex(rows,row) { for (var i = 0, _2 = rows.length; i < _2; i++) { if (rows[i] ==row) { return i; } } return -1; }; //传递数据 function transferData(rows,row) { var index = getObjectIndex(rows,row); if (index != -1) { rows.splice(index, 1); } }; //初始化函数 function initGrid(jq) { var options = $.data(jq, "treegrid").options; //初始化表格 具体参考datagrid属性、事件 $(jq).datagrid($.extend({}, options, { url: null, data: null, loader: function () { return false; }, onLoadSuccess: function () { }, onResizeColumn: function (field, width) { _setRowHeight(jq); options.onResizeColumn.call(jq, field, width); }, onSortColumn: function (sortName, sortName) { options.sortName = sortName; options.sortOrder = sortName; if (options.remoteSort) { request(jq); } else { var data = $(jq).treegrid("getData"); _loadData(jq, 0, data); } options.onSortColumn.call(jq, sortName, sortName); }, onBeforeEdit: function (rowIndex, rowData) { if (options.onBeforeEdit.call(jq, rowData) == false) { return false; } }, onAfterEdit: function (rowIndex, row, newValues) { options.onAfterEdit.call(jq, row, newValues); }, onCancelEdit: function (rowIndex, row) { options.onCancelEdit.call(jq, row); }, onSelect: function (parm) { options.onSelect.call(jq, find(jq, parm)); }, onUnselect: function (parm) { options.onUnselect.call(jq, find(jq, parm)); }, onSelectAll: function () { options.onSelectAll.call(jq, $.data(jq, "treegrid").data); }, onUnselectAll: function () { options.onUnselectAll.call(jq, $.data(jq, "treegrid").data); }, onCheck: function (parm) { options.onCheck.call(jq, find(jq, parm)); }, onUncheck: function (parm) { options.onUncheck.call(jq, find(jq, parm)); }, onCheckAll: function () { options.onCheckAll.call(jq, $.data(jq, "treegrid").data); }, onUncheckAll: function () { options.onUncheckAll.call(jq, $.data(jq, "treegrid").data); }, onClickRow: function (parm) { options.onClickRow.call(jq, find(jq, parm)); }, onDblClickRow: function (parm) { options.onDblClickRow.call(jq, find(jq, parm)); }, onClickCell: function (id, field) { options.onClickCell.call(jq, field, find(jq, id)); }, onDblClickCell: function (id, parm) { options.onDblClickCell.call(jq, parm, find(jq, id)); }, onRowContextMenu: function (e, id) { options.onContextMenu.call(jq, e, find(jq, id)); } })); if (options.pagination) { var getPager = $(jq).datagrid("getPager"); getPager.pagination({ pageNumber: options.pageNumber, pageSize: options.pageSize, pageList: options.pageList, onSelectPage: function (pageNumber, pageNumber) { options.pageNumber = pageNumber; options.pageSize = pageNumber; request(jq); } }); options.pageSize = getPager.pagination("options").pageSize; } }; //修正指定的行高 function _setRowHeight(jq, id) { var options = $.data(jq, "datagrid").options; var dc = $.data(jq, "datagrid").dc; if (!dc.body1.is(":empty") && (!options.nowrap || options.autoRowHeight)) { if (id != undefined) { var children = _getChildren(jq, id); for (var i = 0; i < children.length; i++) { setRowHeight(children[i][options.idField]); } } } $(jq).datagrid("fixRowHeight", id); function setRowHeight(_28) { var tr1 = options.finder.getTr(jq, _28, "body", 1); var tr2 = options.finder.getTr(jq, _28, "body", 2); tr1.css("height", ""); tr2.css("height", ""); var maxheight = Math.max(tr1.height(), tr2.height()); tr1.css("height", maxheight); tr2.css("height", maxheight); }; }; //设置行序号 function fixRowNumbers(jq) { var dc = $.data(jq, "datagrid").dc; var options = $.data(jq, "treegrid").options; if (!options.rownumbers) { return; } dc.body1.find("div.datagrid-cell-rownumber").each(function (i) { $(this).html(i + 1); }); }; //绑定事件 function bindEvents(jq) { var dc = $.data(jq, "datagrid").dc; var body = dc.body1.add(dc.body2); var handler = ($.data(body[0], "events") || $._data(body[0], "events")).click[0].handler; dc.body1.add(dc.body2).bind("mouseover", function (e) {//当鼠标移上时 var tt = $(e.target); var tr = tt.closest("tr.datagrid-row"); if (!tr.length) { return; } if (tt.hasClass("tree-hit")) { tt.hasClass("tree-expanded") ? tt.addClass("tree-expanded-hover") : tt.addClass("tree-collapsed-hover"); } e.stopPropagation(); }).bind("mouseout", function (e) {//dang鼠标离开时 var tt = $(e.target); var tr = tt.closest("tr.datagrid-row"); if (!tr.length) { return; } if (tt.hasClass("tree-hit")) { tt.hasClass("tree-expanded") ? tt.removeClass("tree-expanded-hover") : tt.removeClass("tree-collapsed-hover"); } e.stopPropagation(); }).unbind("click").bind("click", function (e) {//触发点击事件 var tt = $(e.target); var tr = tt.closest("tr.datagrid-row"); if (!tr.length) { return; } if (tt.hasClass("tree-hit")) { _toggle(jq, tr.attr("node-id")); } else { handler(e); } e.stopPropagation(); }); }; function initSubTree(jq, nodeId) { var options = $.data(jq, "treegrid").options; var tr1 = options.finder.getTr(jq, nodeId, "body", 1); var tr2 = options.finder.getTr(jq, nodeId, "body", 2); //getColumnFields返回列字段。如果设置了frozen属性为true，将返回固定列的字段名 var colspan1 = $(jq).datagrid("getColumnFields", true).length + (options.rownumbers ? 1 : 0); var colspan2 = $(jq).datagrid("getColumnFields", false).length; createSubTree(tr1, colspan1); createSubTree(tr2, colspan2); function createSubTree(tr, colspan) { $("<tr class=\"treegrid-tr-tree\">" + "<td style=\"border:0px\" colspan=\"" + colspan + "\">" + "<div></div>" + "</td>" + "</tr>").insertAfter(tr); }; }; //读取树形表格数据 function _loadData(jq, nodeId, param, param) { var options = $.data(jq, "treegrid").options; var dc = $.data(jq, "datagrid").dc; param = options.loadFilter.call(jq, param, nodeId); var row = find(jq, nodeId); if (row) { var tr1 = options.finder.getTr(jq, nodeId, "body", 1); var tr2 = options.finder.getTr(jq, nodeId, "body", 2); var cc1 = tr1.next("tr.treegrid-tr-tree").children("td").children("div"); var cc2 = tr2.next("tr.treegrid-tr-tree").children("td").children("div"); } else { var cc1 = dc.body1; var cc2 = dc.body2; } if (!param) { $.data(jq, "treegrid").data = []; cc1.empty(); cc2.empty(); } if (options.view.onBeforeRender) { options.view.onBeforeRender.call(options.view, jq, nodeId, param); } options.view.render.call(options.view, jq, cc1, true); options.view.render.call(options.view, jq, cc2, false); if (options.showFooter) { options.view.renderFooter.call(options.view, jq, dc.footer1, true); options.view.renderFooter.call(options.view, jq, dc.footer2, false); } if (options.view.onAfterRender) { options.view.onAfterRender.call(options.view, jq); } options.onLoadSuccess.call(jq, row, param); if (!nodeId && options.pagination) { var total = $.data(jq, "treegrid").total; var getPager = $(jq).datagrid("getPager"); if (getPager.pagination("options").total != total) { getPager.pagination({ total: total }); } } _setRowHeight(jq); fixRowNumbers(jq); $(jq).treegrid("autoSizeColumn"); }; function request(jq, parentId, param, isAppend, callBack) { var options = $.data(jq, "treegrid").options; var body = $(jq).datagrid("getPanel").find("div.datagrid-body"); if (param) { options.queryParams = param; } var queryParams = $.extend({}, options.queryParams); if (options.pagination) { $.extend(queryParams, { page: options.pageNumber, rows: options.pageSize }); } if (options.sortName) { $.extend(queryParams, { sort: options.sortName, order: options.sortOrder }); } var row = find(jq, parentId); if (options.onBeforeLoad.call(jq, row, queryParams) == false) { return; } var folder = body.find("tr[node-id=" + parentId + "] span.tree-folder"); folder.addClass("tree-loading"); $(jq).treegrid("loading"); var loaded = options.loader.call(jq, queryParams, function (parm) { folder.removeClass("tree-loading"); $(jq).treegrid("loaded"); _loadData(jq, parentId, parm, isAppend); if (callBack) { callBack(); } }, function () { folder.removeClass("tree-loading"); $(jq).treegrid("loaded"); options.onLoadError.apply(jq, arguments); if (callBack) { callBack(); } }); if (loaded == false) { folder.removeClass("tree-loading"); $(jq).treegrid("loaded"); } }; //获取根节点，返回节点对象 function _getRoot(target) { var roots = _getRoots(target); if (roots.length) { return roots[0]; } else { return null; } }; //获取所有根节点，返回节点对象 function _getRoots(target) { return $.data(target, "treegrid").data; }; //获取父节点。 function _getParent(jq, id) { var row = find(jq, id); if (row._parentId) { return find(jq, row._parentId); } else { return null; } }; //获取子节点 function _getChildren(jq, id) { var options = $.data(jq, "treegrid").options; var body = $(jq).datagrid("getPanel").find("div.datagrid-view2 div.datagrid-body"); var children = []; if (id) { findChildren(id); } else { var roots = _getRoots(jq); for (var i = 0; i < roots.length; i++) { children.push(roots[i]); findChildren(roots[i][options.idField]); } } function findChildren(id) { var node = find(jq, id); if (node && node.children) { for (var i = 0, len = node.children.length; i < len; i++) { var child = node.children[i]; children.push(child); findChildren(child[options.idField]); } } }; return children; }; //获取选择的节点并返回它，如果没有节点被选中则返回null function _getSelected(jq) { var target = _getSelections(jq); if (target.length) { return target[0]; } else { return null; } }; //获取所有选择的节点。 function _getSelections(jq) { var selectedRows = []; var panel = $(jq).datagrid("getPanel"); panel.find("div.datagrid-view2 div.datagrid-body tr.datagrid-row-selected").each(function () { var id = $(this).attr("node-id"); selectedRows.push(find(jq, id)); }); return selectedRows; }; //获取指定节点等级。 function _getLevel(jq, id) { if (!id) { return 0; } var options = $.data(jq, "treegrid").options; var gridView = $(jq).datagrid("getPanel").children("div.datagrid-view"); var treeNode = gridView.find("div.datagrid-body tr[node-id=" + id + "]").children("td[field=" + options.treeField + "]"); return treeNode.find("span.tree-indent,span.tree-hit").length; }; //查找指定节点并返回节点数据。 function find(jq, id) { var options = $.data(jq, "treegrid").options; var data = $.data(jq, "treegrid").data; var cc = [data]; while (cc.length) { var c = cc.shift(); for (var i = 0; i < c.length; i++) { var rowData = c[i]; if (rowData[options.idField] == id) { return rowData; } else { if (rowData["children"]) { cc.push(rowData["children"]); } } } } return null; }; //折叠一个节点。 function _collapse(jq, id) { var options = $.data(jq, "treegrid").options; var row = find(jq, id); var tr = options.finder.getTr(jq, id); var hit = tr.find("span.tree-hit"); if (hit.length == 0) { return; } if (hit.hasClass("tree-collapsed")) { return; } if (options.onBeforeCollapse.call(jq, row) == false) { return; } hit.removeClass("tree-expanded tree-expanded-hover").addClass("tree-collapsed"); hit.next().removeClass("tree-folder-open"); row.state = "closed"; tr = tr.next("tr.treegrid-tr-tree"); var cc = tr.children("td").children("div"); if (options.animate) { cc.slideUp("normal", function () { $(jq).treegrid("autoSizeColumn"); _setRowHeight(jq, id); options.onCollapse.call(jq, row); }); } else { cc.hide(); $(jq).treegrid("autoSizeColumn"); _setRowHeight(jq, id); options.onCollapse.call(jq, row); } }; //展开一个节点。 function expand(jq, id) { var options = $.data(jq, "treegrid").options; var tr = options.finder.getTr(jq, id); var hit = tr.find("span.tree-hit"); var row = find(jq, id); if (hit.length == 0) { return; } if (hit.hasClass("tree-expanded")) { return; } if (options.onBeforeExpand.call(jq, row) == false) { return; } hit.removeClass("tree-collapsed tree-collapsed-hover").addClass("tree-expanded"); hit.next().addClass("tree-folder-open"); var subtree = tr.next("tr.treegrid-tr-tree"); if (subtree.length) { var cc = subtree.children("td").children("div"); expandSubtree(cc); } else { initSubTree(jq, row[options.idField]); var subtree = tr.next("tr.treegrid-tr-tree"); var cc = subtree.children("td").children("div"); cc.hide(); request(jq, row[options.idField], { id: row[options.idField] }, true, function () { if (cc.is(":empty")) { subtree.remove(); } else { expandSubtree(cc); } }); } function expandSubtree(cc) { row.state = "open"; if (options.animate) { cc.slideDown("normal", function () { $(jq).treegrid("autoSizeColumn"); _setRowHeight(jq, id); options.onExpand.call(jq, row); }); } else { cc.show(); $(jq).treegrid("autoSizeColumn"); _setRowHeight(jq, id); options.onExpand.call(jq, row); } }; }; //节点展开/折叠状态触发器 function _toggle(jq, id) { var options = $.data(jq, "treegrid").options; var tr = options.finder.getTr(jq, id); var hit = tr.find("span.tree-hit"); if (hit.hasClass("tree-expanded")) { _collapse(jq, id); } else { expand(jq, id); } }; //折叠所有节点。 function _collapseAll(jq, id) { var options = $.data(jq, "treegrid").options; var children = _getChildren(jq, id); if (id) { children.unshift(find(jq, id)); } for (var i = 0; i < children.length; i++) { _collapse(jq, children[i][options.idField]); } }; //展开所有节点。 function _expandAll(jq, jq) { var options = $.data(jq, "treegrid").options; var children = _getChildren(jq, jq); if (jq) { children.unshift(find(jq, jq)); } for (var i = 0; i < children.length; i++) { expand(jq, children[i][options.idField]); } }; //打开从根节点到指定节点之间的所有节点。 function _expandTo(jq, id) { var options = $.data(jq, "treegrid").options; var ids = []; var p = _getParent(jq, id); while (p) { var id = p[options.idField]; ids.unshift(id); p = _getParent(jq, id); } for (var i = 0; i < ids.length; i++) { expand(jq, ids[i]); } }; //追加节点到一个父节点，'param'参数包含如下属性： //parent：父节点ID，如果未指定则追加到根节点。 //data：数组，节点数据。 function _append(jq, param) { var options = $.data(jq, "treegrid").options; if (param.parent) { var tr = options.finder.getTr(jq, param.parent); if (tr.next("tr.treegrid-tr-tree").length == 0) { initSubTree(jq, param.parent); } var cell = tr.children("td[field=" + options.treeField + "]").children("div.datagrid-cell"); var icon = cell.children("span.tree-icon"); if (icon.hasClass("tree-file")) { icon.removeClass("tree-file").addClass("tree-folder"); var hit = $("<span class=\"tree-hit tree-expanded\"></span>").insertBefore(icon); if (hit.prev().length) { hit.prev().remove(); } } } _loadData(jq, param.parent, param.data, true); }; //插入一个新节点到指定节点。'param'参数包含一下参数： //before：插入指定节点ID值之前。 //after：插入指定节点ID值之后。 //data：新节点数据。 function insert(jq, param) { var ref = param.before || param.after; var options = $.data(jq, "treegrid").options; var parentn = _getParent(jq, ref); _append(jq, { parent: (parentn ? parentn[options.idField] : null), data: [param.data] }); _insert(true); _insert(false); fixRowNumbers(jq); //插入数据 function _insert(before) { var step = before ? 1 : 2; var tr = options.finder.getTr(jq, param.data[options.idField], "body", step); var btable = tr.closest("table.datagrid-btable");//序号列 tr = tr.parent().children(); var tr = options.finder.getTr(jq, ref, "body", step); if (param.before) { tr.insertBefore(tr); } else { var sub = tr.next("tr.treegrid-tr-tree"); tr.insertAfter(sub.length ? sub : tr); } btable.remove(); }; }; //移除一个节点和他的所有子节点。 function _remove(jq, nodeId) { var options = $.data(jq, "treegrid").options; var tr = options.finder.getTr(jq, nodeId); tr.next("tr.treegrid-tr-tree").remove(); tr.remove(); var parent = del(nodeId); if (parent) { if (parent.children.length == 0) { tr = options.finder.getTr(jq, parent[options.idField]); tr.next("tr.treegrid-tr-tree").remove(); var cell = tr.children("td[field=" + options.treeField + "]").children("div.datagrid-cell"); cell.find(".tree-icon").removeClass("tree-folder").addClass("tree-file"); cell.find(".tree-hit").remove(); $("<span class=\"tree-indent\"></span>").prependTo(cell); } } fixRowNumbers(jq); function del(id) { var cc; var parent = _getParent(jq, nodeId); if (parent) { cc = parent.children; } else { cc = $(jq).treegrid("getData"); } for (var i = 0; i < cc.length; i++) { if (cc[i][options.idField] == id) { cc.splice(i, 1); break; } } return parent; }; }; //实例化组建 $.fn.treegrid = function (target, parm) { if (typeof target == "string") { var method = $.fn.treegrid.methods[target]; if (method) { return method(this, parm); } else { return this.datagrid(target, parm); } } target = target || {}; return this.each(function () { var treegrid = $.data(this, "treegrid"); if (treegrid) { $.extend(treegrid.options, target); } else { treegrid = $.data(this, "treegrid", { options: $.extend({}, $.fn.treegrid.defaults, $.fn.treegrid.parseOptions(this), target), data: [] }); } initGrid(this); if (treegrid.options.data) { $(this).treegrid("loadData", treegrid.options.data); } request(this); bindEvents(this); }); }; //默认方法 $.fn.treegrid.methods = { //返回树形表格的属性 options: function (jq) { return $.data(jq[0], "treegrid").options; }, //设置树形表格大小，options包含2个属性： //width：树形表格的新宽度。 //height：树形表格的新高度。 resize: function (jq, options) { return jq.each(function () { $(this).datagrid("resize", options); }); }, //修正指定的行高 fixRowHeight: function (jq, id) { return jq.each(function () { _setRowHeight(this, id); }); }, //读取树形表格数据 loadData: function (jq, data) { return jq.each(function () { _loadData(this, null, data); }); }, //重新加载树形表格数据。如果'id'属性有值，将重新载入指定树形行，否则重新载入所有行 reload: function (jq, id) { return jq.each(function () { if (id) { var record = $(this).treegrid("find", id); if (record.children) { record.children.splice(0, record.children.length); } var gridBody = $(this).datagrid("getPanel").find("div.datagrid-body"); var tr = gridBody.find("tr[node-id=" + id + "]"); tr.next("tr.treegrid-tr-tree").remove(); var hit = tr.find("span.tree-hit"); hit.removeClass("tree-expanded tree-expanded-hover").addClass("tree-collapsed"); expand(this, id); } else { request(this, null, {}); } }); }, //重新载入页脚数据 reloadFooter: function (jq, footer) { return jq.each(function () { var options = $.data(this, "treegrid").options; var dc = $.data(this, "datagrid").dc; if (footer) { $.data(this, "treegrid").footer = footer; } if (options.showFooter) { options.view.renderFooter.call(options.view, this, dc.footer1, true); options.view.renderFooter.call(options.view, this, dc.footer2, false); if (options.view.onAfterRender) { options.view.onAfterRender.call(options.view, this); } $(this).treegrid("fixRowHeight"); } }); }, //获取载入数据 getData: function (jq) { return $.data(jq[0], "treegrid").data; }, //获取页脚数据 getFooterRows: function (jq) { return $.data(jq[0], "treegrid").footer; }, //获取根节点，返回节点对象 getRoot: function (jq) { return _getRoot(jq[0]); }, //获取所有根节点，返回节点数组 getRoots: function (jq) { return _getRoots(jq[0]); }, //获取父节点。 getParent: function (jq, id) { return _getParent(jq[0], id); }, //获取子节点 getChildren: function (jq, id) { return _getChildren(jq[0], id); }, //获取选择的节点并返回它，如果没有节点被选中则返回null。 getSelected: function (jq) { return _getSelected(jq[0]); }, //获取所有选择的节点。 getSelections: function (jq) { return _getSelections(jq[0]); }, //获取指定节点等级 getLevel: function (jq, id) { return _getLevel(jq[0], id); }, //查找指定节点并返回节点数据 find: function (jq, id) { return find(jq[0], id); }, //判断是否是子节点 isLeaf: function (jq, id) { var options = $.data(jq[0], "treegrid").options; var tr = options.finder.getTr(jq[0], id); var hit = tr.find("span.tree-hit"); return hit.length == 0; }, //选择一个节点。 select: function (jq, id) { return jq.each(function () { $(this).datagrid("selectRow", id); }); }, //反选一个节点。 unselect: function (jq, id) { return jq.each(function () { $(this).datagrid("unselectRow", id); }); }, //折叠一个节点。 collapse: function (jq, id) { return jq.each(function () { _collapse(this, id); }); }, //展开一个节点。 expand: function (jq, id) { return jq.each(function () { expand(this, id); }); }, //节点展开/折叠状态触发器。 toggle: function (jq, id) { return jq.each(function () { _toggle(this, id); }); }, //折叠所有节点。 collapseAll: function (jq, id) { return jq.each(function () { _collapseAll(this, id); }); }, //展开所有节点。 expandAll: function (jq, id) { return jq.each(function () { _expandAll(this, id); }); }, //打开从根节点到指定节点之间的所有节点 expandTo: function (jq, id) { return jq.each(function () { _expandTo(this, id); }); }, //追加节点到一个父节点，'param'参数包含如下属性： //parent：父节点ID，如果未指定则追加到根节点。 //data：数组，节点数据。 append: function (jq, param) { return jq.each(function () { _append(this, param); }); }, //插入一个新节点到指定节点。'param'参数包含一下参数： //before：插入指定节点ID值之前。 //after：插入指定节点ID值之后。 //data：新节点数据 insert: function (jq, param) { return jq.each(function () { insert(this, param); }); }, //移除一个节点和他的所有子节点。 remove: function (jq, id) { return jq.each(function () { _remove(this, id); }); }, //弹出并返回节点数据以及它的子节点之后删除 pop: function (jq, id) { var row = jq.treegrid("find", id); jq.treegrid("remove", id); return row; }, //刷新指定节点 refresh: function (jq, id) { return jq.each(function () { var options = $.data(this, "treegrid").options; options.view.refreshRow.call(options.view, this, id); }); }, //options更新指定节点。'param'参数包含以下属性： //id：要更新的节点的ID。 //row：新的行数据 update: function (jq, param) { return jq.each(function () { var options = $.data(this, "treegrid").options; options.view.updateRow.call(options.view, this, param.id, param.row); }); }, //开始编辑一个节点 beginEdit: function (jq, id) { return jq.each(function () { $(this).datagrid("beginEdit", id); $(this).treegrid("fixRowHeight", id); }); }, //结束编辑一个节点 endEdit: function (jq, id) { return jq.each(function () { $(this).datagrid("endEdit", id); }); }, //取消编辑一个节点。 cancelEdit: function (jq, id) { return jq.each(function () { $(this).datagrid("cancelEdit", id); }); } }; //解析器配置 $.fn.treegrid.parseOptions = function (target) { return $.extend({}, $.fn.datagrid.parseOptions(target), $.parser.parseOptions(target, ["treeField", { animate: "boolean" }])); }; //定义数据表格的视图 该视图是一个对象，将告诉数据表格如何渲染行。该对象必须定义下列函 var _view = $.extend({}, $.fn.datagrid.defaults.view, { // 数据加载时调用。 //jq：DOM对象，数据表格对象。 //container：行容器。 //frozen：指明如何渲染冻结容器。 render: function (jq, container, frozen) { var options = $.data(jq, "treegrid").options; var fields = $(jq).datagrid("getColumnFields", frozen); var rowIdPrefix = $.data(jq, "datagrid").rowIdPrefix; if (frozen) { if (!(options.rownumbers || (options.frozenColumns && options.frozenColumns.length))) { return; } } var grid = this; var nodes = buildTreeNodes(frozen, this.treeLevel, this.treeNodes); $(container).append(nodes.join("")); //创建树节点 function buildTreeNodes(frozen, treeLevel, rows) { var html = ["<table class=\"datagrid-btable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>"]; for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (row.state != "open" && row.state != "closed") { row.state = "open"; } var style = options.rowStyler ? options.rowStyler.call(jq, row) : ""; var attr = style ? "style=\"" + style + "\"" : ""; var rowid = rowIdPrefix + "-" + (frozen ? 1 : 2) + "-" + row[options.idField]; html.push("<tr id=\"" + rowid + "\" class=\"datagrid-row\" node-id=" + row[options.idField] + " " + attr + ">"); html = html.concat(grid.renderRow.call(grid, jq, fields, frozen, treeLevel, row)); html.push("</tr>"); if (row.children && row.children.length) { var tt = buildTreeNodes(frozen, treeLevel + 1, row.children); var v = row.state == "closed" ? "none" : "block"; html.push("<tr class=\"treegrid-tr-tree\"><td style=\"border:0px\" colspan=" + (fields.length + (options.rownumbers ? 1 : 0)) + "><div style=\"display:" + v + "\">"); html = html.concat(tt); html.push("</div></td></tr>"); } } html.push("</tbody></table>"); return html; }; }, //渲染底部 renderFooter: function (jq, grid, frozen) { var options = $.data(jq, "treegrid").options; var footer = $.data(jq, "treegrid").footer || []; var fields = $(jq).datagrid("getColumnFields", frozen); var html = ["<table class=\"datagrid-ftable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>"]; for (var i = 0; i < footer.length; i++) { var row = footer[i]; row[options.idField] = row[options.idField] || ("foot-row-id" + i); html.push("<tr class=\"datagrid-row\" node-id=" + row[options.idField] + ">"); html.push(this.renderRow.call(this, jq, fields, frozen, 0, row)); html.push("</tr>"); } html.push("</tbody></table>"); $(grid).html(html.join("")); }, //渲染行 renderRow: function (jq, fields, frozen, deepth, row) { var opts = $.data(jq, "treegrid").options; var cc = []; if (frozen && opts.rownumbers) { cc.push("<td class=\"datagrid-td-rownumber\"><div class=\"datagrid-cell-rownumber\">0</div></td>"); } for (var i = 0; i < fields.length; i++) { var field = fields[i]; var col = $(jq).datagrid("getColumnOption", field); if (col) { var style = col.styler ? (col.styler(row[field], row) || "") : ""; var style2 = col.hidden ? "style=\"display:none;" + style + "\"" : (style ? "style=\"" + style + "\"" : ""); cc.push("<td field=\"" + field + "\" " + style2 + ">"); if (col.checkbox) { var style2 = ""; } else { var style2 = ""; if (col.align) { style2 += "text-align:" + col.align + ";"; } if (!opts.nowrap) { style2 += "white-space:normal;height:auto;"; } else { if (opts.autoRowHeight) { style2 += "height:auto;"; } } } cc.push("<div style=\"" + style2 + "\" "); if (col.checkbox) { cc.push("class=\"datagrid-cell-check "); } else { cc.push("class=\"datagrid-cell " + col.cellClass); } cc.push("\">"); if (col.checkbox) { if (row.checked) { cc.push("<input type=\"checkbox\" checked=\"checked\""); } else { cc.push("<input type=\"checkbox\""); } cc.push(" name=\"" + field + "\" value=\"" + (row[field] != undefined ? row[field] : "") + "\"/>"); } else { var val = null; if (col.formatter) { val = col.formatter(row[field], row); } else { val = row[field]; } if (field == opts.treeField) { for (var j = 0; j < deepth; j++) { cc.push("<span class=\"tree-indent\"></span>"); } if (row.state == "closed") { cc.push("<span class=\"tree-hit tree-collapsed\"></span>"); cc.push("<span class=\"tree-icon tree-folder " + (row.iconCls ? row.iconCls : "") + "\"></span>"); } else { if (row.children && row.children.length) { cc.push("<span class=\"tree-hit tree-expanded\"></span>"); cc.push("<span class=\"tree-icon tree-folder tree-folder-open " + (row.iconCls ? row.iconCls : "") + "\"></span>"); } else { cc.push("<span class=\"tree-indent\"></span>"); cc.push("<span class=\"tree-icon tree-file " + (row.iconCls ? row.iconCls : "") + "\"></span>"); } } cc.push("<span class=\"tree-title\">" + val + "</span>"); } else { cc.push(val); } } cc.push("</div>"); cc.push("</td>"); } } return cc.join(""); }, //刷新行 refreshRow: function (target, id) { this.updateRow.call(this, target, id, {}); }, //更新行 updateRow: function (jq, id, row) { var options = $.data(jq, "treegrid").options; var row2 = $(jq).treegrid("find", id); $.extend(row2, row); var Level = $(jq).treegrid("getLevel", id) - 1;//获取指定节点等级。 var style2 = options.rowStyler ? options.rowStyler.call(jq, row2) : ""; function setFieldsCheck(frozen) { //设置字段选中 var _e1 = $(jq).treegrid("getColumnFields", frozen); var tr = options.finder.getTr(jq, id, "body", (frozen ? 1 : 2)); var rownumber = tr.find("div.datagrid-cell-rownumber").html(); var checkb = tr.find("div.datagrid-cell-check input[type=checkbox]").is(":checked"); tr.html(this.renderRow(jq, _e1, frozen, Level, row2)); tr.attr("style", style2 || ""); tr.find("div.datagrid-cell-rownumber").html(rownumber); if (checkb) { tr.find("div.datagrid-cell-check input[type=checkbox]")._propAttr("checked", true);//设置选择 } }; setFieldsCheck.call(this, true); setFieldsCheck.call(this, false); $(jq).treegrid("fixRowHeight", id); }, //在视图被呈现之前触发 onBeforeRender: function (jq, nodeId, nodeId) { if (!nodeId) { return false; } var options = $.data(jq, "treegrid").options; if (nodeId.length == undefined) { if (nodeId.footer) { $.data(jq, "treegrid").footer = nodeId.footer; } if (nodeId.total) { $.data(jq, "treegrid").total = nodeId.total; } nodeId = this.transfer(jq, nodeId, nodeId.rows); } else { function setParent(param, nodeId) { for (var i = 0; i < param.length; i++) { var row = param[i]; row._parentId = nodeId; if (row.children && row.children.length) { setParent(row.children, row[options.idField]); } } }; setParent(nodeId, nodeId); } var node = find(jq, nodeId); if (node) { if (node.children) { node.children = node.children.concat(nodeId); } else { node.children = nodeId; } } else { $.data(jq, "treegrid").data = $.data(jq, "treegrid").data.concat(nodeId); } if (!options.remoteSort) { this.sort(jq, nodeId); } this.treeNodes = nodeId; this.treeLevel = $(jq).treegrid("getLevel", nodeId); }, //排序 sort: function (jq, param) { var options = $.data(jq, "treegrid").options; var opt = $(jq).treegrid("getColumnOption", options.sortName); if (opt) { var sorter = opt.sorter || function (rows, b) { return (rows > b ? 1 : -1); }; _sorter(param); } function _sorter(param) { param.sort(function (r1, r2) { return sorter(r1[options.sortName], r2[options.sortName]) * (options.sortOrder == "asc" ? 1 : -1); }); for (var i = 0; i < param.length; i++) { var children = param[i].children; if (children && children.length) { _sorter(children); } } }; }, transfer: function (jq, nodeId, data) { var options = $.data(jq, "treegrid").options; var rows = []; for (var i = 0; i < data.length; i++) { rows.push(data[i]); } var children = []; for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (!nodeId) { if (!row._parentId) { children.push(row); transferData(rows, row); i--; } } else { if (row._parentId == nodeId) { children.push(row); transferData(rows, row); i--; } } } var toDo = []; for (var i = 0; i < children.length; i++) { toDo.push(children[i]); } while (toDo.length) { var node = toDo.shift(); for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (row._parentId == node[options.idField]) { if (node.children) { node.children.push(row); } else { node.children = [row]; } toDo.push(row); transferData(rows, row); i--; } } } return children; } }); //默认属性和事件 继承datagrid $.fn.treegrid.defaults = $.extend({}, $.fn.datagrid.defaults, { treeField: null,//定义树节点字段。 animate: false,//定义在节点展开或折叠的时候是否显示动画效果 singleSelect: true,//单选 view: _view,//定义数据表格的视图 //定义以何种方式从远程服务器读取数据。返回false可以忽略该动作。该函数具有一下参数： //param：传递到远程服务器的参数对象。 //success(data)：当检索数据成功的时候调用的回调函数。 //error()：当检索数据失败的时候调用的回调函数。 loader: function (param, success, error) { var options = $(this).treegrid("options"); if (!options.url) { return false; } $.ajax({ type: options.method, url: options.url, data: param, dataType: "json", success: function (data) { success(data); }, error: function () { error.apply(this, arguments); } }); }, //返回过滤后的数据进行展示 loadFilter: function (data, parentId) { return data; }, finder: { getTr: function (jq, id, type, step) { type = type || "body"; step = step || 0; var dc = $.data(jq, "datagrid").dc; if (step == 0) { var opts = $.data(jq, "treegrid").options; var tr1 = opts.finder.getTr(jq, id, type, 1); var tr2 = opts.finder.getTr(jq, id, type, 2); return tr1.add(tr2); } else { if (type == "body") { var tr = $("#" + $.data(jq, "datagrid").rowIdPrefix + "-" + step + "-" + id); if (!tr.length) { tr = (step == 1 ? dc.body1 : dc.body2).find("tr[node-id=" + id + "]"); } return tr; } else { if (type == "footer") { return (step == 1 ? dc.footer1 : dc.footer2).find("tr[node-id=" + id + "]"); } else { if (type == "selected") { return (step == 1 ? dc.body1 : dc.body2).find("tr.datagrid-row-selected"); } else { if (type == "last") { return (step == 1 ? dc.body1 : dc.body2).find("tr:last[node-id]"); } else { if (type == "allbody") { return (step == 1 ? dc.body1 : dc.body2).find("tr[node-id]"); } else { if (type == "allfooter") { return (step == 1 ? dc.footer1 : dc.footer2).find("tr[node-id]"); } } } } } } } }, //获取行 getRow: function (target, p) { var id = (typeof p == "object") ? p.attr("node-id") : p; return $(target).treegrid("find", id); } }, //在载入请求数据数据之前触发，如果返回false可终止载入数据操作 onBeforeLoad: function (row, param) { }, //在数据加载成功的时候触发 onLoadSuccess: function (row, data) { }, //在数据加载成功的时候触发 onLoadError: function () { }, //在数据加载成功的时候触发 onBeforeCollapse: function (row) { }, //在节点被折叠的时候触发 onCollapse: function (row) { }, //在节点展开之前触发，返回false可以取消展开节点的动作 onBeforeExpand: function (row) { }, //在节点被展开的时候触发 onExpand: function (row) { }, //在用户点击节点的时候触发 onClickRow: function (row) { }, //在用户双击节点的时候触发 onDblClickRow: function (row) { }, //在用户点击一个单元格的时候触发 onClickCell: function (field, row) { }, //在用户双击一个单元格的时候触发 onDblClickCell: function (field, row) { }, //在右键点击节点的时候触发。 onContextMenu: function (e, row) { }, //在用户开始编辑节点的时候触发 onBeforeEdit: function (row) { }, //在用户完成编辑的时候触发 onAfterEdit: function (row, changes) { }, //在用户取消编辑节点的时候触发。 onCancelEdit: function (row) { } }); })(jQuery);
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic TreeGrid - 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.panel.js"></script> <script src="../../plugins2/jquery.resizable.js"></script> <script src="../../plugins2/jquery.linkbutton.js"></script> <script src="../../plugins2/jquery.pagination.js"></script> <script src="../../plugins2/jquery.datagrid.js"></script> <script src="../../plugins2/jquery.treegrid.js"></script> </head> <body> <h2>Basic TreeGrid</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>TreeGrid allows you to expand or collapse group rows.</div> </div> <div style="margin:10px 0;"></div> <table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px" data-options=" url: '../treegrid/treegrid_data1.json', rownumbers: true, idField: 'id', treeField: 'name' "> <thead> <tr> <th data-options="field:'name'" width="220">Name</th> <th data-options="field:'size'" width="100" align="right">Size</th> <th data-options="field:'date'" width="150">Modified Date</th> </tr> </thead> </table> </body> </html>
插件效果
