打造基于jQuery的高性能TreeView(asp.net)

2020-05-19 07:40:58易采站长站整理

$(this).parent().addClass(“bbit-tree-ec-over”);
}, function() {
$(this).parent().removeClass(“bbit-tree-ec-over”);
});
}
});
});
}

这里最主要的还是node的click事件,因为他要处理的事情很多,如树的展开收缩(如果子节点不存在,但是hasChildren为真,同时complete属性不为真则需要异步加载子节点,如子节点存在,但是没有Render那么就要Render),点击checkbox要出发级联的事件和oncheckbox事件,点击其他则触发配置条件的nodeonclick事件,这一切都通过前面event的源元素的class来区分点击的对象

function nodeclick(e) {
var path = $(this).attr(“tpath”);//获取节点路径
var et = e.target || e.srcElement;//获取事件源
var item = getItem(path);//根据path获取节点的数据
//debugger;
if (et.tagName == “IMG”) {
// +号需要展开,处理加减号
if ($(et).hasClass(“bbit-tree-elbow-plus”) || $(et).hasClass(“bbit-tree-elbow-end-plus”)) {
var ul = $(this).next(); //”bbit-tree-node-ct”
if (ul.hasClass(“bbit-tree-node-ct”)) {
ul.show();
}
else {
var deep = path.split(“.”).length;
if (item.complete) {
item.ChildNodes != null && asnybuild(item.ChildNodes, deep, path, ul, item);
}
else {
$(this).addClass(“bbit-tree-node-loading”);
asnyloadc(ul, item, function(data) {
item.complete = true;
item.ChildNodes = data;
asnybuild(data, deep, path, ul, item);
});
}
}
if ($(et).hasClass(“bbit-tree-elbow-plus”)) {
$(et).swapClass(“bbit-tree-elbow-plus”, “bbit-tree-elbow-minus”);
}
else {
$(et).swapClass(“bbit-tree-elbow-end-plus”, “bbit-tree-elbow-end-minus”);
}
$(this).swapClass(“bbit-tree-node-collapsed”, “bbit-tree-node-expanded”);
}
else if ($(et).hasClass(“bbit-tree-elbow-minus”) || $(et).hasClass(“bbit-tree-elbow-end-minus”)) { //- 号需要收缩
$(this).next().hide();
if ($(et).hasClass(“bbit-tree-elbow-minus”)) {
$(et).swapClass(“bbit-tree-elbow-minus”, “bbit-tree-elbow-plus”);
}
else {
$(et).swapClass(“bbit-tree-elbow-end-minus”, “bbit-tree-elbow-end-plus”);
}
$(this).swapClass(“bbit-tree-node-expanded”, “bbit-tree-node-collapsed”);
}
else if ($(et).hasClass(“bbit-tree-node-cb”)) // 点击了Checkbox
{
var s = item.checkstate != 1 ? 1 : 0;
var r = true;
if (dfop.oncheckboxclick) { //触发配置的函数
r = dfop.oncheckboxclick.call(et, item, s);
}
if (r != false) {//如果返回值不为false,即checkbxo变化有效
if (dfop.cascadecheck) {//允许触发级联
//遍历
cascade(check, item, s);//则向下关联
//上溯