bootstrap-treeview 源码加上点击事件

bootstrap-treeview 源码加上点击事件

这次工作中 使用到了bootstrapTreeview 来进行树状图展示
在实现业务逻辑中发现 逻辑bug
bootstrapTreeview 只有选中事件 和 取消选中事件
没有 点击事件。
在选中事件 和取消选中事件 都去加载表格
会出现查询两次的情况。
bootstrapTreeview 是 优先执行 取消选中 再执行 选中
如果说取消选中事件加载的表格请求时间比选中 的时间 长。
那么就会出现 表格最后展示的是 取消选中 加载的表格。
百度了很多 发现没有很好的方法。
于是自己看源码。
加上了 点击事件。
在点击 进行的所有事件的最后执行。
话不多说。 上修改后的源码
代码片.

/* =========================================================
 * bootstrap-treeview.js v1.2.0
 * =========================================================
 * Copyright 2013 Jonathan Miles
 * Project URL : http://www.jondmiles.com/bootstrap-treeview
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

;(function ($, window, document, undefined) {

	/*global jQuery, console*/

	'use strict';

	var pluginName = 'treeview';

	var _default = {};

	_default.settings = {

		injectStyle: true,

		levels: 2,

		expandIcon: 'glyphicon glyphicon-plus',
		collapseIcon: 'glyphicon glyphicon-minus',
		emptyIcon: 'glyphicon',
		nodeIcon: '',
		selectedIcon: '',
		checkedIcon: 'glyphicon glyphicon-check',
		uncheckedIcon: 'glyphicon glyphicon-unchecked',

		color: undefined, // '#000000',
		backColor: undefined, // '#FFFFFF',
		borderColor: undefined, // '#dddddd',
		onhoverColor: '#F5F5F5',
		selectedColor: '#FFFFFF',
		selectedBackColor: '#428bca',
		searchResultColor: '#D9534F',
		searchResultBackColor: undefined, //'#FFFFFF',

		enableLinks: false,
		highlightSelected: true,
		highlightSearchResults: true,
		showBorder: true,
		showIcon: true,
		showCheckbox: false,
		showTags: false,
		multiSelect: false,

		// Event handlers
		onNodeChecked: undefined,
		onNodeCollapsed: undefined,
		onNodeDisabled: undefined,
		onNodeEnabled: undefined,
		onNodeExpanded: undefined,
		onNodeSelected: undefined,
		onNodeUnchecked: undefined,
		onNodeUnselected: undefined,
		onSearchComplete: undefined,
		onSearchCleared: undefined,

        /**
         * 给 bootstrap treeview 添加 点击事件 定义
         * @author luoyuxi
         * @date  2019/4/19 6:32 PM
         */
		onNodeClicked: undefined
	};


	Tree.prototype.unsubscribeEvents = function () {

		this.$element.off('click');
		this.$element.off('nodeChecked');
		this.$element.off('nodeCollapsed');
		this.$element.off('nodeDisabled');
		this.$element.off('nodeEnabled');
		this.$element.off('nodeExpanded');
		this.$element.off('nodeSelected');
		this.$element.off('nodeUnchecked');
		this.$element.off('nodeUnselected');
		this.$element.off('searchComplete');
		this.$element.off('searchCleared');

        /**
         * 给 bootstrap treeview 添加 点击事件 元素
         * @author luoyuxi
         * @date  2019/4/19 6:32 PM
         */
		this.$element.off('nodeClicked');
	};

	Tree.prototype.subscribeEvents = function () {

		this.unsubscribeEvents();

		this.$element.on('click', $.proxy(this.clickHandler, this));

		if (typeof (this.options.onNodeChecked) === 'function') {
			this.$element.on('nodeChecked', this.options.onNodeChecked);
		}

		if (typeof (this.options.onNodeCollapsed) === 'function') {
			this.$element.on('nodeCollapsed', this.options.onNodeCollapsed);
		}

		if (typeof (this.options.onNodeDisabled) === 'function') {
			this.$element.on('nodeDisabled', this.options.onNodeDisabled);
		}

		if (typeof (this.options.onNodeEnabled) === 'function') {
			this.$element.on('nodeEnabled', this.options.onNodeEnabled);
		}

		if (typeof (this.options.onNodeExpanded) === 'function') {
			this.$element.on('nodeExpanded', this.options.onNodeExpanded);
		}

		if (typeof (this.options.onNodeSelected) === 'function') {
			this.$element.on('nodeSelected', this.options.onNodeSelected);
		}

		if (typeof (this.options.onNodeUnchecked) === 'function') {
			this.$element.on('nodeUnchecked', this.options.onNodeUnchecked);
		}

		if (typeof (this.options.onNodeUnselected) === 'function') {
			this.$element.on('nodeUnselected', this.options.onNodeUnselected);
		}

		if (typeof (this.options.onSearchComplete) === 'function') {
			this.$element.on('searchComplete', this.options.onSearchComplete);
		}

		if (typeof (this.options.onSearchCleared) === 'function') {
			this.$element.on('searchCleared', this.options.onSearchCleared);
		}
		/**
		 * 给 bootstrap treeview 添加 点击事件 赋值
		 * @author luoyuxi
		 * @date  2019/4/19 6:32 PM
		 */
		if (typeof (this.options.onNodeClicked) === 'function') {
			this.$element.on('nodeClicked', this.options.onNodeClicked);
		}
	};

	Tree.prototype.clickHandler = function (event) {
		if (!this.options.enableLinks) event.preventDefault();

		var target = $(event.target);
		var node = this.findNode(target);
		if (!node || node.state.disabled) return;
		
		var classList = target.attr('class') ? target.attr('class').split(' ') : [];
		if ((classList.indexOf('expand-icon') !== -1)) {

			this.toggleExpandedState(node, _default.options);
			this.render();
		}
		else if ((classList.indexOf('check-icon') !== -1)) {
			
			this.toggleCheckedState(node, _default.options);
			this.render();
		}
		else {
			
			if (node.selectable) {
				this.toggleSelectedState(node, _default.options);
			} else {
				this.toggleExpandedState(node, _default.options);
			}

			this.render();
		}

		/**
		 * clickHandler -- 最后执行点击事件
		 * @author luoyuxi
		 * @date  2019/4/19 7:21 PM
		 */
        this.onClicked(node, _default.options);
	};

    /**
     * 给 bootstrap treeview 添加 点击事件
     * 依赖于clickHandler 方法。最后执行
     * @author luoyuxi
     * @date  2019/4/19 6:32 PM
     */
	Tree.prototype.onClicked = function (node, options) {
		if (!node) return;
        if (!options.silent) {
            this.$element.trigger('nodeClicked', $.extend(true, {}, node));
        }
	};

})(jQuery, window, document);

