jq树结构,这里的树结构用的是ztree

//引入的css
<link rel="stylesheet" href="Styles/zTreeStyle/zTreeStyle.css" type="text/css" />

//div代码
<div class="zltree2">
     <ul id="Enter_Tree" class="ztree"></ul>
</div>

//引入的js
<script type="text/javascript" src="js/lib/layDate-v5.0.9/laydate.js"></script>
<script src="/assets/js/treeview/jquery.ztree.core-3.5.js"></script>
<script src="Scripts/xy.ztree.js"></script>
<script src="js/commontree.js" type="text/javascript"></script>
<script src="Scripts/xy.datatables.v2.js" type="text/javascript"> </script>

<script>
function URL() {
    return  'http://192.168.1.150:888/XhnWebApi.asmx'//访问接口前面共有

}
var baseURL = URL();
$(document).ready(function () {
GetTree();
}
function GetTree() {
    $.fn.CreateTree();
    $.fn.CreateTree.init.SelectNode("Enter_Tree", 1);
}

function PageInit() {
    GetTree();
}


//commontree.js
(function ($) {
    var baseURL = URL();
    $.fn.CreateTree = function () {
        var DataSouceTrees = $.fn.CreateTree.DataSouce.GetDataSource();
        $.fn.CreateTree.init.treeInit(DataSouceTrees);
        $.fn.CreateTree.init.changeTreeInco("Enter_Tree");  //树自定义图标
    };

    $.fn.CreateTree.DataSouce = {
        GetDataSource: function () {
            var UserId = sessionStorage.getItem('UserId');
            var url = baseURL + "/GetEnterpriseSubByUserID";
            var args = {
                pn: JSON.stringify({
                    UserID: UserId
                })
            };
            var strTreeData;
            $.ajaxSettings.async = false;
            $.getJSON(url, args, function (data) {
                if (data) {

                    strTreeData = data.data;//反序列化
                    window.EnterpriseID = strTreeData[1].EnterpriseID
                    console.log(EnterpriseID)
                }
            });
            return strTreeData;
        }
    };
    $.fn.CreateTree.init = {
        enable: false,
        config: function () {
            //开始：树配置信息说明
            var treeConfig = {
                view: {
                    fontCss: {
                        color: "#00f5f6",
                        "font-size": "24px"
                    },
                    showLine: false,
                    dblClickExpand: false, //双击节点时，是否自动展开父节点的标识
                    selectedMulti: false,
                    checkEnable: false,

                },
                data: {
                    simpleData: {
                        enable: true,     // 使用简单数据模式
                    }
                },
                callback: {
                    onClick: this.treeClick,  //树节点单击事件
                    onExpand: this.treeExpand,
                    onCheck: this.zTreeOnCheck
                },

                check: {
                    enable: true,//true
                    chkStyle: 'checkbox',
                    //check下的chkboxType = { "Y" : "s", "N" : "s" }; 
                    //Y指的是勾选checkbox的时候对父结点或子结点产生的影响
                    //N指的是取消checkbox的时候对父结点或子结点产生的影响大小写是有区别的。
                    //s指子结点，p指父结点
                    chkboxType: { "Y": "n", "N": "s" }
                    //chkboxType: { "Y": "ps", "N": "ps" }

                }
            };
            return treeConfig;
        },
        treeClick: function (event, treeId, treeNode) {
            var selectedNode = treeNode;
            var text = "";
            var EnterpriseID = "";
            var AreaID = "";
            var pid = "";
            var treeType = "";
            if (selectedNode != null && selectedNode != undefined) {
                text = selectedNode.name;
                EnterpriseID = selectedNode.EnterpriseID;
                AreaID = selectedNode.id;
                pid = selectedNode.pId;
                treeType = selectedNode.TypeID
            }
            searchParam.EnterpriseIDT = EnterpriseID;
            searchParam.AreaID = AreaID;
            getPageData(); //请求数据的健康
        },
        SelectNode: function (textId, isValue, meterId) {
            var j = 1;
            var zTree = $.fn.zTree.getZTreeObj(textId),
                nodes = zTree.getNodes();//获取全部节点数据
                nodesDT = zTree.transformToArray(nodes);//转换成数组集合
            for (var i = 0, l = nodesDT.length; i < l; i++) {
                if (meterId > 0) {
                    if (nodesDT[i].EnterpriseID == meterId) { // 编辑时绑定
                        zTree.selectNode(nodesDT[i]);
                        zTree.setting.callback.onClick(null, zTree.setting.treeId, nodesDT[i]);
                        return;
                    }
                } else {
                    if (!nodesDT[i].isParent) {//判断是否为子节点
                        zTree.selectNode(nodesDT[i]);
                        zTree.setting.callback.onClick(null, zTree.setting.treeId, nodesDT[i]);
                        if (j >= isValue)
                            return;
                        j++
                    }
                }
            }
        },//--默认选择第一个子节点，isValue默认选中几个
        treeInit: function (DataSourceTrees) {
            $.fn.zTree.init($("#Enter_Tree"), this.config(), DataSourceTrees);
        },
        //结束：树自定义图标、加载数据后重新勾选一次、默认选择第一个子节点
        changeTreeInco: function (treeId) {
            var zTree = $.fn.zTree.getZTreeObj(treeId),
                nodes = zTree.getNodes();   //获取全部节点数据
                nodesDT = zTree.transformToArray(nodes);  //转换成数组集合
            for (var i = 0, l = nodesDT.length; i < l; i++) {
                if (nodesDT[i].isParent) {  //判断是否为父级
                    nodesDT[i].iconSkin = nodesDT[i].iconSkin ? null : "pIcon01";//父级图标
                } else {
                    nodesDT[i].iconSkin = "icon08";//最后节点图标
                }
                zTree.updateNode(nodesDT[i]); //更新
            }
        },
        getTreeFirstSubNodeLevel: function (treeId) {
            var zTree = $.fn.zTree.getZTreeObj(treeId),
            nodes = zTree.getNodes();   //获取全部节点数据
            nodesDT = zTree.transformToArray(nodes);  //转换成数组集合
            if (nodesDT.length > 1) {
                var treeNodeID = nodesDT[1].EnterpriseID;
                if (treeNodeID != null && treeNodeID != "") {
                    var pNodeInfor = Mng_Regions.GetContent(treeNodeID).value;
                    var currentLevel = "1";
                    if (pNodeInfor != null && pNodeInfor != "" && pNodeInfor.split("@").length > 0) {
                        currentLevel = pNodeInfor.split("@")[2];
                    }
                    return currentLevel;
                }
            }
            return 0;
        }
    };
})(jQuery);
</script>

 里面有一些引入的js文件，如果没有的话可以私发给你们

也是在开发中写的，觉得可能对大家有帮助

第一个写文章多多关照