Ares.Lin
/
fineui-start
forked from Teller/fineui-start
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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

master
linyang3 3 years ago
parent
720aeeab81
commit
6ef395d4de
2 changed files with 302 additions and 300 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 298
      dist/bundle.js
  2. 302
      src/modules/tree/main.js

298
dist/bundle.js vendored
Unescape View File

@ -277,180 +277,180 @@
}); });
BI.shortcut("my.todolist", ToDoList); BI.shortcut("my.todolist", ToDoList);
})(); })();
!(function(){ !(function () {
// 给多层级单选树增加设置错误值时标红状态 // 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) { BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = 'combo-error'; var ERROR_CLASS = "combo-error";
/** /**
* 判断是否是有效值 * 判断是否是有效值
* @param {Object} config * @param {Object} config
* @param {Array} value setValue传入的值 * @param {Array} value setValue传入的值
* @returns {Boolean} * @returns {Boolean}
*/ */
function isValueValid(options, value) { function isValueValid (options, value) {
value = value || options.value || ''; value = value || options.value || "";
if (Array.isArray(value)) { if (Array.isArray(value)) {
value = value[0]; value = value[0];
} }
var items = options.items || []; var items = options.items || [];
var itemIds = []; var itemIds = [];
if (BI.isNull(value)) { if (BI.isNull(value)) {
return true; return true;
} }
// 获取id列表 // 获取id列表
BI.each(items, function(i, item){ BI.each(items, function (i, item) {
item && item.value && itemIds.push(item.value); item && item.value && itemIds.push(item.value);
}); });
if (BI.contains(itemIds, value)) { if (BI.contains(itemIds, value)) {
return true; return true;
} else { }
return false; return false;
} }
}
/** /**
* 增加/去除标红className * 增加/去除标红className
* @param {Object} widget * @param {Object} widget
* @param {Array} value setValue传入的值 * @param {Array} value setValue传入的值
*/ */
function changeInvalidClassName(widget, value) { function changeInvalidClassName (widget, value) {
var combo = widget.combo || {}; var combo = widget.combo || {};
var options = widget.options || {}; var options = widget.options || {};
if (isValueValid(options, value)) { if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS); combo && combo.element.removeClass(ERROR_CLASS);
} else { } else {
combo && combo.element.addClass(ERROR_CLASS); combo && combo.element.addClass(ERROR_CLASS);
}
} }
}
config.listeners = config.listeners || []; config.listeners = config.listeners || [];
// 新增mount生命周期回调 // 新增mount生命周期回调
config.listeners.push({ config.listeners.push({
eventName: BI.Events.MOUNT, eventName: BI.Events.MOUNT,
action: function() { action: function () {
// 覆盖原setValue方法，调用原setValue前，修改样式 // 覆盖原setValue方法，调用原setValue前，修改样式
var _setValue = this.setValue; var _setValue = this.setValue;
this.setValue = function(value) { this.setValue = function (value) {
changeInvalidClassName(this, value); changeInvalidClassName(this, value);
_setValue.call(this, value); _setValue.call(this, value);
}; };
// 立即触发一次样式变更，不需要传value
changeInvalidClassName(this);
}
});
// 立即触发一次样式变更，不需要传value return config;
changeInvalidClassName(this);
}
}); });
return config;
});
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
{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: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function() {
return {
items: BI.deepClone(treeItems),
value: "第三级文件1"
};
},
childContext: ["items"]
});
BI.model("dec.amiba.test.tree.model", TestTreeModel);
var TestTree = BI.inherit(BI.Widget, {
_store: function() {
return BI.Models.getModel("dec.amiba.test.tree.model");
},
props: {
baseCls: 'fine-test-tree',
},
watch: {
items: function(items) {
console.log("items", items);
this.treeRef.populate(items);
},
value: function(v) {
console.log("value", v);
}
},
render: function() {
var self = this, o = this.options;
return {
type: "bi.vertical",
height: 150,
lgap: 20,
tgap: 20,
mounted: function() {
// 测试增加树节点
var m = self.model;
var newItems = [
{id: 3, pId: -1, value: "第三级目录1", text: "第三级目录1"},
{id: 31, pId: 3, value: "第三级文件1", text: "第三级文件1"}
];
m.items = m.items.concat(newItems);
// 测试修改value
setTimeout(function() {
console.log('setValue');
self.treeRef.setValue('不存在的值');
}, 3000);
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
{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: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function () {
return {
items: BI.deepClone(treeItems),
value: "第三级文件1"
};
}, },
items: [ childContext: ["items"]
{ });
type: 'bi.label', BI.model("dec.amiba.test.tree.model", TestTreeModel);
textAlign: 'left',
text: '叶子节点单选' var TestTree = BI.inherit(BI.Widget, {
}, _store: function () {
{ return BI.Models.getModel("dec.amiba.test.tree.model");
type: "bi.multilayer_single_tree_combo", },
text: "默认值", props: {
allowEdit: false, baseCls: "fine-test-tree"
items: self.model.items, },
ref: function(ref) { watch: {
self.treeRef = ref; items: function (items) {
console.log("items", items);
this.treeRef.populate(items);
}, },
width: 250, value: function (v) {
value: self.model.value, console.log("value", v);
listeners: [{ }
eventName: 'EVENT_CHANGE', },
action: function () { render: function () {
self.model.value = self.treeRef.getValue()[0]; var self = this, o = this.options;
} return {
}] type: "bi.vertical",
} height: 150,
] lgap: 20,
}; tgap: 20,
} mounted: function () {
});
// 测试增加树节点
BI.shortcut("dec.amiba.test.tree", TestTree); var m = self.model;
var newItems = [
{id: 3, pId: -1, value: "第三级目录1", text: "第三级目录1"},
{id: 31, pId: 3, value: "第三级文件1", text: "第三级文件1"}
];
m.items = m.items.concat(newItems);
// 测试修改value
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("");
}, 3000);
},
items: [
{
type: "bi.label",
textAlign: "left",
text: "叶子节点单选"
},
{
type: "bi.multilayer_single_tree_combo",
text: "默认值",
allowEdit: false,
items: self.model.items,
ref: function (ref) {
self.treeRef = ref;
},
width: 250,
value: self.model.value,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
self.model.value = self.treeRef.getValue()[0];
}
}]
}
]
};
}
});
BI.shortcut("dec.amiba.test.tree", TestTree);
})();!(function () { })();!(function () {
// 将todolist组件挂载到#wrapper上. // 将todolist组件挂载到#wrapper上.

302
src/modules/tree/main.js
Unescape View File

@ -1,176 +1,178 @@
!(function(){ !(function () {
// 给多层级单选树增加设置错误值时标红状态 // 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) { BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = 'combo-error'; var ERROR_CLASS = "combo-error";
/** /**
* 判断是否是有效值 * 判断是否是有效值
* @param {Object} config * @param {Object} config
* @param {Array} value setValue传入的值 * @param {Array} value setValue传入的值
* @returns {Boolean} * @returns {Boolean}
*/ */
function isValueValid(options, value) { function isValueValid (options, value) {
value = value || options.value || ''; value = value || options.value;
if (Array.isArray(value)) { if (Array.isArray(value)) {
value = value[0]; value = value[0];
} }
var items = options.items || []; value = value || null;
var itemIds = [];
var items = options.items || [];
if (BI.isNull(value)) { var itemIds = [];
return true;
} if (BI.isNull(value)) {
return true;
// 获取id列表 }
BI.each(items, function(i, item){
item && item.value && itemIds.push(item.value); // 获取id列表
}); BI.each(items, function (i, item) {
item && item.value && itemIds.push(item.value);
if (BI.contains(itemIds, value)) { });
return true;
} else { if (BI.contains(itemIds, value)) {
return true;
}
return false; return false;
} }
}
/** /**
* 增加/去除标红className * 增加/去除标红className
* @param {Object} widget * @param {Object} widget
* @param {Array} value setValue传入的值 * @param {Array} value setValue传入的值
*/ */
function changeInvalidClassName(widget, value) { function changeInvalidClassName (widget, value) {
var combo = widget.combo || {}; var combo = widget.combo || {};
var options = widget.options || {}; var options = widget.options || {};
if (isValueValid(options, value)) { if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS); combo && combo.element.removeClass(ERROR_CLASS);
} else { } else {
combo && combo.element.addClass(ERROR_CLASS); combo && combo.element.addClass(ERROR_CLASS);
}
} }
}
config.listeners = config.listeners || []; config.listeners = config.listeners || [];
// 新增mount生命周期回调 // 新增mount生命周期回调
config.listeners.push({ config.listeners.push({
eventName: BI.Events.MOUNT, eventName: BI.Events.MOUNT,
action: function() { action: function () {
// 覆盖原setValue方法，调用原setValue前，修改样式 // 覆盖原setValue方法，调用原setValue前，修改样式
var _setValue = this.setValue; var _setValue = this.setValue;
this.setValue = function(value) { this.setValue = function (value) {
changeInvalidClassName(this, value); changeInvalidClassName(this, value);
_setValue.call(this, value); _setValue.call(this, value);
}; };
// 立即触发一次样式变更，不需要传value
changeInvalidClassName(this);
}
});
// 立即触发一次样式变更，不需要传value return config;
changeInvalidClassName(this);
}
}); });
return config;
});
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
{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: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function() {
return {
items: BI.deepClone(treeItems),
value: "第三级文件1"
};
},
childContext: ["items"]
});
BI.model("dec.amiba.test.tree.model", TestTreeModel);
var TestTree = BI.inherit(BI.Widget, {
_store: function() {
return BI.Models.getModel("dec.amiba.test.tree.model");
},
props: {
baseCls: 'fine-test-tree',
},
watch: {
items: function(items) {
console.log("items", items);
this.treeRef.populate(items);
},
value: function(v) {
console.log("value", v);
}
},
render: function() {
var self = this, o = this.options;
return {
type: "bi.vertical",
height: 150,
lgap: 20,
tgap: 20,
mounted: function() {
// 测试增加树节点
var m = self.model;
var newItems = [
{id: 3, pId: -1, value: "第三级目录1", text: "第三级目录1"},
{id: 31, pId: 3, value: "第三级文件1", text: "第三级文件1"}
];
m.items = m.items.concat(newItems);
// 测试修改value
setTimeout(function() {
console.log('setValue');
self.treeRef.setValue('不存在的值');
}, 3000);
var treeItems = [
{id: -1, pId: -2, value: "根目录", text: "根目录"},
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
{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: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}
];
var TestTreeModel = BI.inherit(Fix.Model, {
state: function () {
return {
items: BI.deepClone(treeItems),
value: "第三级文件1"
};
},
childContext: ["items"]
});
BI.model("dec.amiba.test.tree.model", TestTreeModel);
var TestTree = BI.inherit(BI.Widget, {
_store: function () {
return BI.Models.getModel("dec.amiba.test.tree.model");
}, },
items: [ props: {
{ baseCls: "fine-test-tree"
type: 'bi.label', },
textAlign: 'left', watch: {
text: '叶子节点单选' items: function (items) {
}, console.log("items", items);
{ this.treeRef.populate(items);
type: "bi.multilayer_single_tree_combo",
text: "默认值",
allowEdit: false,
items: self.model.items,
ref: function(ref) {
self.treeRef = ref;
}, },
width: 250, value: function (v) {
value: self.model.value, console.log("value", v);
listeners: [{ }
eventName: 'EVENT_CHANGE', },
action: function () { render: function () {
self.model.value = self.treeRef.getValue()[0]; var self = this, o = this.options;
} return {
}] type: "bi.vertical",
} height: 150,
] lgap: 20,
}; tgap: 20,
} mounted: function () {
});
// 测试增加树节点
BI.shortcut("dec.amiba.test.tree", TestTree); var m = self.model;
var newItems = [
{id: 3, pId: -1, value: "第三级目录1", text: "第三级目录1"},
{id: 31, pId: 3, value: "第三级文件1", text: "第三级文件1"}
];
m.items = m.items.concat(newItems);
// 测试修改value
setTimeout(function () {
console.log("setValue");
self.treeRef.setValue("");
}, 3000);
},
items: [
{
type: "bi.label",
textAlign: "left",
text: "叶子节点单选"
},
{
type: "bi.multilayer_single_tree_combo",
text: "默认值",
allowEdit: false,
items: self.model.items,
ref: function (ref) {
self.treeRef = ref;
},
width: 250,
value: self.model.value,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
self.model.value = self.treeRef.getValue()[0];
}
}]
}
]
};
}
});
BI.shortcut("dec.amiba.test.tree", TestTree);
})(); })();
Write Preview
Loading…
Cancel
Save