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插件.大致可以分为三步,添加 ...
随机推荐
- 【Contest Hunter 5302】金字塔
[原题链接]传送门 [题解思路] 1.考虑如何将序列与树相对应,想到类似dfs序和欧拉序,同一个子树对应序列连续 2.暴力分子树过于复杂,考虑简化(划重点: 若当前区间为[l,r],考虑第一颗子树所在 ...
- Docker 学习笔记(持久化数据的备份,还原)
假如我们应用程序需要一台 mssql 数据库来持久化数据,我们将 mssql 数据库运行于 Docker 容器中: docker run -d -p 1433:1433 -e "ACCEPT ...
- vue-cli3.0 笔记
vue-cli 3.0 npm install -g @vue/cli # OR yarn global add @vue/cli ui 界面创建项目 vue ui 命令行创建项目 步骤 vu ...
- 【HNOI 2016】网络
Problem Description 一个简单的网络系统可以被描述成一棵无根树.每个节点为一个服务器.连接服务器与服务器的数据线则看做一条树边.两个服务器进行数据的交互时,数据会经过连接这两个服务器 ...
- Linux环境——MySQL安装及配置(5.7版本)
数据库安装包下载地址:https://dev.mysql.com/downloads/mysql/ 我的环境是Linux Red Hat Enterprlse Linux (64位),本次安装的是M ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- error LNK1169 找到一个或多个多重定义的符号的解决方法
问题描述如下: 有 三个源文件,A.h.B.cpp.C.cpp. A.h是头文件,其中声明了三个变量a1.a2. a3. B.cpp是A.h中所声明的类的实现源代码,C.cpp是主程序文件.B.cpp ...
- SpringCloud问题解决:spring-cloud-eureka启动出错Cannot execute request on any known server
场景: 在启动eureka server时,出现以下错误: com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectExce ...
- 环境搭建之allure的安装配置,及简单使用
环境准备 首先是要安装好jdk的电脑上,运行java.javac这些命令都没有问题,要不安装allure时会报错 下载allure 如果直接用Jenkins上的插件,并不需要下载安装 allure官网 ...
- 删除链表的倒数第N个节点(java实现)
题目: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链 ...