前言
扩展自$.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>