You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
493 lines
14 KiB
493 lines
14 KiB
7 years ago
|
Demo.Func = BI.inherit(BI.Widget, {
|
||
|
|
props: {
|
||
|
|
baseCls: "demo-func"
|
||
|
|
},
|
||
|
|
years: [{
|
||
|
|
text: "2010年", value: 2010, iconCls: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "2011年", value: 2011
|
||
|
|
}, {
|
||
|
|
text: "2012年", value: 2012, iconCls: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "2013年", value: 2013
|
||
|
|
}, {
|
||
|
|
text: "2014年", value: 2014, iconCls: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "2015年", value: 2015, iconCls: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "2016年", value: 2016, iconCls: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "2017年", value: 2017, iconCls: "close-ha-font"
|
||
|
|
}],
|
||
|
|
child: [{
|
||
|
|
type: "bi.combo_group",
|
||
|
|
el: {
|
||
|
|
type: "bi.icon_text_icon_item",
|
||
|
|
text: "2010年",
|
||
|
|
value: 2010,
|
||
|
|
height: 25,
|
||
|
|
iconCls: "close-ha-font"
|
||
|
|
},
|
||
|
|
children: [{
|
||
|
|
type: "bi.single_select_item",
|
||
|
|
height: 25,
|
||
|
|
text: "一月",
|
||
|
|
value: 11
|
||
|
|
}, {
|
||
|
|
type: "bi.icon_text_icon_item",
|
||
|
|
height: 25,
|
||
|
|
text: "二月",
|
||
|
|
value: 12,
|
||
|
|
children: [{type: "bi.single_select_item", text: "一号", value: 101, height: 25}]
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
text: "2011年", value: 2011
|
||
|
|
}, {
|
||
|
|
text: "2012年", value: 2012, iconCls: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "2013年", value: 2013
|
||
|
|
}, {
|
||
|
|
text: "2014年", value: 2014, iconCls: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "2015年", value: 2015, iconCls: "close-ha-font"
|
||
|
|
}],
|
||
|
|
|
||
|
|
months: [[{
|
||
|
|
el: {
|
||
|
|
text: "一月", value: 1
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
el: {
|
||
|
|
text: "二月", value: 2
|
||
|
|
}
|
||
|
|
}], [{
|
||
|
|
el: {
|
||
|
|
text: "三月", value: 3
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
el: {
|
||
|
|
text: "四月", value: 4
|
||
|
|
}
|
||
|
|
}], [{
|
||
|
|
el: {
|
||
|
|
text: "五月", value: 5
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
el: {
|
||
|
|
text: "六月", value: 6
|
||
|
|
}
|
||
|
|
}], [{
|
||
|
|
el: {
|
||
|
|
text: "七月", value: 7
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
el: {
|
||
|
|
text: "八月", value: 8
|
||
|
|
}
|
||
|
|
}], [{
|
||
|
|
el: {
|
||
|
|
text: "九月", value: 9
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
el: {
|
||
|
|
text: "十月", value: 10
|
||
|
|
}
|
||
|
|
}], [{
|
||
|
|
el: {
|
||
|
|
text: "十一月", value: 11
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
el: {
|
||
|
|
text: "十二月", value: 12
|
||
|
|
}
|
||
|
|
}]],
|
||
|
|
|
||
|
|
dynamic: [
|
||
|
|
{
|
||
|
|
text: "2010年", value: 1
|
||
|
|
}, {
|
||
|
|
text: "20112222年", value: 2
|
||
|
|
}, {
|
||
|
|
text: "201233333年", value: 3
|
||
|
|
}, {
|
||
|
|
text: "2013年", value: 4
|
||
|
|
}, {
|
||
|
|
text: "2012324年", value: 5
|
||
|
|
}, {
|
||
|
|
text: "2015年", value: 6
|
||
|
|
}, {
|
||
|
|
text: "2016年", value: 7
|
||
|
|
}, {
|
||
|
|
text: "201744444444444444444444444444444444444年", value: 8
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
week: [{
|
||
|
|
text: "周一", value: 100, iconClsLeft: "close-ha-font", iconClsRight: "close-font"
|
||
|
|
}, {
|
||
|
|
text: "周二", value: 101, iconClsLeft: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "周三", value: 102
|
||
|
|
}, {
|
||
|
|
text: "周四", value: 103, iconClsRight: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "周五", value: 104, iconClsLeft: "close-ha-font", iconClsRight: "close-font"
|
||
|
|
}, {
|
||
|
|
text: "周六", value: 105, iconClsLeft: "close-font", iconClsRight: "close-ha-font"
|
||
|
|
}, {
|
||
|
|
text: "周日", value: 106, iconClsLeft: "close-font"
|
||
|
|
}],
|
||
|
|
_createTop: function () {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
var yearCombo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "简单下拉框",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
type: "bi.button_group",
|
||
|
|
items: BI.createItems(BI.deepClone(this.years), {
|
||
|
|
type: "bi.single_select_radio_item",
|
||
|
|
height: 25,
|
||
|
|
handler: function (v) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.vertical"
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
|
||
|
|
var multiCombo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "多选下拉框",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
items: BI.createItems(BI.deepClone(this.years), {
|
||
|
|
type: "bi.multi_select_item",
|
||
|
|
height: 25,
|
||
|
|
handler: function (v) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
chooseType: 1,
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.vertical"
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
tool: {
|
||
|
|
type: "bi.label",
|
||
|
|
text: "这是一个下拉框",
|
||
|
|
height: 35
|
||
|
|
},
|
||
|
|
tabs: [{
|
||
|
|
type: "bi.multi_select_bar",
|
||
|
|
height: 25,
|
||
|
|
text: "全选",
|
||
|
|
onCheck: function (v) {
|
||
|
|
if (v) {
|
||
|
|
multiCombo.setValue(BI.pluck(BI.deepClone(self.years), "value"));
|
||
|
|
} else {
|
||
|
|
multiCombo.setValue([]);
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
isAllCheckedBySelectedValue: function (selectedValue) {
|
||
|
|
return selectedValue.length == self.years.length
|
||
|
|
// return true;
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
buttons: [{
|
||
|
|
type: "bi.text_button",
|
||
|
|
text: "清空",
|
||
|
|
handler: function () {
|
||
|
|
multiCombo.setValue([]);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
type: "bi.text_button",
|
||
|
|
text: "确定",
|
||
|
|
handler: function () {
|
||
|
|
BI.Msg.alert("", multiCombo.getValue());
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
|
||
|
|
var dynamicPopupCombo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
isNeedAdjustWidth: false,
|
||
|
|
offsetStyle: "center",
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "动态调整宽度",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
items: BI.createItems(BI.deepClone(this.dynamic), {
|
||
|
|
type: "bi.single_select_item",
|
||
|
|
height: 25
|
||
|
|
}),
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.vertical"
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
|
||
|
|
var dynamicCombo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
dynamic: true,
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "搜索",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
type: "bi.loader",
|
||
|
|
logic: {
|
||
|
|
dynamic: true,
|
||
|
|
scrolly: true
|
||
|
|
},
|
||
|
|
el: {
|
||
|
|
behaviors: {
|
||
|
|
redmark: function () {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.vertical"
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
itemsCreator: function (options, popuplate) {
|
||
|
|
var times = options.times;
|
||
|
|
BI.delay(function () {
|
||
|
|
if (times == 3) {
|
||
|
|
popuplate([{
|
||
|
|
type: "bi.single_select_item",
|
||
|
|
text: "这是最后一个",
|
||
|
|
value: "这是最后一个",
|
||
|
|
py: "zszhyg",
|
||
|
|
height: 25
|
||
|
|
}]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var map = BI.map(BI.makeArray(3, null), function (i, v) {
|
||
|
|
var val = i + "_" + BI.random(1, 100);
|
||
|
|
return {
|
||
|
|
type: "bi.single_select_item",
|
||
|
|
text: val,
|
||
|
|
value: val,
|
||
|
|
height: 25
|
||
|
|
}
|
||
|
|
});
|
||
|
|
popuplate(map);
|
||
|
|
|
||
|
|
}, 1000);
|
||
|
|
|
||
|
|
},
|
||
|
|
hasNext: function (options) {
|
||
|
|
return options.times < 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
buttons: [{
|
||
|
|
type: "bi.text_button",
|
||
|
|
text: "清空",
|
||
|
|
handler: function () {
|
||
|
|
dynamicCombo.setValue([]);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
type: "bi.text_button",
|
||
|
|
text: "确定",
|
||
|
|
handler: function () {
|
||
|
|
BI.Msg.alert("", dynamicCombo.getValue());
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
|
||
|
|
return BI.createWidget({
|
||
|
|
type: "bi.left",
|
||
|
|
items: [yearCombo, multiCombo, dynamicPopupCombo, dynamicCombo],
|
||
|
|
hgap: 20,
|
||
|
|
vgap: 20
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_createBottom: function () {
|
||
|
|
var combo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
el: {
|
||
|
|
type: "bi.text_button",
|
||
|
|
cls: "button-combo",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
type: "bi.button_group",
|
||
|
|
items: BI.createItems(BI.deepClone(this.years), {
|
||
|
|
type: "bi.single_select_item",
|
||
|
|
iconWidth: 25,
|
||
|
|
height: 25,
|
||
|
|
handler: function (v) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
chooseType: 1,
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.vertical"
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
combo.setValue(BI.deepClone(this.years)[0].value);
|
||
|
|
|
||
|
|
var childCombo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
el: {
|
||
|
|
type: "bi.text_button",
|
||
|
|
cls: "button-combo",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
type: "bi.button_tree",
|
||
|
|
items: BI.createItems(BI.deepClone(this.child), {
|
||
|
|
type: "bi.single_select_item",
|
||
|
|
height: 25,
|
||
|
|
handler: function (v) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.vertical"
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
childCombo.setValue(BI.deepClone(this.child)[0].children[0].value);
|
||
|
|
|
||
|
|
var monthCombo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "多层样式下拉框",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
items: BI.createItems(BI.deepClone(this.months), {
|
||
|
|
type: "bi.single_select_item",
|
||
|
|
cls: "button-combo",
|
||
|
|
handler: function (v) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.adaptive",
|
||
|
|
items: [{
|
||
|
|
el: {
|
||
|
|
type: "bi.table",
|
||
|
|
columns: 2,
|
||
|
|
rows: 6,
|
||
|
|
columnSize: [0.5, 'fill'],
|
||
|
|
rowSize: 30
|
||
|
|
},
|
||
|
|
left: 4,
|
||
|
|
right: 4,
|
||
|
|
top: 2,
|
||
|
|
bottom: 2
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
type: "bi.absolute",
|
||
|
|
el: {left: 4, top: 2, right: 4, bottom: 2}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
|
||
|
|
var yearCombo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
el: {
|
||
|
|
type: "bi.button",
|
||
|
|
text: "自定义控件",
|
||
|
|
height: 30
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
el: {
|
||
|
|
type: "bi.navigation",
|
||
|
|
direction: "bottom",
|
||
|
|
logic: {
|
||
|
|
dynamic: true
|
||
|
|
},
|
||
|
|
tab: {
|
||
|
|
height: 30,
|
||
|
|
items: [{
|
||
|
|
once: false,
|
||
|
|
text: "后退",
|
||
|
|
value: -1,
|
||
|
|
cls: "mvc-button layout-bg3"
|
||
|
|
}, {
|
||
|
|
once: false,
|
||
|
|
text: "前进",
|
||
|
|
value: 1,
|
||
|
|
cls: "mvc-button layout-bg4"
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
cardCreator: function (v) {
|
||
|
|
return BI.createWidget({
|
||
|
|
type: "bi.text_button",
|
||
|
|
whiteSpace: "normal",
|
||
|
|
text: new Date().getFullYear() + v
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
width: 200
|
||
|
|
});
|
||
|
|
|
||
|
|
return BI.createWidget({
|
||
|
|
type: "bi.left",
|
||
|
|
items: [combo, childCombo, monthCombo, yearCombo],
|
||
|
|
hgap: 20,
|
||
|
|
vgap: 20
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
return {
|
||
|
|
type: "bi.grid",
|
||
|
|
columns: 1,
|
||
|
|
rows: 2,
|
||
|
|
items: [{
|
||
|
|
column: 0,
|
||
|
|
row: 0,
|
||
|
|
el: this._createTop()
|
||
|
|
}, {
|
||
|
|
column: 0,
|
||
|
|
row: 1,
|
||
|
|
el: this._createBottom()
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.shortcut("demo.combo", Demo.Func);
|