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

admin 6月前 92

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


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

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


少客联盟- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与少客联盟立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者admin少客联盟享有帖子相关版权。
3、少客联盟管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者admin少客联盟的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
8、官方反馈邮箱:chinasuc@chinasuc.cn


上一篇:Web 前端的路到底如何走
下一篇:robots协议详解
Whatever is worth doing is worth doing well. juvenile hacker league
最新回复 (0)
    • 少客联盟
      2
        登录 注册 QQ登录(停用)
返回