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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
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
COM in PHP (winows only)
2006/10/09 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
ES6中字符串的使用方法扩展
2019/06/04 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python爬虫模拟登录带验证码网站
2016/01/22 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
linux面试题参考答案(7)
2014/07/24 面试题
2014学年自我鉴定
2014/02/23 职场文书
网站创业计划书
2014/04/30 职场文书
黄河绝恋观后感
2015/06/08 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
聘任书的格式及模板
2019/10/28 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记