ztree 自定义参数_zTree树插件使用方法及自定义控件实践_蓝戒的博客
zTree简介:
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
实践版本:zTree-verson : 3.5.28
1.首先引入:插件css和js文件
//js引入可以根据需要引入局部模块
2.页面html节点
//zTree 的容器样式名固定设置为: "ztree"
3.ztree初始化
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{name:"test1", open:true, children:[
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
实践示例:
自定义不同层级显示不同操作按钮,皮肤样式自定义,操作更新数据,保持折叠展开状态。
思路:
1. 自定义控件利用zTree初始化配置的view的addDiyDom方法js拼接Dom结构,Dom结构css自定义写成自己的样式。
2. 操作数据更新视图,由于实践示例的数据结构是经过加工处理的,采用的是zTree更新整个树的方法:treeObj.reAsyncChildNodes(null, "refresh");
3. 记录展开折叠状态,借助cookie记录,引入jquery.cookie.js,通过记录zTree节点id的状态方法来处理展开折叠状态:treeObj.getNodeByParam('id', z_tree[i])
4.展开折叠视图方法:treeObj.expandNode(node, true); 折叠展开回调事件:onExpand,onCollapse
html:
js(代码框架为avalonjs):
//新增节点
addNodesFun:function(){
var orgIdVal;
var orgNameVal;
if(organizationStructure.communityOrgLevel == 99){
if(organizationStructure.addPropertyCompany.communityId == ''){
util.showTip('请选择小区');
return;
}
orgIdVal = organizationStructure.addPropertyCompany.communityId;
orgNameVal = $(".selectbox2 option:selected").text();
}else{
if(organizationStructure.addPropertyCompany.propertyCompanyId == ''){
var strTxt = $('#addModal1 .j-modalLabel').text();
if(strTxt.indexOf("物业公司")>=0){
util.showTip('请选择物业公司');
return;
}
if(strTxt.indexOf("分公司")>=0){
util.showTip('请选择分公司');
return;
}
}
orgIdVal = organizationStructure.addPropertyCompany.propertyCompanyId;
orgNameVal = $(".selectbox1 option:selected").text();
}
$.post("/imapi/sys/auth/addAuthNode", {
login: main.userObject.login,
orgId: orgIdVal,
orgName: orgNameVal,
orgLevel: organizationStructure.communityOrgLevel,
sort: organizationStructure.addPropertyCompany.PropertyCompanySort,
parentId: organizationStructure.nodeSysOrgAuthId
}, function (data) {
if (data.code || data.code == 0) {
util.showTip(data.message);
return;
}
$('.modal').modal('hide');
organizationStructure.getOrgList();
organizationStructure.updataTree();
util.showTip('操作成功');
}).error(function (xhr, status, statusText) {
util.removeLoading();
util.showTip('错误状态码:' + xhr.status + "
时间:" + xhr.getResponseHeader('Date'))
})
},
//删除节点
delNodesFun: function(sysOrgAuthId) {
organizationStructure.remindFunc('提示','确定删除嘛?',function(){ //remindfunc为自定义询问提示方法,非ztree的方法
$.post("/imapi/sys/auth/delAuthNode", {
login: main.userObject.login,
sysOrgAuthId: sysOrgAuthId
}, function (data) {
if (data.code || data.code == 0) {
util.showTip(data.message);
return;
}
organizationStructure.getOrgList();
organizationStructure.updataTree();
util.showTip("删除成功!");
}).error(function (xhr, status, statusText) {
util.removeLoading();
util.showTip('错误状态码:' + xhr.status + "
时间:" + xhr.getResponseHeader('Date'));
})
})
},
//更新树
updataTree:function(){
var treeObj = $.fn.zTree.getZTreeObj("organizationTree");
treeObj.reAsyncChildNodes(null, "refresh");
},
//节点树数据构造
initTreeNode:function(data){
var nodeList=[];
for(var i=0;i
nodeList[i]={};
nodeList[i].id=data[i].orgId;
nodeList[i].name=data[i].orgName;
nodeList[i].sysOrgAuthId=data[i].sysOrgAuthId;
nodeList[i].orgLevel=data[i].orgLevel;
if(data[i].leafList&&data[i].leafList.length>0){
nodeList[i].children = arguments.callee(data[i].leafList);
}
}
return nodeList;
},
//初始化节点树
initTree: function(nodeData,id){
var zNodes = [];
zNodes = nodeData;
var setting_organization = {
view: {
showIcon:false,
addDiyDom: organizationStructure.addDiyDom //注:这里是传的函数名
},
callback: {
onExpand: organizationStructure.onExpand,
onCollapse: organizationStructure.onCollapse
}
};
$(document).ready(function(){
if('organizationTree' == id){
$.fn.zTree.init($("#"+id), setting_organization, zNodes);
var treeObj = $.fn.zTree.getZTreeObj("organizationTree");
//treeObj.expandAll(true); //控制展开折叠
var cookie = $.cookie("z_tree");
if(cookie){ z_tree = JSON.parse(cookie);
for(var i=0; i< z_tree.length; i++){
var node = treeObj.getNodeByParam('id', z_tree[i])
treeObj.expandNode(node, true) }
}
}
});
},
//展开折叠状态
onExpand: function(event, treeId, treeNode){
var cookie = $.cookie("z_tree");
var z_tree = null;
if(cookie){
z_tree = JSON.parse(cookie);
}
if(!z_tree){ z_tree = new Array(); }
if(jQuery.inArray(treeNode.id, z_tree)<0){
z_tree.push(treeNode.id); }
$.cookie("z_tree", JSON.stringify(z_tree))
},
onCollapse: function(event, treeId, treeNode){
var cookie = $.cookie("z_tree");
var z_tree = null;
if(cookie){
z_tree = JSON.parse(cookie);
}
if(!z_tree){
z_tree = new Array();
}
var index = jQuery.inArray(treeNode.id, z_tree);
z_tree.splice(index, 1);
$.cookie("z_tree", JSON.stringify(z_tree))
},
//自定义节点树控件
addDiyDom:function(treeId, treeNode) {
//if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
var aObj = $("#" + treeNode.tId + '_a');
console.log(treeId);
console.log(treeNode);
if (treeNode.level == 0) {
var editStr = "新增物业公司";
aObj.after(editStr);
} else if(treeNode.orgLevel == 99){
var editStr = "删除";
aObj.after(editStr);
}else{
var editStr = "删除" + "新增分公司" + "新增小区";
aObj.after(editStr);
}
$(document).on('click','.addcompany-p',function(){
organizationStructure.addNodeshow = true;
organizationStructure.addPropertyCompany.propertyCompanyId = '';
organizationStructure.addPropertyCompany.communityId = '';
organizationStructure.addPropertyCompany.PropertyCompanySort = '';
organizationStructure.nodeSysOrgAuthId = $(this).attr('data-sysOrgAuthId');
organizationStructure.communityOrgLevel = '';
$('#addModal1').find('.j-modalLabel').text('新增物业公司');
$('#addModal1').modal('show');
});
$(document).on('click','.addcompany-s',function(){
organizationStructure.addNodeshow = true;
organizationStructure.addPropertyCompany.propertyCompanyId = '';
organizationStructure.addPropertyCompany.communityId = '';
organizationStructure.addPropertyCompany.PropertyCompanySort = '';
organizationStructure.nodeSysOrgAuthId = $(this).attr('data-sysOrgAuthId');
organizationStructure.communityOrgLevel = '';
$('#addModal1').find('.j-modalLabel').text('新增分公司');
$('#addModal1').modal('show');
});
$(document).on('click','.addcompany-c',function(){
organizationStructure.addNodeshow = false;
organizationStructure.addPropertyCompany.propertyCompanyId = '';
organizationStructure.addPropertyCompany.communityId = '';
organizationStructure.addPropertyCompany.PropertyCompanySort = '';
organizationStructure.nodeSysOrgAuthId = $(this).attr('data-sysOrgAuthId');
organizationStructure.communityOrgLevel = 99;
$('#addModal1').find('.j-modalLabel').text('新增小区');
$('#addModal1').modal('show');
});
$(document).on('click','.deletecompany',function(){
var curSysOrgAuthId = $(this).attr('data-sysOrgAuthId');
organizationStructure.delNodesFun(curSysOrgAuthId);
});
},
//获取节点树列表
getOrgList:function(){
$.post('/imapi/sys/auth/authTree', {login:main.userObject.login,containRootNode:true},
function (data) {
if(data.code||data.code == 0){
util.showTip(data.message);
return;
}
var nodeData = organizationStructure.initTreeNode(data);
organizationStructure.initTree(nodeData,"organizationTree");
//ztree checkbox 禁用编辑
var zTreeObj = $.fn.zTree.getZTreeObj("organizationTree");
var nodes = zTreeObj.getNodes(), disabled = true, inheritParent = true, inheritChildren = true;
for (var i = 0, l = nodes.length; i < l; i++) {
zTreeObj.setChkDisabled(nodes[i], disabled, inheritParent, inheritChildren);
}
}).error(function(xhr,status,statusText){
util.showTip('错误状态码:'+xhr.status+"
时间:"+xhr.getResponseHeader('Date'))
})
}
3.ztree树json数据结构:
[
{
"sysOrgAuthId":"主键",
"orgId":"组织id(物业公司、分公司、小区id)",
"orgName":"组织名称(物业公司、分公司、小区名称)"
"parentId":"父级结点id",
"leafList":[
{
"sysOrgAuthId":"主键",
"orgId":"组织id(物业公司、分公司、小区id)",
"parentId":"父级结点id",
"orgName":"组织名称(物业公司、分公司、小区名称)",
"leafList":[]
}
]
},
{
}
]
ztree 自定义参数_zTree树插件使用方法及自定义控件实践_蓝戒的博客相关推荐
- jquery可以勾选的下拉框_jquery.chosen下拉框多选插件使用详解_蓝戒的博客
Chosen 是一个支持jquery的selec t下拉框美化插件,它能让丑陋的.很长的selec t选择框变的更好看.更方便.不仅如此,它更扩展了selec t, 增加了自动筛选的功能.它可对列表 ...
- php粒子背景特效_粒子背景特效Particleground.js插件使用解析_蓝戒的博客
Particleground简介: Particleground是一个JavaScript插件,用于时髦的后台粒子系统.包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果.在支持HTML5画布的 ...
- ztree 自定义参数_Ztree节点前加上两个自定义按钮
前言: 在我的权限管理模块遇到了给某些角色加权限的问题,这时就需要实现将每个模块做成树,在每个节点前加上预览和编辑的按钮,这样可以根据数据库的某个字段给每个角色赋权限. 必须必须吐槽的是,这部分的功能 ...
- zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...
- android自定义控件几种,Android 自定义View一个控件搞定多种水波纹涟漪扩散效果 - CSDN博客...
效果图 实现思路 这个效果实现起来并不难,重要的是思路 此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化 根据上面的样式,可以看出此View需要满足以下变化 圆圈从中心可循环向外扩散 ...
- linux运行input文件路径,new FileInputStream(filePath)方法在linux下执行不正确 | ZPY博客...
因为要做下载,代码里用的new FileInputStream(filePath)读取文件在windows下测试正常,但打包放到Linux下执行就不正常了,也不报错,但是下载下来的图片是损坏的.感觉是 ...
- python函数参数定义不合法_面试题 - Operater - 博客园
1.执行这行代码结果是多少[i**i for i in range(3)] 我写的答案是[0,1,3],忘记了0**0是1 [1,1,3] 2.关于python内存管理:变量可以无需指定类型,可以使用 ...
- mysql 浮动ip查找方法_浮动ip - CanntBelieve - 博客园
浮动ip 其实就是动态ip, 静态IP是固定不变的,不管你用不用这个IP上网,这个IP都是属于你的 动态IP则是在使用的时候由DHCP服务器临时分配给你的,不用则不分配 在网络中如果设置了一部分静态I ...
- 最强最简单的方法:本地安装,阅读官方go博客《Go Blog》
前提 安装了go语言的二进制文件. 在终端或者命令提示符中运行 go version 能顺利输出go语言版本信息. 操作方法 blog · pkg.go.dev 这个链接是要科学上网的.里面说明了怎么 ...
最新文章
- vue-cli3+typescript初体验
- sysbench mysql 结果_sysbench使用和结果说明
- img 光盘映像文件已损坏_系统封装||还在用MSDN下载Windows镜像文件?你out了,用这个就可以了...
- protect 继承_(转)public、protect、private继承方式 C++
- java 进制转换 十进制转二,八,十六进制
- 信息学奥赛一本通 1223:An Easy Problem | OpenJudge NOI 4.6 1455:An Easy Problem
- 阿帕奇服务器文件上传,Apache HttpCore4.4基于经典的IO实现HTTP文件传输服务器
- 如何寻找互联网红利期产品?
- python复杂网络全局效率计算_python复杂网络库networkx:算法
- 计算机专业大学排名及本科录取分数线,计算机专业高考多少分录取?附中国计算机专业大学排名及分数线...
- Mybatis入门 基于XML实现增删改查(包含动态SQL标签的使用)
- Java MediaMetadataCompat
- 如何关掉苹果iMac开机启动声音
- zj-layout组件的布局
- 社团课Day2-数据解析:Xpath、BeautifulSoup、re正则表达
- 单商户商城系统功能拆解26—营销中心—限时秒杀
- Linux环境搭建:CentOS7安装Oracle
- 【国外教程】VRay Next for SketchUp 办公建筑与渲染教程
- OKR考核体系使用的分析
- Flask允许跨域请求
热门文章
- python毕业设计有哪些方向-Python毕业选题档案管理系统 开题报告
- python可以做什么工作好-学完Python我们可以做什么工作?
- 学python要多少钱-培训python大概要多少钱?
- 用python画玫瑰花教程-使用Python画一朵玫瑰花
- python中一共有多少个关键字-python – 搜索多个关键字的字符串列表
- python编程语法-语法知识【Python核心编程】
- python处理数据的优势-Python的优势及应用领域
- 使用python+opencv和pillow以及numpy对图像进行旋转,以及解决图像旋转过程中出现的黑边问题
- python文件传输模块ftplib模块的使用
- open source license主流的开源软件协议介绍