Ztree的相关demo练习记录

Ztree的相关demo练习记录
1.引入zTree的相关资源，例如:js,css,

 <link type="text/css" href="${ctx}/static/web/css/consult/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${ctx}/static/common/bootstrap-table/bootstrap-table.min.css">
    <link type="text/css" rel="stylesheet" href="${ctx}/static/common/ztree/css/zTreeStyle.css" />

    <script type="text/javascript" src="${ctx}/static/web/js/jQuery.js"></script>
    <script type="text/javascript" src="${ctx}/static/web/js/bootstrap.js"></script>
    <script type="text/javascript" src="${ctx}/static/common/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="${ctx}/static/common/ztree/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/common/ztree/jquery.ztree.excheck-3.5.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/common/ztree/jquery.ztree.exedit-3.5.min.js"></script>

2.创建一个div或者ul

 <div id="ztreedemo" class="ztree"></div>

 注意：一定要加一个class什么class呢？那就是ztree不然里面的小图标啥的都不管用了。再给他一个id这个id的目的就是为了让我们再创建ztree的时候能获取到它。

3.开始创建了一个简单的树

var settingOfSub = {
    view: {
        showLine: true,
        showIcon: true,
        selectedMulti: false,
        nocheckInherit: true,
        addDiyDom : addDiyDom
    },
    check: {
        enable: true,
        chkboxType: {"Y": "", "N": ""}
    },
    data: {
        simpleData: {
            enable: true,
            idKey: 'subjectId',
            pIdKey: 'parentId',
            rootPid: ''
        },
        key: {
            name: 'subjectName',
            title: 'subjectName'
        }
    },
    callback: {
        //鼠标选择/取消节点前面的checkBox
        onCheck: onCheckOfSub
    }
};


  var treeObj = $.fn.zTree.init(detailBlock, settingOfSub, subjectList); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源