bootstrap-treeview官方没有给出动态添加子节点和子节点集合的方法, 当需要点击父节点再去从后台获取其子节点时, 需要用户自定义动态加载子节点方法. 本文自定义了添加节点集合方法, 用于一次添加多个子节点. 步骤如下.
1. 添加方法入口
在Tree主函数return {/*在这里添加addNewNodes的入口*/} 处添加代码
// Add Nodes Method
addNewNodes: $.proxy(this.addNewNodes, this),
添加结果如下:
return {
// Options (public access)
options: this.options,
// Initialize / destroy methods
init: $.proxy(this.init, this),
remove: $.proxy(this.remove, this),
// Add Method
addNewNodes: $.proxy(this.addNewNodes, this),
// Get methods
getNode: $.proxy(this.getNode, this),
getParent: $.proxy(this.getParent, this),
getSiblings: $.proxy(this.getSiblings, this),
......
2. 编写添加节点方法
* 给节点添加子节点
* @param {Object|Number} identifiers - A valid node, node id or array of node identifiers
* @param {optional Object} options.node;
Tree.prototype.addNewNodes = function (identifiers, options) {
this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
this.setNewNodes(node, options);
}, this));
this.setInitialStates({ nodes: this.tree }, 0);
this.render();
* 添加子节点
Tree.prototype.setNewNodes = function (node, options) {
if (node.nodes == null) node.nodes = [];
if (options.nodes) {
$.each(options.nodes, function (index,option) {
node.nodes.push(option);
// 当触发展开节点事件时, 发送ajax请求到后台获取子节点列表, 然后使用
addNewNodes动态添加到treeview中
onNodeExpanded: function(event, node) {
var childrenIds = listChildrenIds(node);
if (childrenIds.length > 0) {
return;
var nodeId = node.nodeId;
ajaxGet({
url: contextPath + "/departments/" + node.code + "/list",
success: function(res) {
checkableTree_departmentManage.treeview("addNewNodes", [nodeId, { nodes: res.data }]);
展示, 当加载时, 只加载一级部门, 如下图:
点击一级部门, 再去后台请求一级部门的子部门, 如下:
【JavaScript-节点操作】如何进行节点的删除以及动态表格的创建,了解三种动态元素的创建区别
【JavaScript-节点操作】如何进行节点的删除以及动态表格的创建,了解三种动态元素的创建区别
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
bootstrap treeview 自定义全选 / 全部取消选中
bootstrap treeview默认不提供全选 / 全部取消操作, 需要开发者自定义. 自定义效果如下, 点击父节点, 子节点全部选中, 再次点击, 子节点全部取消选中. 在笔者的情况下, 需要实现父节点的单独选中, 所以这里做了子节点全部不选中的情况下, 依然保持父节点单独选中状态.