js插件ztree使用
最新给公司后台写了一个配置页面，在网上搜到一个js插件ztree，记录一下使用心得。
首先说一下ztree官网，好多方法我都是从官网api上学习的，官网地址http://www.treejs.cn/v3/main.php#_zTreeInfo
切入正题，我开始没有使用异步加载模式，但写时间发现编辑和添加后更新要使用的方法都是在异步加载模式的前提下，建议大家使用异步加载，方便后续操作。
首先是页面引用
<link href="zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="zTree/js/jquery.ztree.all.js" type="text/javascript"></script>
官方文档中用的jquery是1.4版本，我感觉有点低，用了稍微高点的版本。
js代码如下:
var setting = {
data: {
key: {
//将treeNode的ItemName属性当做节点名称
name: "appName"
},
simpleData: {
//是否使用简单数据模式
enable: true,
//当前节点id属性
idKey: "appId",
//当前节点的父节点id属性
pIdKey: "appFatherId",
//用于修正根节点父节点数据，即pIdKey指定的属性值
rootPId: ""
}
},
async: {
enable: true,//是否启动异步加载模式
url: "handler/DeployZTree.ashx",//一般处理程序得地址
autoParam: ["appId"],//post请求时参数名
otherParam: { "Type": "All" },//附加参数
// dataType: "json",//默认text
type: "post",//默认post
dataFilter: addProperty //异步返回后经过Filter,如果返回的数据不完整，并且修改后台sql语句比较麻烦，可以用这个方法在前台修改
},
view: {
//是否支持同时选中多个节点
selectedMulti: false
},
callback: {
//onAsyncSuccess: zTreeOnAsyncSuccess,
onMouseDown: onMouseDown //鼠标点击节点事件
}
};
ztree基础配置
function addProperty(treeId, parentNode, responseData) {
if (responseData.length > ) {
for (var i = ; i < responseData.length; i++) {
if (parseInt(responseData[i].num) > ) {
responseData[i]["isParent"] = true;
}
}
}
return responseData;
}
addProperty方法
$.post("handler/DeployZTree.ashx", { "Type": "All", "async": "false" }, function (data) {
var nodes = JSON.parse(data);
for (var j = ; j < nodes.length; j++) {
if (parseInt(nodes[j].num) > ) {
nodes[j]["isParent"] = true;
}
}
var treeObj = $.fn.zTree.init($("#tree"), setting, nodes);
//默认展开所有节点
treeObj.expandAll(false);
treeObj.expandNode(treeObj.getNodes()[], true, null, null);
});//加载Ztree
页面加载后第一次返回的数据
$('#Edit').click(function () {
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length < ) {
alert("请选择节点");
return;
} else {
$.ajax({
type: 'POST',
url: "handler/DeployZTree.ashx",
data: { "Type": "FatherNodes" },
success: function (data) {
for (var i = ; i < data.length; i++) {
if ($('#superiorNodeSelect').find("option[value='" + data[i].appId + "']").size() < ) {
$('<option value="' + data[i].appId + '">' + data[i].appName + '</option>').appendTo($('#superiorNodeSelect'));
}
}
var node = nodes[];
$('#NodeName').val(node.appName);
//$('#SuperiorNode').val(node.appFatherName);
$('#superiorNodeSelect').val(node.appFatherId);
$('#PageAddress').val(node.pagePath);
$('#NodeID').val(node.appId);
$('#FatherNodeID').val(node.appFatherId);
var systemid = node.systemType;
$('#systemSelect').val(systemid);
if (!$('#dvTxt').hasClass("hid")) {
$('#dvTxt').addClass("hid");
}
if ($('#dvSelect').hasClass("hid")) {
$('#dvSelect').removeClass("hid");
}
if ($('#ok').hasClass("hid")) {
$('#ok').removeClass("hid");
}
if ($('#nID').hasClass("hid")) {
$('#nID').removeClass("hid");
}
if ($('#fID').hasClass("hid")) {
$('#fID').removeClass("hid");
}
},
dataType: "json"
});
}
});//编辑
编辑按钮点击事件
$('#ok').click(function () {
if ($.trim($('#NodeName').val()) == "" || $('#NodeName').val() == "节点名称") {
alert("节点名称不能为空");
return;
}
if ($('#superiorNodeSelect option:selected').val() == "-1") {
alert("请选择上级节点");
return;
}
if ($('#systemSelect option:selected').val() == "") {
alert("请选择所属系统");
return;
}
if ($.trim($('#PageAddress').val()) == "" || $('#PageAddress').val() == "页面地址") {
alert("页面地址不能为空");
return;
}
if (!confirm("确定提交！")) {
return;
}
var name = $('#NodeName').val();//名称
var fatherNodeId = $('#superiorNodeSelect option:selected').val();//父节点ID
var systemId = $('#systemSelect option:selected').val();//所属系统
var pageAddress = $('#PageAddress').val();//页面地址
if ($('#NodeID').val() == "") {
$.ajax({
type: 'POST',
url: 'handler/DeployZTree.ashx',
data: {
"Type": "Add", "appName": name, "appFatherId": fatherNodeId, "systemType": systemId, "pagePath": pageAddress
},
success: function (data) {
if (data == "success") {
var treeObj = $.fn.zTree.getZTreeObj("tree");
if (!(treeObj.getNodeByParam("appId", fatherNodeId, null) == null)) {
if (treeObj.getNodeByParam("appId", fatherNodeId, null).isParent) {
treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", fatherNodeId, null), "refresh");
} else {
if (!(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null) == null)) {
treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null), "refresh");
}
}
}
alert("添加成功!");
} else {
alert("添加失败!");
}
pageInit();
}
});
}//添加
else {
$.ajax({
type: 'POST',
url: "handler/DeployZTree.ashx",
//appId, appName, appFatherId, systemType, pagePath
data: { "Type": "Edit", "appId": $('#NodeID').val(), "appName": name, "appFatherId": fatherNodeId, "systemType": systemId, "pagePath": pageAddress },
success: function (data) {
if (data == "success") {
var treeObj = $.fn.zTree.getZTreeObj("tree");
if (!(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null) == null)) {
treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", $('#FatherNodeID').val(), null), "refresh", false, refreshTwo(fatherNodeId));
}
//if (!(treeObj.getNodeByParam("appId", fatherNodeId, null) == null)) {
// treeObj.reAsyncChildNodes(treeObj.getNodeByParam("appId", fatherNodeId, null), "refresh");
//}
alert("修改成功!");
}
else {
alert("修改失败!");
}
pageInit();
}
});
}//修改
});//确定
确定按钮点击事件
treeObj.getNodeByParam() 官方文档中给的是如无结果，返回 [ ]，实际测试返回的是null，不知道是什么问题。
$('#Add').click(function () {
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length < ) {
alert("请选择节点");
return;
} else {
$.ajax({
type: 'POST',
url: "handler/DeployZTree.ashx",
data: { "Type": "FatherNodes" },
success: function (data) {
for (var i = ; i < data.length; i++) {
if ($('#superiorNodeSelect').find("option[value='" + data[i].appId + "']").size() < ) {
$('<option value="' + data[i].appId + '">' + data[i].appName + '</option>').appendTo($('#superiorNodeSelect'));
}
}
$('#NodeID').val("");
$('#dvTxt').addClass("hid");
$('#dvSelect').removeClass("hid");
var node = nodes[];
$('#NodeName').val("");
$('#PageAddress').val("");
$('#FatherNodeID').val(node.appFatherId);
$('#superiorNodeSelect').val(node.appId);
if ($('#ok').hasClass("hid")) {
$('#ok').removeClass("hid");
}
if (!$('#nID').hasClass("hid")) {
$('#nID').addClass("hid");
}
if (!$('#fID').hasClass("hid")) {
$('#fID').addClass("hid");
}
},
dataType: "json"
});
}
});//添加
添加按钮点击事件
<body>
<div>
<ul id="tree" class="ztree"></ul>
</div>
<div class="message">
<div class="operatingStyle">
<input class="btn btn-default customize" type="button" id="Edit" value="编辑">
<input class="btn btn-default customize" type="button" id="Add" value="添加">
</div>
<form class="form-horizontal">
<div class="form-group">
<label for="NodeName" class="col-sm-2 control-label labStyle">节点名称：</label>
<div class="col-sm-10 textWidth">
<input type="text" class="form-control " id="NodeName" placeholder="节点名称">
</div>
</div>
<div id="dvTxt" class="form-group">
<label for="SuperiorNode" class="col-sm-2 control-label labStyle">上级节点：</label>
<div class="col-sm-10 textWidth">
<input type="text" class="form-control " id="SuperiorNode" placeholder="上级节点">
</div>
</div>
<div id="dvSelect" class="form-group hid">
<label for="superiorNodeSelect" class="col-sm-2 control-label labStyle">上级节点：</label>
<select id="superiorNodeSelect" class="form-control selectSystem">
<option value="-1">请选择</option>
</select>
</div>
<div class="form-group">
<label for="systemSelect" class="col-sm-2 control-label labStyle">所属系统：</label>
<select id="systemSelect" class="form-control selectSystem">
<option value="0">请选择</option>
<option value="1">数据质量</option>
<option value="4">日常开发</option>
<option value="5">移动端</option>
</select>
</div>
<div class="form-group">
<label for="PageAddress" class="col-sm-2 control-label labStyle">页面地址：</label>
<div class="col-sm-10 textWidth">
<textarea id="PageAddress" class="form-control textarea" rows="4" placeholder="页面地址"></textarea>
</div>
</div>
<div class="form-group" id="nID">
<label for="NodeID" class="col-sm-2 control-label labStyle">节点ID：</label>
<div class="col-sm-10 textWidth">
<input type="text" class="form-control " id="NodeID" disabled>
</div>
</div>
<div class="form-group" id="fID">
<label for="FatherNodeID" class="col-sm-2 control-label labStyle">父节点ID：</label>
<div class="col-sm-10 textWidth">
<input type="text" class="form-control " id="FatherNodeID" disabled>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input class="btn btn-default submit hid" type="button" id="ok" value="确定">
</div>
</div>
</form>
</div>
</body>
前台页面
后台代码就不贴了，都是业务的流程，没什么好看的
js插件ztree使用的更多相关文章
- JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭
好像没找到现成的,就自己写了一个demo. 效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv= ...
- JS插件之——ztree
很牛逼的一个树形菜单,树形下拉框插件.一年前用过,很好用.今天又有机会拿过来用,温故一下基本点,nice!! 官方文档说明的非常详细,按照API慢慢看,耐心解读,自然就可以解惑了. 官方文档及其源码下 ...
- Jquery插件Ztree使用所遇问题
问题1.$.fn.zTree为空或为Undefined 我在MVC中引用Jquery插件Ztree的JS并不存任何问题,而当我将Ztree的js引入项目中,就出现$.fn.zTree为空或为Undef ...
- 代码规范和常用的js插件以及测试工具
1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...
- 插件使用一树形插件---zTree
zTree是一款挺好用的树形插件,中文文档齐全,demo丰富. 官方网站是 http://www.treejs.cn/v3/main.php#_zTreeInfo 源码网站 https://githu ...
- js插件---Bootstrap 树控件
js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...
- JQuery树插件——ztree
API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...
- jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题
这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先 ...
- 【jQuery小实例】js 插件 查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
随机推荐
- CF Round #551 (Div. 2) D
CF Round #551 (Div. 2) D 链接 https://codeforces.com/contest/1153/problem/D 思路 不考虑赋值和贪心,考虑排名. 设\(dp_i\ ...
- vscode打开django项目pylint提示has not "object" member
vscode 打开 django 项目提示 has not "object" member 是因为 Django 动态地将属性添加到所有模型类中,所以 ide 无法解析. 解决方案 ...
- 【NOIP2015普及组】推销员_详解
题目 题目大意 阿明是一名推销员--螺丝街是一条直线,一端有入口,一共有 \(N(<100,000)\) 家住户,第 \(i\) 家住户到入口的距离为 \(S_i\) 米.由于同一栋房子里可以有 ...
- parquet列式文件实战（未完，待续）
parquet列式文件实战 parquet code demo http://www.programcreek.com/java-api-examples/index.php?source_dir=h ...
- 应对 Visual Stdio 编译时出现错误:常量中有换行符
笔者最近用 Visual Stdio 时,发现一个问题,在某一次写完语言进行编绎运行时,出现了以下错误: C2001错误:变量中有换行符 C2413错误:语法错误 缺少")"(在& ...
- C# Finalize和Dispose的区别
一:总结 1.Finalize方法(C#中是析构函数,以下称析构函数)是用于释放非托管资源的,而托管资源会由GC自动回收.所以,我们也可以这样来区分 托管和非托管资源.所有会由GC自动回收的资源,就是 ...
- 将nginx、mysql、php添加至环境变量
1.问题描述: 修改完nginx配置后想重启nginx服务,执行nginx -s reload 返回了 -bash: nginx: command not found 2.原因: 没有配置环境变量,找 ...
- 页面对象（Page Object）模式
内容转载自 https://www.cnblogs.com/yytesting/p/6973474.html 页面对象(Page Object)模式是目前自动化测试领域普遍使用的设计模式之一,此模式可 ...
- 【Mac】Mac中如何将相同后缀的所有文件设置指定软件打开
操作步骤: 以settings.xml文件为例 1.首先选中该文件,鼠标右键打开功能列表,选则查看文件信息 2.在文件信息中,进行相关设置
- 【转】解决Android 6.0 NoSuchContextException 和WEBVIEW_undefined 的问题
在 Android 4.4 操作系统上测试混合应用时,可以直接顺利的在native模式和webview模式之间切换,但是在Android6.0 操作系统上却报NoSuchContextExceptio ...