Browse Source

测试多层级单选下拉树,增加无效值边框标红

master
linyang3 3 years ago
parent
commit
6ef395d4de
  1. 52
      dist/bundle.js
  2. 54
      src/modules/tree/main.js

52
dist/bundle.js vendored

@ -277,11 +277,11 @@
});
BI.shortcut("my.todolist", ToDoList);
})();
!(function(){
!(function () {
// 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = 'combo-error';
var ERROR_CLASS = "combo-error";
/**
* 判断是否是有效值
@ -289,8 +289,8 @@
* @param {Array} value setValue传入的值
* @returns {Boolean}
*/
function isValueValid(options, value) {
value = value || options.value || '';
function isValueValid (options, value) {
value = value || options.value || "";
if (Array.isArray(value)) {
value = value[0];
}
@ -302,15 +302,15 @@
}
// 获取id列表
BI.each(items, function(i, item){
BI.each(items, function (i, item) {
item && item.value && itemIds.push(item.value);
});
if (BI.contains(itemIds, value)) {
return true;
} else {
return false;
}
return false;
}
/**
@ -318,7 +318,7 @@
* @param {Object} widget
* @param {Array} value setValue传入的值
*/
function changeInvalidClassName(widget, value) {
function changeInvalidClassName (widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (isValueValid(options, value)) {
@ -332,10 +332,10 @@
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function() {
action: function () {
// 覆盖原setValue方法,调用原setValue前,修改样式
var _setValue = this.setValue;
this.setValue = function(value) {
this.setValue = function (value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
};
@ -361,7 +361,7 @@
{id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"},
{id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"},
{id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"},
{id: 12111,pId: 1211,value: "第五级文件1",text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
{id: 12111, pId: 1211, value: "第五级文件1", text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
{id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
@ -371,7 +371,7 @@
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function() {
state: function () {
return {
items: BI.deepClone(treeItems),
value: "第三级文件1"
@ -382,29 +382,29 @@
BI.model("dec.amiba.test.tree.model", TestTreeModel);
var TestTree = BI.inherit(BI.Widget, {
_store: function() {
_store: function () {
return BI.Models.getModel("dec.amiba.test.tree.model");
},
props: {
baseCls: 'fine-test-tree',
baseCls: "fine-test-tree"
},
watch: {
items: function(items) {
items: function (items) {
console.log("items", items);
this.treeRef.populate(items);
},
value: function(v) {
value: function (v) {
console.log("value", v);
}
},
render: function() {
render: function () {
var self = this, o = this.options;
return {
type: "bi.vertical",
height: 150,
lgap: 20,
tgap: 20,
mounted: function() {
mounted: function () {
// 测试增加树节点
var m = self.model;
@ -415,31 +415,31 @@
m.items = m.items.concat(newItems);
// 测试修改value
setTimeout(function() {
console.log('setValue');
self.treeRef.setValue('不存在的值');
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("");
}, 3000);
},
items: [
{
type: 'bi.label',
textAlign: 'left',
text: '叶子节点单选'
type: "bi.label",
textAlign: "left",
text: "叶子节点单选"
},
{
type: "bi.multilayer_single_tree_combo",
text: "默认值",
allowEdit: false,
items: self.model.items,
ref: function(ref) {
ref: function (ref) {
self.treeRef = ref;
},
width: 250,
value: self.model.value,
listeners: [{
eventName: 'EVENT_CHANGE',
eventName: "EVENT_CHANGE",
action: function () {
self.model.value = self.treeRef.getValue()[0];
}

54
src/modules/tree/main.js

@ -1,8 +1,8 @@
!(function(){
!(function () {
// 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = 'combo-error';
var ERROR_CLASS = "combo-error";
/**
* 判断是否是有效值
@ -10,11 +10,13 @@
* @param {Array} value setValue传入的值
* @returns {Boolean}
*/
function isValueValid(options, value) {
value = value || options.value || '';
function isValueValid (options, value) {
value = value || options.value;
if (Array.isArray(value)) {
value = value[0];
}
value = value || null;
var items = options.items || [];
var itemIds = [];
@ -23,15 +25,15 @@
}
// 获取id列表
BI.each(items, function(i, item){
BI.each(items, function (i, item) {
item && item.value && itemIds.push(item.value);
});
if (BI.contains(itemIds, value)) {
return true;
} else {
return false;
}
return false;
}
/**
@ -39,7 +41,7 @@
* @param {Object} widget
* @param {Array} value setValue传入的值
*/
function changeInvalidClassName(widget, value) {
function changeInvalidClassName (widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (isValueValid(options, value)) {
@ -53,10 +55,10 @@
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function() {
action: function () {
// 覆盖原setValue方法,调用原setValue前,修改样式
var _setValue = this.setValue;
this.setValue = function(value) {
this.setValue = function (value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
};
@ -82,7 +84,7 @@
{id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"},
{id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"},
{id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"},
{id: 12111,pId: 1211,value: "第五级文件1",text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
{id: 12111, pId: 1211, value: "第五级文件1", text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
{id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
@ -92,7 +94,7 @@
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function() {
state: function () {
return {
items: BI.deepClone(treeItems),
value: "第三级文件1"
@ -103,29 +105,29 @@
BI.model("dec.amiba.test.tree.model", TestTreeModel);
var TestTree = BI.inherit(BI.Widget, {
_store: function() {
_store: function () {
return BI.Models.getModel("dec.amiba.test.tree.model");
},
props: {
baseCls: 'fine-test-tree',
baseCls: "fine-test-tree"
},
watch: {
items: function(items) {
items: function (items) {
console.log("items", items);
this.treeRef.populate(items);
},
value: function(v) {
value: function (v) {
console.log("value", v);
}
},
render: function() {
render: function () {
var self = this, o = this.options;
return {
type: "bi.vertical",
height: 150,
lgap: 20,
tgap: 20,
mounted: function() {
mounted: function () {
// 测试增加树节点
var m = self.model;
@ -136,31 +138,31 @@
m.items = m.items.concat(newItems);
// 测试修改value
setTimeout(function() {
console.log('setValue');
self.treeRef.setValue('不存在的值');
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("");
}, 3000);
},
items: [
{
type: 'bi.label',
textAlign: 'left',
text: '叶子节点单选'
type: "bi.label",
textAlign: "left",
text: "叶子节点单选"
},
{
type: "bi.multilayer_single_tree_combo",
text: "默认值",
allowEdit: false,
items: self.model.items,
ref: function(ref) {
ref: function (ref) {
self.treeRef = ref;
},
width: 250,
value: self.model.value,
listeners: [{
eventName: 'EVENT_CHANGE',
eventName: "EVENT_CHANGE",
action: function () {
self.model.value = self.treeRef.getValue()[0];
}

Loading…
Cancel
Save