easyui Tree模擬級聯勾選cascadeCheck，節點選擇，父節點自動選中，節點取消，父節點自動取消選擇，節點選擇，全部子節點所有選擇，節點取消，全部子節點所有取消勾選

最近項目中用到easyui tree，發現tree控件的cascadeCheck有些坑，不像miniui 的tree控件，級聯勾選符合業務需求，因此就本身從新改寫了onCheck事件，符合業務需求。網上百度了不少資料，都沒有徹底符合本身業務場景的，因此就本身動手寫咯。

先說一下本身的業務需求：

1.選中節點，上級以及全部直系上級節點自動選中，全部下級子孫節點所有自動選中；

2.取消選擇節點，若是兄弟節點都未選擇，則上級以及全部直系上級節點自動取消選擇，全部下級子孫節點所有取消選中。

這裏說一下cascadeCheck屬性，tree控件默認cascadeCheck=true，即級聯勾選，但這個屬性有些坑，當選擇某個節點時，若是全部兄弟節點沒所有選中，父節點是個方形的，不是勾選，換成勾選，也會有問題。因此索性不用這個cascadeCheck，本身模擬寫一個方法。

再說一下tree自定義方法擴展：

$.extend($.fn.tree.methods, {
        getLeafChildren: function (jq, params) {
            var nodes = [];
            $(params).next().children().children("div.tree-node").each(function () {
                nodes.push($(jq[0]).tree('getNode', this));
            });
            return nodes;
        }
    });

這段代碼在後面tree控件onCheck事件中會用到。

好了，廢話很少說了，開始上代碼：

$('#ulButtonTree').tree({
            url:"@Url.Action("GetButtonTree", "Res")",
            checkbox:true,
            cascadeCheck: false,
            onBeforeLoad: function (node, param) {
                var node = $('#ulResTree').tree('getSelected');
                if (node)
                    param.ResID = node.ID;
            },
            onCheck: function (node, checked) {
                var tree = $('#ulButtonTree');
                if (!eventNode) {//鼠標勾選事件初始化標緻，標識鼠標勾選事件第一次遍歷開始
                    eventNode = node;//將鼠標勾選時的節點保存起來，待向下 遍歷時，將今後節點開始
                    treeup = true;//向上遍歷標誌，由鼠標勾選的節點eventNode開始向上遍歷
                }
                if (treeup) {//向上遍歷                   
                    var ParentNode = tree.tree("getParent", node.target);
                    if (ParentNode) {//存在上級節點
                        if (checked)//若是是選擇
                            tree.tree("check", ParentNode.target);//選中上級節點。注意：若是父節點以前未選中，執行此行代碼後，會再次觸發onCheck事件，下面的代碼暫時不會被執行；若是以前兄弟節點已被選中，那麼上級節點也被選中，此行代碼執行後不會觸發onCheck事件，而直接執行下面的代碼
                        else {//若是是取消選擇
                            var isCheck = false;
                            var childNode = tree.tree("getLeafChildren", ParentNode.target);
                            for (var i = 0; i < childNode.length; i++) {//循環當前節點的父節點的全部子節點，及包含當前節點的全部兄弟節點
                                if (childNode[i].checked) {
                                    isCheck = true;//只要有兄弟節點被選中，則退出循環
                                    break;
                                }
                            }
                            if (!isCheck)//若是全部兄弟節點及當前節點都未勾選，則取消父節點的勾選
                                tree.tree("uncheck", ParentNode.target);
                        }
                    }
                    treeup = false;//向上遍歷結束
                }
                //到達根部節點或向上遍歷結束以後再回到原始節點開始向下遍歷
                if (!treeup && eventNode) {
                    var childNode = tree.tree("getChildren", eventNode.target);//獲取原始節點eventNode的全部子孫節點
                    if (checked) {//若是是選擇
                        for (var i = 0; i < childNode.length; i++) {//循環全部子孫節點，所有選中
                            tree.tree("check", childNode[i].target);
                        }
                    }
                    else {//若是是取消
                        for (var i = 0; i < childNode.length; i++) {//循環全部子孫節點，所有取消勾選
                            tree.tree("uncheck", childNode[i].target);
                        }
                    }
                }
                eventNode = null;//標誌本次鼠標勾選事件遍歷結束
            }
        });

　　好了，看看效果圖吧，爲了弄這個gif圖片，還費了點時間，哈哈，你們有沒有好的錄製gif的小軟件啊，推薦一下唄。