1. 程式人生 > >zTree的操作。封裝好

zTree的操作。封裝好

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格式