Browse Source

测试多层级单选下拉树,区分默认值和暂不可用值情况

master
linyang3 3 years ago
parent
commit
029d18e683
  1. 78
      dist/bundle.js
  2. 78
      src/modules/tree/main.js

78
dist/bundle.js vendored

@ -279,65 +279,82 @@
})();
!(function () {
// 给多层级单选树增加设置错误值时标红状态
/**
* 多层级单选树增加无效值时状态使用BI.config覆盖原组件只能调用一次
* 新增defaultText参数表示空默认值不传默认值为请选择注意不能替代text只是为了跟text区分开text现在包含空默认值和暂不可用值两种情况
* value存在且不存在于items中为无效值文本框标红
* value不存在text不为defaultText时为暂不可用值文本框不变去除水印
*/
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = "combo-error";
var WATERMARK_CLASS = "bi-water-mark";
var DEFAULT_TEXT = "请选择";
/**
* 判断是否是有效值
* @param {Object} config
* @param {Array} value setValue传入的值
* @returns {Boolean}
*/
* 判断是否是有效值
* @param {Object} config
* @param {String} value setValue传入的值
* @returns {Boolean}
*/
function isValueValid (options, value) {
value = value || options.value || "";
if (Array.isArray(value)) {
value = value[0];
if (!BI.isObject(options)) {
return true;
}
var items = options.items || [];
var itemIds = [];
value = value || options.value;
if (BI.isNull(value)) {
// null/undefined/空字符串作为空值
if (BI.isNull(value) || (value === "")) {
return true;
}
var items = options.items || [];
var itemIds = [];
// 获取id列表
BI.each(items, function (i, item) {
item && item.value && itemIds.push(item.value);
});
if (BI.contains(itemIds, value)) {
return true;
}
return false;
return BI.contains(itemIds, value);
}
/**
* 增加/去除标红className
* @param {Object} widget
* @param {Array} value setValue传入的值
*/
* 增加/去除标红className
* @param {Object} widget
* @param {String} value setValue传入的值
*/
function changeInvalidClassName (widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (!BI.isObject(widget)) {
return;
}
var combo = widget.combo;
var trigger = widget.textTrigger && widget.textTrigger.trigger && widget.textTrigger.trigger.trigger && widget.textTrigger.trigger.trigger.text && widget.textTrigger.trigger.trigger.text.element;
var options = widget.options;
var defaultText = options.defaultText || DEFAULT_TEXT;
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
}
if (options.text !== defaultText) {
trigger.removeClass(WATERMARK_CLASS);
}
}
config.listeners = config.listeners || [];
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function () {
// 覆盖原setValue方法,调用原setValue前,修改样式
// 覆盖原setValue方法,调用原setValue前,修改样式
var _setValue = this.setValue;
this.setValue = function (value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
changeInvalidClassName(this, value && value[0]);
};
// 立即触发一次样式变更,不需要传value
@ -349,10 +366,6 @@
});
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
@ -414,10 +427,10 @@
];
m.items = m.items.concat(newItems);
// 测试修改value
// 测试修改value;
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("");
self.treeRef.setValue("不存在的值");
}, 3000);
@ -430,7 +443,8 @@
},
{
type: "bi.multilayer_single_tree_combo",
text: "默认值",
text: "无效值",
defaultText: "无效值",
allowEdit: false,
items: self.model.items,
ref: function (ref) {

78
src/modules/tree/main.js

@ -1,66 +1,81 @@
!(function () {
// 给多层级单选树增加设置错误值时标红状态
/**
* 多层级单选树增加无效值时状态使用BI.config覆盖原组件只能调用一次
* 新增defaultText参数表示空默认值不传默认值为请选择注意不能替代text只是为了跟text区分开text现在包含空默认值和暂不可用值两种情况
* value存在且不存在于items中为无效值文本框标红
* value不存在text不为defaultText时为暂不可用值文本框不变去除水印
*/
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = "combo-error";
var WATERMARK_CLASS = "bi-water-mark";
var DEFAULT_TEXT = "请选择";
/**
* 判断是否是有效值
* @param {Object} config
* @param {Array} value setValue传入的值
* @returns {Boolean}
*/
* 判断是否是有效值
* @param {Object} config
* @param {String} value setValue传入的值
* @returns {Boolean}
*/
function isValueValid (options, value) {
if (!BI.isObject(options)) {
return true;
}
value = value || options.value;
if (Array.isArray(value)) {
value = value[0];
// null/undefined/空字符串作为空值
if (BI.isNull(value) || (value === "")) {
return true;
}
value = value || null;
var items = options.items || [];
var itemIds = [];
if (BI.isNull(value)) {
return true;
}
// 获取id列表
BI.each(items, function (i, item) {
item && item.value && itemIds.push(item.value);
});
if (BI.contains(itemIds, value)) {
return true;
}
return false;
return BI.contains(itemIds, value);
}
/**
* 增加/去除标红className
* @param {Object} widget
* @param {Array} value setValue传入的值
*/
* 增加/去除标红className
* @param {Object} widget
* @param {String} value setValue传入的值
*/
function changeInvalidClassName (widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (!BI.isObject(widget)) {
return;
}
var combo = widget.combo;
var trigger = widget.textTrigger && widget.textTrigger.trigger && widget.textTrigger.trigger.trigger && widget.textTrigger.trigger.trigger.text && widget.textTrigger.trigger.trigger.text.element;
var options = widget.options;
var defaultText = options.defaultText || DEFAULT_TEXT;
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
}
if (options.text !== defaultText) {
trigger.removeClass(WATERMARK_CLASS);
}
}
config.listeners = config.listeners || [];
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function () {
// 覆盖原setValue方法,调用原setValue前,修改样式
// 覆盖原setValue方法,调用原setValue前,修改样式
var _setValue = this.setValue;
this.setValue = function (value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
changeInvalidClassName(this, value && value[0]);
};
// 立即触发一次样式变更,不需要传value
@ -72,10 +87,6 @@
});
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
@ -137,10 +148,10 @@
];
m.items = m.items.concat(newItems);
// 测试修改value
// 测试修改value;
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("");
self.treeRef.setValue("不存在的值");
}, 3000);
@ -153,7 +164,8 @@
},
{
type: "bi.multilayer_single_tree_combo",
text: "默认值",
text: "无效值",
defaultText: "无效值",
allowEdit: false,
items: self.model.items,
ref: function (ref) {

Loading…
Cancel
Save