您的位置:首页 > Web前端

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格式
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  zTree-前端