这是我修改部分的源码。
源码其他地方没有动过。就不展示了。
现在来看看 使用。

$("#mytree").treeview({
                    data: data.data,// 数据源
                    showCheckbox: false,   //是否显示复选框
                    highlightSelected: true,    //是否高亮选中
                    multiSelect: false,    //多选
                    levels: 1,
                    color: "#428bca",// 颜色
                    emptyIcon: 'glyphicon glyphicon-star-empty',    //没有子节点的节点图标
                    expandIcon: "glyphicon glyphicon-chevron-right",// 如果有子节点收起来
                    collapseIcon: "glyphicon glyphicon-chevron-down",// 展开的父节点图标
                    // nodeIcon: "glyphicon glyphicon-bookmark",// 节点图标
                    onNodeSelected: function (event, data) { // 选中事件
                        $("#tableTitle").text(data.text);
                        $("#tableDefaultId").val(data.id);
                        $("#tableDefaultLevId").val(data.level);

                    },
                    onNodeUnselected: function (event, data) { // 取消选中事件
                        $("#tableTitle").text("所有平台");
                        $("#tableDefaultId").val("");
                        $("#tableDefaultLevId").val("");

                    },
                    onNodeClicked: function (event, data) { // 点击事件
                        // 刷新当前页面
                        loadLoanPartnerPage();
                    }
                });

直接在 加载树状 的 代码后面 加上 onNodeClicked 以及你要调用的方法就行。

本次修改的 是 V1.2.0

也不知道最新版 有没有加上点击事件的方法。
写到这里 我也去查了一下 。貌似 有V2.1.0 版本的。
不管了。
我之前用的还是V1.0.0
里面还没有取消选中事件。
因为用的少。 对这些不熟悉。
下次还是注意一下最新版本的。
反正这里已经能用了。 将就了。
下次就长记性了。
希望能帮助到有用的人。

================================================
刚刚看了 V2.1.0 版本的源码。
也没有加上 点击事件。
还好没有做无用功。 希望这个博客能帮到一些人

你可能感兴趣的:(Js)