Browse Source

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

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

300
dist/bundle.js vendored

@ -277,180 +277,180 @@
});
BI.shortcut("my.todolist", ToDoList);
})();
!(function(){
!(function () {
// 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = 'combo-error';
// 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = "combo-error";
/**
/**
* 判断是否是有效值
* @param {Object} config
* @param {Object} config
* @param {Array} value setValue传入的值
* @returns {Boolean}
*/
function isValueValid(options, value) {
value = value || options.value || '';
if (Array.isArray(value)) {
value = value[0];
}
var items = options.items || [];
var itemIds = [];
function isValueValid (options, value) {
value = value || options.value || "";
if (Array.isArray(value)) {
value = value[0];
}
var items = options.items || [];
var itemIds = [];
if (BI.isNull(value)) {
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;
}
}
/**
/**
* 增加/去除标红className
* @param {Object} widget
* @param {Array} value setValue传入的值
*/
function changeInvalidClassName(widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
function changeInvalidClassName (widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
}
}
}
config.listeners = config.listeners || [];
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function() {
config.listeners = config.listeners || [];
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function () {
// 覆盖原setValue方法,调用原setValue前,修改样式
var _setValue = this.setValue;
this.setValue = function(value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
};
// 立即触发一次样式变更,不需要传value
changeInvalidClassName(this);
}
});
var _setValue = this.setValue;
this.setValue = function (value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
};
// 立即触发一次样式变更,不需要传value
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);
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"
};
},
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;
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);
},
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);
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);
},
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 () {
// 将todolist组件挂载到#wrapper上.

302
src/modules/tree/main.js

@ -1,176 +1,178 @@
!(function(){
!(function () {
// 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = 'combo-error';
// 给多层级单选树增加设置错误值时标红状态
BI.config("bi.multilayer_single_tree_combo", function (config) {
var ERROR_CLASS = "combo-error";
/**
/**
* 判断是否是有效值
* @param {Object} config
* @param {Object} config
* @param {Array} value setValue传入的值
* @returns {Boolean}
*/
function isValueValid(options, value) {
value = value || options.value || '';
if (Array.isArray(value)) {
value = value[0];
}
var items = options.items || [];
var itemIds = [];
function isValueValid (options, value) {
value = value || options.value;
if (Array.isArray(value)) {
value = value[0];
}
value = value || null;
var items = options.items || [];
var itemIds = [];
if (BI.isNull(value)) {
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;
}
}
/**
/**
* 增加/去除标红className
* @param {Object} widget
* @param {Array} value setValue传入的值
*/
function changeInvalidClassName(widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
function changeInvalidClassName (widget, value) {
var combo = widget.combo || {};
var options = widget.options || {};
if (isValueValid(options, value)) {
combo && combo.element.removeClass(ERROR_CLASS);
} else {
combo && combo.element.addClass(ERROR_CLASS);
}
}
}
config.listeners = config.listeners || [];
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function() {
config.listeners = config.listeners || [];
// 新增mount生命周期回调
config.listeners.push({
eventName: BI.Events.MOUNT,
action: function () {
// 覆盖原setValue方法,调用原setValue前,修改样式
var _setValue = this.setValue;
this.setValue = function(value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
};
// 立即触发一次样式变更,不需要传value
changeInvalidClassName(this);
}
});
var _setValue = this.setValue;
this.setValue = function (value) {
changeInvalidClassName(this, value);
_setValue.call(this, value);
};
// 立即触发一次样式变更,不需要传value
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);
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"
},
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;
watch: {
items: function (items) {
console.log("items", items);
this.treeRef.populate(items);
},
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);
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);
},
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);
})();
Loading…
Cancel
Save