bootstrap-treeview 自定义添加节点方法-阿里云开发者社区

开发者社区> ~信~仰~> 正文

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Treeview的Node拖动Node节点移动
Treeview的Node拖动Node节点位置移动并重新排序存储。 关键代码: private void treeView1_DragDrop(object sender, DragEventArgs e)//拖动 ...
681 0
WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色
本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html 在B/S开发中,对TreeView控件要改变当前选中节点的颜色比较方便,其有相应的SelectedNodeChanged事件进行控制,但对于WinForm则没有这样方便。
630 0
为什么往dataGridView中添加数据会多一行
1、案例代码 this.dataGridView1.Rows.Clear(); if (Get_One_User(Convert.
730 0
自定义平台决定在线CRM系统软件未来
本文讲的是自定义平台决定在线CRM系统软件未来,从发展态势来看,当下主流的在线CRM厂商除了进行产品的更新和补强之外,都把主要的精力放在了提升产品定制能力上。这种定制不仅仅是针对产品的配置调整而言,更多的是着眼于提供二次开发功能,从而令用户可以最大限度地操纵产品特性。
1305 0
[喵咪大数据]Hadoop节点添加下线和磁盘扩容操作
Hadoop绝非一个简单程序,集群模式下更是如此,所有的数据都存储在Hadoop中如果操作不当会存在丢失数据的风险,那么怎么在安全的情况,扩容下线维护或者磁盘满了怎么增加空间,就是今天的主要内容了.
230 0
Elasticsearch集群管理之1——如何高效的添加、删除节点?
1、问题抛出 1.1 新增节点问题 我的群集具有黄色运行状况,因为它只有一个节点,因此副本保持未分配状态,我想要添加一个节点,该怎么弄?
24 0
开发函数计算的正确姿势———为 PHP 运行时添加自定义扩展
PHP 语言提供了一种扩展机制(Extension),通过 PHP 扩展可以增强语法、调用 C/C++ 实现的库函数以及优化执行性能。PHP 扩展是与平台相关的动态链接库,在 Linux 和 Mac 平台是 .so 文件,在 Windows 平台是 .dll 文件。由于函数计算的开发通常在 Mac 和 Windows 平台,而运行时是 Linux(Debain)环境,所以为函数计算 PHP 运行时添加扩展会遇到由于动态链接库平台相关而导致要么本地无法调试,要么远端无法运行的问题。本文介绍借助 Funcraft 工具提供的模拟环境进行 PHP 扩展的安装、本地运行调试以及构建发布。
401 0
+关注
119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载