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插件.大致可以分为三步,添加 ...
随机推荐
- 每天一套题打卡|河南省第十一届ACM/ICPC
A 计划日 题意:已知李明在YYYY年MM月DD日星期W订了学习计划,现在想看看李明N天后的完成情况和个人总结,你能告诉我那天的日期和星期几吗? 模拟日期计算: 计算星期可以用基姆拉尔森公式 //中国 ...
- server.Transfer不工作
https://www.codeproject.com/Questions/56736/How-to-use-Server-Transfer-from-Ajax-UpdatePanel For Ser ...
- 牛客OI周赛9-提高组题目记录
牛客OI周赛9-提高组题目记录 昨天晚上做了这一套比赛,觉得题目质量挺高,而且有一些非常有趣而且非常清奇的脑回路在里边,于是记录在此. T1: 扫雷 题目链接 设 \(f_i\) 表示扫到第 \(i\ ...
- Python读写txt文件时的编码问题
这个问题来自于一个小伙伴,他在处理中文数据时需要先把里面的文本过滤然后分词,因为里面有许多符号,不仅是中文标点符号,还有✳,emoji等奇怪的符号. 正常情况下,中文的str经过encode('utf ...
- IOS Xcode编译项目-报错“ld: library not found for -XX”
一般是因为导入新项目的时候报错的.原因是引入的依赖库的问题.重新执行pod install应该可以解决.不过,有时候如果重新执行pod install无法执行,可以采用以下方法: 在终端中cd到项目所 ...
- js循环中使用async/await踩过的坑
最近写koa的时候遇见需要在循环中使用async/await的情况,当然第一反应就是直接上forEach,然后就直接翻车了... 直接上代码: function handleSql(val) { re ...
- 《R语言入门与实践》第二章:R包和帮助文档
这一章讲了两方面的内容,如何使用 R 包和帮助文档. R包 下载 R 包 命令: install.packages("<nameofpackage>") R 会话中启用 ...
- .class 缓存
项目用的是Ant. 场景: Class A{ private static final String HHH="hello"; } Class B{ public void met ...
- Idea 里明明配置了Tomcat，但是右上角任然没有Tomcat显示
问题截图如下: 上图明明配置了Tomcat,但是Idea右上角任然是Add Configurations 因为这个问题,困扰了好久.解决方法: 点击Add Configurations 出现如下界 ...
- inline temp 内联临时变量
double basePrice = order.getPrice(); return basePrice; 改成 return order.getPrice(); 去掉临时无用的临时变量