jsTree - 树

jsTree

手动引入

  • 示例
$('#elementId').jstree({
    core: {
        data: [
            {
                "text": "省",
                "id": "2",
                "parent": "0",
                "icon": null,
                "data": "01",
                "state": null,
                "type": "default"
            },
            {
                "text": "Easy Frame",
                "id": "0",
                "parent": "#",
                "icon": "la la-folder-open-o",
                "data": null,
                "state": {
                    "selected": null,
                    "opened": true,
                    "disabled": null,
                    "checked": null,
                    "undetermined": null,
                    "hidden": null
                },
                "type": "default"
            }
        ]
    }
})
  • 框架中封装了一些jsTree的常用方法如下
/**
 * 获取jsTree对象
 * @param tree {object|string} 选择器或者jsTree对象
 * @returns {object}
 */
getTree: function (tree) {
    return getTree(tree);
},
/**
 * 保存/修改节点信息
 *
 * @param tree {object|string} 选择器或者jstree对象
 * @param node {object} 节点信息
 */
saveNode: function (tree, node) {
    saveNode(tree, node);
},
/**
 * 删除节点
 *
 * @param tree {object|string} 选择器或者jstree对象
 * @param ids {number|string} 要删除的id
 */
deleteNode: function (tree, ids) {
    deleteNode(tree, ids);
},
/**
 * 右键点击时获取用户想操作的数据
 * 1.右键点击的节点属于多选节点, 返回所有已选中节点
 * 2.右键点击的节点不属于多选的节点, 返回右键点击节点并选中
 *
 * @param data {object}
 */
getOperationNodes: function (data) {
    return getOperationNodes(data);
},
/**
 * 获取右键点击的节点
 * @param data {object}
 *
 * @returns {object}
 */
getClickNode: function (data) {
    return getClickNode(data);
},
/**
 * 获取jsTree选中节点
 *
 * @param tree {object|string} 选择器或者jsTree对象
 * @param attr 要获取的属性,如果为空,则返回节点全部信息
 * @returns {array}
 */
getCheckedNodes: function (tree, attr) {
    return getCheckedNodes(tree, attr);
},
/**
 * jsTree 设置节点选中
 *
 * @param tree {object|string} 选择器或者jsTree对象
 * @param values {array|string} 选中的值,数组或字符串(1,2,3)
 */
checkNodes: function (tree, values) {
    checkNodes(tree, values);
},
/**
 * 设置jsTree checkbox 全选
 * @param tree {object|string} 选择器或者jsTree对象
 */
checkAll: function (tree) {
    checkAll(tree);
},
/**
 * 设置jsTree checkbox 全不选
 * @param tree {object|string} 选择器或者jsTree对象
 */
unCheckAll: function (tree) {
    unCheckAll(tree);
}

如有其他需求请参照官方文档