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);
}
如有其他需求请参照官方文档