zTree的操作。封装好
2015-10-24 11:52
387 查看
zTree通用操作。。 var ProblemClue = function() { var t = { //响应选择zTree事件 selectZtree : function(param) { $("#"+param+"Content" ).slideDown("fast"); $("body").bind("mousedown" ,param, t.onBodyDown); $( "#allLower").attr("disabled" , "disabled"); }, //组织树鼠标失去焦点 onBodyDown : function(event) { if (!(event.target.id == "menuBtn" || event.target.id == event.data+"Content" || $(event.target).parents("#" +event.data+"Content").length > 0)) { $("#"+event.data+"Content" ).fadeOut("fast"); $("body").unbind("mousedown" ,event.data, t.onBodyDown); $("#allLower").attr("disabled" , false); } }, //初始化树 initZTree : function(id,url) { ComTree.initTree({ divContainer : id, url : url, p : { }, enable : false, async : false, // false同步 true异步 onClick : t.zOnClick }); }, //回调点击 zOnClick : function(event, treeId, treeNode) { var regx=/\w+/ ; var id=regx.exec(treeId); var names = treeNode.name; var ids = treeNode.id; var targets = $("#" +id[0]); targets.val( names); targets.attr( "ids", ids); }, //初始化树。param1:页面上ul的id param2:后台访问的路径,注意返回的json格式当符合 t.initZTree("#level-tree " ,'inc/getCodeTreeByParentId') } return t; }(); 调用: 我这是闭包 t.initZTree("#dealMethod2-tree" ,'inc/getCodeTreeByParentId', "Z001202"); 页面:id按格式来即可。input的id xx div的id xxContent ul的id xx-tree 选择事件中加上参数xx即可。。如ProblemClue.selectZtree('level') <input type= "text" id ="level" ids="{{targets}}" value="{{targets}}" class="party-form-control" onclick="ProblemClue.selectZtree('level')" /> <div id="levelContent" style=" display: none; width : 220px; position : absolute; background-color: white; overflow : auto; border: 1px solid #D3D3D3; z-index: 11000;" > <ul id="level-tree" class="ztree" style=" margin-top: 0; height : 400px;"> </ul> </div> 精髓之处---后台js是封好的。不必每生成一棵树再写一次js事件。。这个js是我封好的。通过正则和点击事件来获取id。。只要引入zTree的包。按这个格式来应该没问题。后台注意封装好返回的json格式
相关文章推荐
- 菜鸟前端之路笔记1——学习路线
- jsp导出excel并支持分sheet导出的方法
- js中的this
- js中的this
- 41.Remove Nth Node From End of List
- JSP实现从不同服务器上下载文件的方法
- jquery定位生成后的html并对其操作
- js实现表单多按钮提交action的处理方法
- Codeforces548D:Mike and Feet(单调栈)
- JavaScript之MV*模式
- SlickGrid 样式在 JQueryUI Accordion 和 Bootstrap框架的兼容性解决办法
- JS实现状态栏跑马灯文字效果代码
- JSP内置对象
- JS跨域请求
- JS跨域请求
- 我的工具真是太少了--SharePreferences保存和读取
- JavaScript实现标题栏文字轮播效果代码
- jquery 通知提示框教程
- [CCC 1996 01]Deficient, Perfect, and Abundant
- js window.onload 加载多个函数和追加函数