bootstrap-treeview 源码加上点击事件
程序员文章站
2022-06-08 14:59:29
...
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 版本的源码。
也没有加上 点击事件。
还好没有做无用功。 希望这个博客能帮到一些人