Ztree

关于Ztree的使用：

<link href="~/Scripts/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/js/jquery.ztree.all-3.5.min.js"></script>

<script>
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        view: {
            dblClickExpand: false,
            showLine: false,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {   //回调函数
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    demoIframe.attr("src", treeNode.file + ".html");
                    return true;
                }
            },
            onCheck: function (event, treeId, treeNode) {
                console.log(treeNode.id);
            }
        },
        
    };  
    var code; 
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>" + str + "</li>");
    }
    $(document).ready(function () { 
        $.ajax({
                 url: "http://localhost:8333/OA_Tay/DepartmentTree",
                 type: "get",
                 dataType: "json",
                 success: function (d) {
                   var dd = JSON.parse(d);
                   for (var i = 0; i < dd.length; i++) {
                                                     //主键ID                   //父类    ID                     //名称
                 zNodes.push({ "id": dd[i].OrganizationId, "pId": dd[i].OrganizationStart, "name": dd[i].OrganizationName    });
            }
            var t = $("#treeDemo");
            t = $.fn.zTree.init(t, setting, zNodes);
            demoIframe = $("#testIframe");
            var zTree = $.fn.zTree.getZTreeObj("tree"); 
           }
    })
    });
</script>

关于数据源具体是这样的：
var zNodes = [
{ id: 1, pId: 0, name: “商城分类列表”, open: true },
{ id: 11, pId: 1, name: “蔬菜水果” },
{ id: 111, pId: 11, name: “蔬菜” },
{ id: 112, pId: 11, name: “苹果” },
{ id: 113, pId: 11, name: “大蒜” },
{ id: 114, pId: 11, name: “白菜” },
{ id: 115, pId: 11, name: “青菜” },
{ id: 12, pId: 1, name: “手机数码” },
{ id: 121, pId: 12, name: "手机 " },
{ id: 122, pId: 12, name: "照相机 " },
{ id: 13, pId: 1, name: “电脑配件” },
{ id: 131, pId: 13, name: "手机 " },
{ id: 122, pId: 13, name: "照相机 " },
{ id: 14, pId: 1, name: “服装鞋帽” },
{ id: 141, pId: 14, name: "手机 " },
{ id: 42, pId: 14, name: "照相机 " },
];