樹外掛一般用與多級分類，許可權管理選單，這個Ztree功能還是基本滿足我們的需求

直接上程式碼

@{
    ViewBag.Title = "zTree";
}

<h2> @ViewBag.Title</h2>
<link href="~/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<div class="row">
    <ul id="treeDemo" class="ztree col-lg-5"></ul>
    <ul id="ulright" class="col-lg-7">
        <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已選擇</li>
    </ul>
</div>
@section scripts{
<script src="~/zTree_v3-master/js/jquery.ztree.all.min.js"></script>
<script>

    //遞迴找到所有節點(非父節點)
    function getAllChildrenNodes(treeNode, result) {
        if (treeNode.isParent) {
            var childrenNodes = treeNode.children;
            if (childrenNodes) {
                for (var i = 0; i < childrenNodes.length; i++) {
                    if (!childrenNodes[i].children) {
                        result.push(childrenNodes[i].name);
                    }
                    result = getAllChildrenNodes(childrenNodes[i], result);
                }
            }
        }
        return result;
    }
    var parames = 3;
    //zTree的所有配置
    var setting = {
        //zTree 的唯一標識，初始化後，等於 使用者定義的 zTree 容器的 id 屬性值。
        treeId: "",
        //zTree 容器的 jQuery 物件，主要功能：便於操作,內部引數,不可修改
        treeObj: null,
        //非同步請求資料配置;點選此父節點會觸發請求
        async: {
            //開啟此功能
            enable: true,
            url: "/ZTree/Data",
            type: "post",
            //傳送的父級id的欄位定義;如修改,遵循格式autoParam: ["id=parentId"]
            autoParam: ["id"],
            //其他需要提交的引數["name","topic","key","ss"]轉換後格式為name=topic&key=ss
            //otherParam: ["json", parames || 1, "test", "2"],
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            //ajax請求後的資料預處理函式
            dataFilter: function (treeId, parentNode, responseData) {
                console.log(responseData)
               return responseData;
            }
        },
        //資料配置
        data: {
            simpleData: {
                enable: true,
                idKey: "id", //修改預設的ID為自己的id
                pIdKey: "pid", //修改預設父級ID為自己資料的父級id
                rootPId: 0 //根節點的父節點id
            }
        },
        //檢視配置
        view: {
            //是否顯示節點前的圖示
            showIcon: showIconForTree,
            //節點上a標籤的樣式
            fontCss: {
            }
        },
        //選框配置
        check: {
            //啟用複選框
            enable: true,
            //chkStyle:"radio",//單選
            //複選框父子級選擇聯動設定
            chkboxType: { "Y": "ps", "N": "ps" }
        },
        //事件配置
        callback: {
            //點選複選框之前的事件
            beforeCheck: function (treeId, treeNode) {//如果節點是父節點,並且勾選時沒有子節點,則不允許勾選;針對父節點沒有展開,則沒有非同步載入子節點,此情況禁止點選父節點全選子節點的操作
                if (treeNode.isParent && !treeNode.children) {
                    return false;
                }
            },
            //回撥錯誤事件
            onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                alert("初始化節點資料失敗,請稍後重試");
            },
            //回撥成功事件
            onAsyncSuccess: function (event, treeId, treeNode, resData) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                console.log("資料載入成功");
                var count = (treeNode.children.length);
                //載入成功後;在節點後面顯示此父節點下有幾個一級子節點
                //$(".ztree").find("a[title=" + treeNode.name + "]").find("span[class='node_name']").html(treeNode.name + "<span>(" + count + ")</span>");
            },
            //父節點展開時的事件
            onExpand: function (event, treeId, treeNode) {
                //zTree物件
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                //獲取點選的id
                var nowId = treeNode.id;
                //獲取所有節點
                var allNodes = zTree.getNodes();
                //獲取點選節點的層級
               var level = treeNode.level;
                //定義過濾函式;獲取節點層級與點選節點層級相同並且為父節點的節點
                function filter(node) {
                    return (node.level == treeNode.level && node.isParent);
                }
               //獲得點選節點同級的父節點的集合
                var sameLevelNodes = zTree.getNodesByFilter(filter);
                //遍歷同級節點集合
                for (var i = 0; i < sameLevelNodes.length; i++) {
                    //將非被點選父節點收起;實現手風琴效果
                    if (sameLevelNodes[i].id != nowId) {
                        zTree.expandNode(sameLevelNodes[i], false, true, true);
                    }
                }
            },
            //點選事件
            onClick: function (e, treeId, treeNode, clickFlag) {

                //tree例項

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                //點選文字關聯複選框

                //如果不是父節點,則關聯,或者是父節點,但展開狀態位true是,也關聯;

                if (!treeNode.isParent || (treeNode.isParent && treeNode.open)) {

                    zTree.checkNode(treeNode, !treeNode.checked, true);//點選文字關聯複選框

                }

                //點選文字展開當前節點

                zTree.expandNode(treeNode, true, true, true);

                // zTree.reAsyncChildNodes(treeNode, "refresh");//強行非同步載入(存在子節點也進行載入)

                //手風琴效果;直接呼叫onExpand

                zTree.setting.callback.onExpand(e, treeId, treeNode);

                //點選節點名稱和勾選節點前面的複選框邏輯相同;

                //直接在onClick裡面呼叫onCheck函式;並傳入所需引數

                zTree.setting.callback.onCheck(e, treeId, treeNode);

            },
            //點選複選框事件
            onCheck: function (e, treeId, treeNode) {
                //獲取右側ul內所有li標籤;用於比較當前選擇複選框在右側是否一斤存在
                var rightLi = $("#ulright").find("li");
                //選中的是底層節點;
                if (!treeNode.isParent) {
                    //選中狀態,加入到右側
                    if (treeNode.checked) {
                        //遍歷右側li,如果選中的已經存在;return
                        for (var i = 0; i < rightLi.length; i++) {
                            if ($(rightLi[i]).attr("title") == treeNode.name) {
                                return;
                            }
                        }
                        // 建立li 追加li
                        var addLi = $("<li title=" + treeNode.name + "><span></span>");
                        addLi.find("span").text(treeNode.name);
                        addLi.animate({
                            width: "100%",
                            height: "30"
                        }, 400)
                        addLi.appendTo($("#ulright"));
                        //如果點選的節點存在connect欄位;判斷複選框狀態加入到右側ul或刪除
                        if (treeNode.connect) {
                            //遍歷右側li,如果選中的已經存在;return
                            for (var i = 0; i < rightLi.length; i++) {
                                if ($(rightLi[i]).attr("title") == treeNode.connect) {
                                    return;
                                }
                            }
                            // 建立li 追加li
                            var addLi = $("<li title=" + treeNode.connect + "><span></span>");
                            addLi.find("span").text(treeNode.connect);
                            addLi.animate({
                                width: "100%",
                                height: "30"
                            }, 400)
                            addLi.appendTo($("#ulright"));
                        }
                        //將被勾選的節點背景顏色更改
                        $("#treeDemo").find("a[title=" + treeNode.name + "]").css("backgroundColor", "#00b6ba");
                        //非選中狀態,刪除
                   } else {
                        //將右側的次節點對應的li刪除
                        $("#ulright").find("li[title=" + treeNode.name + "]").animate({
                            width: "0%",
                            height: "0"
                        }, 400, function () {
                            $("#ulright").find("li[title=" + treeNode.name + "]").remove();
                        })
                        //取消此節點的背景顏色
                        $("#treeDemo").find("a[title=" + treeNode.name + "]").css("backgroundColor", "");
                    }
                    //選中的是父節點;獲取所有子節點(非父節點),判斷複選框狀態加入到右側ul或刪除
                } else {
                    //呼叫遞迴函式;獲取所有非父級子節點陣列集合
                    var addNodesArray = getAllChildrenNodes(treeNode, []);
                    //是選中狀態,加入到右側ul
                    if (treeNode.checked) {
                        //定義儲存右側li的陣列
                        var rightLiArray = [];
                        $("#ulright li").each(function (i, v) {
                            rightLiArray.push($(v).attr("title"))
                        })
                        rightLiArray = rightLiArray.slice(1);
                        //遍歷勾選的陣列集合
                        for (var i = 0; i < addNodesArray.length; i++) {
                            //判斷此節點是否在右側ul內;不存在則加入
                            if (rightLiArray.indexOf(addNodesArray[i]) == -1) {
                                //建立li 追加li
                                var addLi = $("<li title=" + addNodesArray[i] + "><span>" + addNodesArray[i] + "</span>");
                                addLi.animate({
                                    width: "100%",
                                    height: 30
                                }, 400)
                                addLi.appendTo($("#ulright"));
                            }
                            //將節點背景顏色修改
                            $("#treeDemo").find("a[title=" + addNodesArray[i] + "]").css("backgroundColor", "#00b6ba");
                        }
                        //是非選中狀態,刪除
                    } else {
                        //遍歷節點,執行刪除操作
                        for (var i = 0; i < addNodesArray.length; i++) {
                            $("#ulright").find("li[title=" + addNodesArray[i] + "]").animate({
                                width: "0%",
                               height: 0
                            }, function () {
                                $(this).css("display", "none");
                                $(this).remove();
                            })
                            //還原背景顏色
                            $("#treeDemo").find("a[title=" + addNodesArray[i] + "]").css("backgroundColor", "");
                        }
                    }
               }
            },
        }
    };
    //zTree的節點資訊;可一次性全部載入;可試試非同步請求
    var zNodes = [
        {
        name: "一班",//名稱
        id: 1,//id,子元素的pid
        isParent: true,//是否為父節點,預設為false
        pid: 0,//父節點id;data中的rootPId;
        icon: "../zTree_v3-master/css/zTreeStyle/img/diy/1_open.png",//設定圖示
        open: true,//設定預設是否展開//非同步載入子節點無效
        //checked:true //設定預設勾選
    }, {
        name: "二班",
        id: 2,
        isParent: true,
        pid: 0
    }, {
        name: "三班",
        id: 3,
        isParent: true,
        pid: 0
    }];
    ///設定 zTree 僅僅 level=1 的節點不顯示圖示
    function showIconForTree(treeId, treeNode) {
        return treeNode.level !=1;
    };
    $(document).ready(function () {
        //初始化zTree; zTree容器的jquery物件/ 配置/ 節點
        //$.fn.zTree.init($("#treeDemo"), setting, null);///如果需要根節點也非同步載入，初始化時 zNodes 引數設定為 null 即可。
        $.fn.zTree.init($("#treeDemo"), setting,zNodes)
    });

</script>}
 

doml效果圖

Ztree.js下載地址:https://github.com/zTree/zTree_v3