bootstrap-treeview 自定义添加节点方法

简介:         bootstrap-treeview官方没有给出动态添加子节点和子节点集合的方法, 当需要点击父节点再去从后台获取其子节点时, 需要用户自定义动态加载子节点方法. 本文自定义了添加节点集合方法, 用于一次添加多个子节点.

        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);
	        })
	    }
	};

3 使用


        // 当触发展开节点事件时, 发送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 }]);
        		}
        	})
        },  


展示, 当加载时, 只加载一级部门, 如下图:

15b05636891641e04e2690aed59068cb23276603


点击一级部门, 再去后台请求一级部门的子部门, 如下:

9c9307a66b5f3657ee0a4097ee2deb80241cc051


目录
相关文章
|
2月前
|
前端开发 容器
bootstrap table 设置自定义列宽
【5月更文挑战第4天】bootstrap table 设置自定义列宽
|
2月前
|
前端开发 数据库
R语言基于Bootstrap的线性回归预测置信区间估计方法分析汽车制动距离|数据分享
R语言基于Bootstrap的线性回归预测置信区间估计方法分析汽车制动距离|数据分享
|
2月前
|
前端开发
R语言实现随机前沿分析SFA、数据包络分析DEA、自由处置包分析FDH和BOOTSTRAP方法
R语言实现随机前沿分析SFA、数据包络分析DEA、自由处置包分析FDH和BOOTSTRAP方法
|
2月前
|
前端开发 数据库
R语言基于Bootstrap的线性回归预测置信区间估计方法
R语言基于Bootstrap的线性回归预测置信区间估计方法
开心档 - 软件开发入门之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
开心档之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
|
JavaScript Java
Bootstrap-Datatables Java后台分页 批量删除 自定义搜索
先上一张效果图、自定义搜索Java代码、批量删除的代码。
226 0
Bootstrap-Datatables Java后台分页 批量删除 自定义搜索
|
前端开发
zone.js在bootstrap阶段对window对象里一些标准方法的注入逻辑
zone.js在bootstrap阶段对window对象里一些标准方法的注入逻辑
96 0
zone.js在bootstrap阶段对window对象里一些标准方法的注入逻辑
|
JavaScript 前端开发
Vue中引入JQuery和Bootstrap方法
一、Vue中引入JQuery 1、因为已经安装了vue-cli脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。
2421 0
|
前端开发 Python
[python skill]基于python的bootstrap analysis方法
上回书说到(惊堂木!)Dr. Semmelweis and the discovery of handwashing案例中的第8步中使用了bootstrap分析方法(Bootstrap analysis of Semmelweis handwashing data),其实小弟内心写起来是有一丢丢心虚的,因为本身不是相关专业出身没有系统学习过概率学的方法,加之互联网时代大家皮糙肉厚,其实没太多时间仔细研究某一种具体的方式方法(可能只有我一个人这样)。
4544 0