jQuery树形控件zTree使用小结
0 zTree简介
树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
0.0 zTree的特点
•最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js
•采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
•兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
•支持 JSON 数据
•支持静态 和 Ajax 异步加载节点数据
•支持任意更换皮肤 / 自定义图标(依靠css)
•支持极其灵活的 checkBox 或 radio 选择功能
•提供多种事件响应回调
•灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽
•在一个页面内可同时生成多个 Tree 实例
•简单的参数配置实现,灵活多变的功能
0.1 zTree文件介绍
从zTree官网下载的zTree包括以下组成部分
•metroStyle文件夹:zTree的metro风格样式相关文件(图片及css样式表)。
•zTreeStyle文件夹:zTree的标准风格样式文件夹(图片及css样式表)
•js文件:zTree.all.js是完整的js库,可单纯加载此文件实现所有zTree功能,ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割,分别对应基本功能、复选功能、编辑功能、显隐功能。
1 zTree的基本使用
1.0 zTree的创建
在页面中添加对zTree的js及css引用,由于zTree基于JQuery,JQuery的引用是必须的。
rush:xhtml;">
ZTREE DEMO
<
Meta http-equiv="content-type" content="text/html; charset=UTF-8">
运行结果如下
1.1 zTree的配置
zTree的配置采用Json格式,按照配置的类型分为view(可视界面相关配置)、data(数据相关配置)、check(复选框相关配置)、callback(各类事件的回调函数配置)、async(zTree异步加载配置),一下是我们经常会使用到的一些配置及说明,其他详细配置可以参考zTree官方api文档的详细介绍。
<div class="jb51code">
<pre class="brush:js;">
var setting = {
view: {
selectedMulti: true,//设置是否能够同时选中多个节点
showIcon: true,//设置是否显示节点图标
showLine: true,//设置是否显示节点与节点之间的连线
showTitle: true,//设置是否显示节点的title提示信息
},data: {
simpleData: {
enable: false,//设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式)
idKey: "id",//设置启用简单数据格式时id对应的属性名称
pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
}
},check:{
enable: true //设置是否显示checkBox复选框
},callback: {
onClick: onClick,//定义节点单击事件回调函数
onRightClick: OnRightClick,//定义节点右键单击事件回调函数
beforeRename: beforeRename,//定义节点重新编辑成功前回调函数,一般用于节点编辑时判断输入的节点名称是否合法
onDblClick: onDblClick,//定义节点双击事件回调函数
onCheck: onCheck //定义节点复选框选中或取消选中事件的回调函数
},async: {
enable: true,//设置启用异步加载
type: "get",//异步加载类型:post和get
contentType: "application/json",//定义ajax提交参数的参数类型,一般为json格式
url: "/Design/Get",//定义数据请求路径
autoparam: ["id=id","name=name"] //定义提交时参数的名称,=号前面标识节点属性,后面标识提交时json数据中参数的名称
}
};
需要注意的是,zTree的事件回调部分,基本上每一个事件都对应一个beforeXXX事件,比如onClick事件对应有一个beforeOnClick事件,主要用于控制相关事件是否允许执行,如果before事件返回false,则取消执行对应相关事件。
1.2 zTree的数据格式
zTree的每一个节点都是一个treeNode对象,treeNode对象经常用到的属性和方法如下:
B-->C
}
zTree的数据源一般有标准数据格式、简单数据格式两种,标准数据格式通过指定节点的chidren属性构建层级关系,而简单数据格式根据根据id,pid属性构建层级关系,我们在应用开发中使用关系型数据库,一般采用的都是简单数据格式。
标准数据格式
rush:js;">
var nodes = [
{name: "父节点1",children: [
{name: "子节点1"},{name: "子节点2"}
]}
];
简单数据格式
rush:js;">
var nodes = [
{id:1,pId:0,name: "父节点1"},{id:11,pId:1,name: "子节点1"},{id:12,name: "子节点2"}
];
注意zTree的默认配置是不启用简单数据格式,使用简单数据格式一定要在setting中进行简单数据格式的相关配置。
1.3 zTree的常用方法
zTree的主要操作方法介绍如下
获取zTree对象:增加节点:
parentNode:指定的父节点,如果增加根节点,请设置 parentNode 为 null 即可
index:新节点插入的位置(从 0 开始),index = -1 时,插入到最后,此参数可忽略
newNodes:需要增加的节点数据 JSON 对象集合,数据只需要满足 zTree 的节点数据必需的属性即可
isSilent:true 时,添加节点后不展开父节点,其他值或缺省状态都自动展开
勾选或取消勾选全部节点:函数,为false不执行
编辑节点
edit(node); 使节点处于编辑状态,必须引用jquery.ztree.exedit 扩展。
展开或折叠全部节点:属性查找结点:aram(key,value,parentNode);
key:属性名
value:属性值
parentNode:是否在指定节点下查找,为null表示整个树查找。
获取被勾选或未被勾选的节点集合:ednodes(checked);
checked为true表示获取所有被勾选的节点集合,为false表示所有未被勾选的节点集合
获取输入框勾选状态被改变的节点集合:ednodes()
2 zTree的常用操作
rush:js;">
$(function () {
var setting = { //此处根据自己需要进行配置
view: {
selectedMulti: false
},data: {
simpleData: {
enable: true
}
},callback: {
onClick: onDesignTreeClick,onRightClick: OnRightClick,beforeRename: beforeRename,onCheck:onCheck
}
};
$.ajax({
type: "Get",url: "/Design/GetDesignTreeData",//ajax请求地址
success: function (data) {
$.fn.zTree.init($("#treeZo"),data); //加载数据
},});
});
后台代码如下,可以根据需要返回你想要的任何数据,绑定到zTree上,然后通过treeNode.属性名取到对应的值,实现一些界面逻辑操作。
rush:csharp;">
public ActionResult GetDesignTreeData()
{
var result = _designAppService.GetDesignTreeData();
List
treeModels = new List();
bool open = false;
foreach (var design in result.Designs)
{
if (design.ParentId == Guid.Empty)
open = true;
else open = false;
treeModels.Add(new ModelTreeviewmodel() { Id = design.Id.ToString(),PId = design.ParentId.ToString(),Name = design.Name,Open = open,Data = design.Remarks ?? "",ViewPoint = design.ViewPoint ?? "",Checked = true });
}
return Json(treeModels,JsonRequestBehavior.AllowGet);
}
节点单击事件会捕获事件对象e,zTree的唯一标识treeId,当前选中的节点对象treeNode三个参数。根据实际需求可获取treeNode中包含的任何属性数据,进行相关操作
rush:js;">
function onClick(e,treeId,treeNode) {
if (treeNode.isParent) //如果不是叶子结点,结束
return;
alert(treeNode.name); //
获取当前结点上的相关
属性数据,执行相关逻辑
};
2.2 节点复选框事件
一般情况下我们会直接使用treeObj.getCheckednodes(true);获取所有选中的节点,然后遍历所有选中的节点进行相关操作,当面对大数据量时,这种操作方法便不可取,可通过getChangeCheckednodes()方法获取勾选状态被改变的节点集合,值针对状态改变的节点做相应处理。
rush:js;">
function onCheck() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //
获取树对象
var nodes = treeObj.getChangeCheck
ednodes(); //
获取勾选状态改变的节点
var designIds = [];
var status = 0; //定义初始勾选状态为未勾选
if (nodes[0].checked)
status = 1; //如果状态改变节点为勾选状态,说明当前操作是从未勾选变为已勾选。
$.each(nodes,function (i,item) {
designIds.push(item.id); //将状态改变的节点id
输出到数组
item.checkedOld = item.checked; //这句话很关键,将节点的初始状态置为当前状态。否则每次勾选操作
获取状态改变节点时只会跟树初始化的状态相比较。
})
$.ajax({
type: "Post",url: "/Design/GetRelationComponentIdsByDesigns",data: { "designIds": designIds },success: function (data) {
RealBimOcx.BatchAddSubClrInfoBegin();
$.each(data.result,item) {
if (status == 1) //这里根据发生改变的节点是勾选还是为勾选进行相关逻辑操作。
RealBimOcx.AddSubClrInfo(item,255,0);
else
RealBimOcx.AddSubClrInfo(item,0);
if (i % 100 == 0) {
RealBimOcx.BatchAddSubClrInfoEnd();
RealBimOcx.BatchAddSubClrInfoBegin();
}
})
RealBimOcx.BatchAddSubClrInfoEnd();
}
})
};
2.3 实现zTree的右键增删改操作
首先定义右键弹出面板
rush:xhtml;">
实现zTree右键单击事件回调函数
<div class="jb51code">
<pre class="brush:js;">
//右键单击回调函数
function OnRightClick(event,treeNode) {
$("#treeZo").hide();
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root",event.clientX,event.clientY); //根据鼠标位置显示右键操作面板
} else if (treeNode && !treeNode.noR) {
zTree.selectNode(treeNode);
showRMenu("node",event.clientY);
}
$("#treeZo").show();
}
//根据节点类型,控制右键操作菜单哪些可用哪些不可用
function showRMenu(type,x,y) {
$("#rMenu ul").show();
if (type == "root") {
$("#m_del").hide();
$("#m_edit").hide();
$("#m_left").hide();
$("#m_right").hide();
$("#m_up").hide();
$("#m_down").hide();
$("#m_add").addClass('mboder');
} else {
$("#m_del").show();
$("#m_edit").show();
$("#m_left").show();
$("#m_right").show();
$("#m_up").show();
$("#m_down").show();
$("#m_add").removeClass('mboder');
}
rMenu.css({ "top": y + "px","left": x + "px","visibility": "visible" });
$("body").bind("mousedown",onBodyMouseDown);
}
//以藏右键面板
function hideRMenu() {
if (rMenu) rMenu.css({ "visibility": "hidden" });
$("body").unbind("mousedown",onBodyMouseDown);
}
//单击页面其他位置 隐藏右键面板
function onBodyMouseDown(event) {
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
rMenu.css({ "visibility": "hidden" });
}
}
rush:js;">
//
增加节点
function addTreeNode() {
hideRMenu();
var name = new Date().getTime(); //利用时间戳
生成节点
名称,保证节点
名称唯一
var newNode = {
name: name
};
if (zTree.getSelect
ednodes()[0]) {
newNode.checked = zTree.getSelect
ednodes()[0].checked;
newNode.pid = zTree.getSelect
ednodes()[0].id;
zTree.addNodes(zTree.getSelect
ednodes()[0],newNode);
} else {
zTree.addNodes(null,newNode);
}
var node = zTree.getNodeByP
aram("name",name,null); //得到新
增加的节点
zTree.selectNode(node); //选中新
增加的节点
zTree.editName(node); //让新
增加的节点处于编辑状态
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。