JQuery写动态树示例代码


Posted in Javascript onJuly 31, 2013
// 业务类型树 
var settingOther = { 
edit: { 
enable: false 
}, 
// 异步加载树 
async: { 
enable: true, 
url:"initCoagencyTree.action", 
autoParam:["id", "name=n"], 
otherParam:{"otherParam":"zTreeAsyncTest"}, 
dataFilter: filter 
}, 
// 简单数据格式 
data: { 
simpleData: { 
enable: true 
} 
}, 
// 回调函数 
callback: { 
beforeClick: beforeClick, 
onClick: onClick 
} 
}; 
// 鼠标事件 
function beforeClick(treeId, treeNode, clickFlag) { 
// 普通选中 
if(clickFlag==1){ 
parent.document.getElementById("coagencyId").value=treeNode.id; 
parent.document.getElementById("parentId").value=treeNode.pId; 
parent.document.getElementById("name").value=treeNode.name; 
$("#coagencyId").attr("value",treeNode.id); 
$("#parentId").attr("value",treeNode.pId); 
}else{ 
// 取消选中 把值置空 
$("#coagencyId").attr("value",null); 
$("#parentId").attr("value",null); 
} 
return (treeNode.click != false); 
} 
// 鼠标解除节点的方法 
function onClick(event, treeId, treeNode, clickFlag) { 
// 默认执行的方法 显示节点的详细信息 
parent.showCoagencyDetail(); 
} 
// 异步加载需要是函数 
function filter(treeId, parentNode, childNodes) { 
if (!childNodes) return null; 
for (var i=0; i<childNodes.length; i++) { 
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); 
} 
return childNodes; 
} 
// 异步加载需要是函数 
function beforeAsync(treeId, treeNode) { 
return treeNode ? treeNode.level < 5 : true; 
} 
// 初始化树 
$(document).ready(function(){ 
$.fn.zTree.init($("#coagencyTree"),settingOther); 
}); 
</SCRIPT> 
<!-- 树节点id --> 
<s:hidden name="coagencyForm.coagencyId" id="coagencyId"/> 
<!-- 树节点 父id --> 
<s:hidden name="coagencyForm.parentId" id="parentId"/> 
<div class="zTreeDemoBackground left"> 
<ul id="coagencyTree" class="ztree" style="height: 640px"></ul> 
</div>
Javascript 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 #Javascript
JS的千分位算法实现思路
Jul 31 #Javascript
一个JS的日期格式化算法示例
Jul 31 #Javascript
jquery实现div拖拽宽度示例代码
Jul 31 #Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 #Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 #Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 #Javascript
You might like
php入门小知识
2008/03/24 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
初学者学习Python好还是Java好
2020/05/26 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
暑假实习求职信范文
2013/09/22 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
岳庙导游词
2015/02/04 职场文书
2015年女生节活动总结
2015/02/27 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python