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.
5751 lines
178 KiB
5751 lines
178 KiB
7 years ago
|
Demo = {
|
||
|
version: 1.0
|
||
|
};
|
||
|
|
||
|
BI.i18n = {
|
||
|
"BI-Basic_OK": "确定"
|
||
|
};
|
||
|
|
||
|
BI.servletURL = "dist/";
|
||
|
BI.resourceURL = "dist/resource/";
|
||
|
BI.i18n = {};$(function () {
|
||
|
var ref;
|
||
|
BI.createWidget({
|
||
|
type: "demo.main",
|
||
|
ref: function (_ref) {
|
||
|
console.log(_ref);
|
||
|
ref = _ref;
|
||
|
},
|
||
|
element: '#wrapper'
|
||
|
});
|
||
|
// ref.destroy();
|
||
|
});Demo.Button = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-button"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [
|
||
|
{
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '一般按钮',
|
||
|
level: 'common',
|
||
|
height: 30
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '表示成功状态按钮',
|
||
|
level: 'success',
|
||
|
height: 30
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '表示警告状态的按钮',
|
||
|
level: 'warning',
|
||
|
height: 30
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '表示忽略状态的按钮',
|
||
|
level: 'ignore',
|
||
|
height: 30
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '普通灰化按钮',
|
||
|
disabled: true,
|
||
|
level: 'success',
|
||
|
height: 30
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '忽略状态灰化按钮',
|
||
|
disabled: true,
|
||
|
level: 'ignore',
|
||
|
height: 30
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '带图标的按钮',
|
||
|
//level: 'ignore',
|
||
|
iconClass: "rename-font",
|
||
|
height: 30
|
||
|
}
|
||
|
}
|
||
|
];
|
||
|
BI.each(items, function (i, item) {
|
||
|
item.el.handler = function () {
|
||
|
BI.Msg.alert('按钮', this.options.text);
|
||
|
}
|
||
|
});
|
||
|
return {
|
||
|
type: "bi.left",
|
||
|
vgap: 200,
|
||
|
hgap: 20,
|
||
|
items: items
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.button", Demo.Button);Demo.Button = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-button"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [
|
||
|
{
|
||
|
el: {
|
||
|
type: 'bi.icon_button',
|
||
|
cls: "rename-font",
|
||
|
width: 20,
|
||
|
height: 20
|
||
|
}
|
||
|
}
|
||
|
];
|
||
|
return {
|
||
|
type: "bi.left",
|
||
|
vgap: 200,
|
||
|
hgap: 20,
|
||
|
items: items
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.icon_button", Demo.Button);Demo.Button = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-button"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [
|
||
|
{
|
||
|
el: {
|
||
|
type: 'bi.image_button',
|
||
|
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128",
|
||
|
width: 100,
|
||
|
height: 100
|
||
|
}
|
||
|
}
|
||
|
];
|
||
|
return {
|
||
|
type: "bi.left",
|
||
|
vgap: 200,
|
||
|
hgap: 20,
|
||
|
items: items
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.image_button", Demo.Button);Demo.Button = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-button"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [
|
||
|
{
|
||
|
el: {
|
||
|
type: 'bi.text_button',
|
||
|
text: '文字按钮',
|
||
|
height: 30
|
||
|
}
|
||
|
}
|
||
|
];
|
||
|
return {
|
||
|
type: "bi.left",
|
||
|
vgap: 200,
|
||
|
hgap: 20,
|
||
|
items: items
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.text_button", Demo.Button);Demo.Label = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-label"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg6",
|
||
|
text: "这是一个label控件,默认居中",
|
||
|
textAlign: "center"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg1",
|
||
|
text: "这是一个label控件, 高度为30,默认居中",
|
||
|
textAlign: "center",
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg3",
|
||
|
text: "这是一个label控件,使用水平居左",
|
||
|
textAlign: "left",
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg2",
|
||
|
text: "这是一个label控件,whiteSpace是normal,不设置高度,为了演示这个是真的是normal的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
|
||
|
whiteSpace: "normal"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg5",
|
||
|
text: "这是一个label控件,whiteSpace是默认的nowrap,不设置高度,为了演示这个是真的是nowrap的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg7",
|
||
|
text: "这是一个label控件,whiteSpace是默认的nowrap,高度为30,为了演示这个是真的是nowrap的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg3",
|
||
|
text: "这是一个label控件,whiteSpace设置为normal,高度为60,为了演示这个是真的是normal的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
|
||
|
whiteSpace: "normal",
|
||
|
height: 60
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg5",
|
||
|
text: "这是一个label控件,whiteSpace设置为normal,textHeight控制text的lineHeight,这样可以实现换行效果,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
|
||
|
whiteSpace: "normal",
|
||
|
textHeight: 30,
|
||
|
height: 60
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg1",
|
||
|
text: "这是一个label控件,whiteSpace设置为nowrap,textWidth控制text的width",
|
||
|
textWidth: 200,
|
||
|
height: 60
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg8",
|
||
|
text: "这是一个label控件,whiteSpace设置为normal,textWidth控制text的width,这样可以实现换行效果,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
|
||
|
whiteSpace: "normal",
|
||
|
textWidth: 200,
|
||
|
height: 60
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg7",
|
||
|
text: "whiteSpace为默认的nowrap,高度设置为60,宽度设置为300",
|
||
|
height: 60,
|
||
|
width: 300
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg6",
|
||
|
text: "设置了宽度300,高度60,whiteSpace设置为normal",
|
||
|
whiteSpace: "normal",
|
||
|
width: 300,
|
||
|
height: 60
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg8",
|
||
|
text: "textWidth设置为200,textHeight设置为30,width设置300,凑点字数看效果",
|
||
|
width: 300,
|
||
|
textWidth: 200,
|
||
|
textHeight: 30,
|
||
|
height: 60,
|
||
|
whiteSpace: "normal"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg1",
|
||
|
text: "textWidth设置为200,width设置300,看下水平居左的换行效果",
|
||
|
textAlign: "left",
|
||
|
width: 300,
|
||
|
textWidth: 200,
|
||
|
textHeight: 30,
|
||
|
height: 60,
|
||
|
whiteSpace: "normal"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg2",
|
||
|
text: "使用默认的nowrap,再去设置textHeight,只会有一行的效果",
|
||
|
textAlign: "left",
|
||
|
width: 300,
|
||
|
textWidth: 200,
|
||
|
textHeight: 30,
|
||
|
height: 60
|
||
|
}, {
|
||
|
type: "bi.left",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg3",
|
||
|
text: "在float布局中自适应的,不设高度和宽度,文字多长这个就有多长"
|
||
|
}],
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.left",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg4",
|
||
|
text: "在float布局中自适应的,设置了宽度200,后面还有",
|
||
|
width: 200
|
||
|
}],
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.left",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "在float布局中自适应的,设置了高度,文字多长这个就有多长",
|
||
|
cls: "layout-bg5",
|
||
|
height: 30
|
||
|
}],
|
||
|
height: 30
|
||
|
}],
|
||
|
hgap: 300,
|
||
|
vgap: 20
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.label", Demo.Label);Demo.Message = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-bubble"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.center_adapt",
|
||
|
items : [
|
||
|
{
|
||
|
el : {
|
||
|
type : 'bi.button',
|
||
|
text : '点击我弹出一个消息框',
|
||
|
height : 30,
|
||
|
handler : function() {
|
||
|
BI.Msg.alert('测试消息框', '我是测试消息框的内容');
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.message", Demo.Message);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "默认的分页"
|
||
|
}, {
|
||
|
type: "bi.pager",
|
||
|
height: 50,
|
||
|
pages: 18,
|
||
|
groups: 5,
|
||
|
curr: 6,
|
||
|
first: "首页",
|
||
|
last: "尾页"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "显示上一页、下一页、首页、尾页"
|
||
|
}, {
|
||
|
type: "bi.pager",
|
||
|
dynamicShow: false,
|
||
|
height: 50,
|
||
|
pages: 18,
|
||
|
groups: 5,
|
||
|
curr: 1,
|
||
|
first: "首页>",
|
||
|
last: "<尾页"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "显示上一页、下一页"
|
||
|
}, {
|
||
|
type: "bi.pager",
|
||
|
dynamicShow: false,
|
||
|
dynamicShowFirstLast: true,
|
||
|
height: 50,
|
||
|
pages: 18,
|
||
|
groups: 5,
|
||
|
curr: 1,
|
||
|
first: "首页>",
|
||
|
last: "<尾页"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "自定义上一页、下一页"
|
||
|
}, {
|
||
|
type: "bi.pager",
|
||
|
dynamicShow: false,
|
||
|
height: 50,
|
||
|
pages: 18,
|
||
|
groups: 5,
|
||
|
curr: 6,
|
||
|
prev: {
|
||
|
type: "bi.button",
|
||
|
cls: "",
|
||
|
text: "上一页",
|
||
|
value: "prev",
|
||
|
once: false,
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
|
||
|
}
|
||
|
},
|
||
|
next: {
|
||
|
type: "bi.button",
|
||
|
cls: "",
|
||
|
text: "下一页",
|
||
|
value: "next",
|
||
|
once: false,
|
||
|
handler: function () {
|
||
|
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "不知道总页数的情况(测试条件 1<=page<=3)"
|
||
|
}, {
|
||
|
type: "bi.pager",
|
||
|
dynamicShow: false,
|
||
|
height: 50,
|
||
|
pages: false,
|
||
|
curr: 1,
|
||
|
prev: {
|
||
|
type: "bi.button",
|
||
|
cls: "",
|
||
|
text: "上一页",
|
||
|
value: "prev",
|
||
|
once: false,
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
|
||
|
}
|
||
|
},
|
||
|
next: {
|
||
|
type: "bi.button",
|
||
|
cls: "",
|
||
|
text: "下一页",
|
||
|
value: "next",
|
||
|
once: false,
|
||
|
handler: function () {
|
||
|
|
||
|
}
|
||
|
},
|
||
|
hasPrev: function (v) {
|
||
|
return v > 1;
|
||
|
},
|
||
|
hasNext: function (v) {
|
||
|
return v < 3;
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.pager", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var svg = BI.createWidget({
|
||
|
type: "bi.svg",
|
||
|
width: 500,
|
||
|
height: 600
|
||
|
});
|
||
|
|
||
|
var circle = svg.circle(100, 100, 10);
|
||
|
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
|
||
|
|
||
|
var el = svg.rect(10, 200, 300, 200);
|
||
|
el.transform("t100,100r45t-100,0");
|
||
|
|
||
|
svg.path("M10,10L50,50M50,10L10,50")
|
||
|
.attr({stroke: "red"});
|
||
|
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: svg,
|
||
|
left: 100,
|
||
|
top: 50
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.svg", Demo.Func);Demo.CodeEditor = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-editor"
|
||
|
},
|
||
|
render: function () {
|
||
|
var editor = BI.createWidget({
|
||
|
type: "bi.code_editor",
|
||
|
cls: "mvc-border",
|
||
|
width: 600,
|
||
|
height: 400
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.vertical",
|
||
|
element: this,
|
||
|
hgap: 30,
|
||
|
vgap: 20,
|
||
|
items: [editor, {
|
||
|
type: "bi.button",
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.toast(JSON.stringify(editor.getValue()));
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.button",
|
||
|
text: "setValue",
|
||
|
handler: function () {
|
||
|
editor.setValue("测试数据");
|
||
|
}
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.code_editor", Demo.CodeEditor);Demo.Editor = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-editor"
|
||
|
},
|
||
|
render: function () {
|
||
|
var editor1 = BI.createWidget({
|
||
|
type: "bi.editor",
|
||
|
cls: "mvc-border",
|
||
|
watermark: "alert信息显示在下面",
|
||
|
errorText: "字段不可重名!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!",
|
||
|
width: 200,
|
||
|
height: 30
|
||
|
});
|
||
|
editor1.on(BI.Editor.EVENT_ENTER, function () {
|
||
|
editor1.blur();
|
||
|
});
|
||
|
var editor2 = BI.createWidget({
|
||
|
type: "bi.editor",
|
||
|
cls: "mvc-border",
|
||
|
watermark: "输入'a'会有错误信息",
|
||
|
disabled: true,
|
||
|
errorText: "字段不可重名",
|
||
|
validationChecker: function (v) {
|
||
|
if (v == "a") {
|
||
|
return false;
|
||
|
}
|
||
|
return true;
|
||
|
},
|
||
|
allowBlank: true,
|
||
|
width: 200,
|
||
|
height: 30
|
||
|
});
|
||
|
var editor3 = BI.createWidget({
|
||
|
type: "bi.editor",
|
||
|
cls: "mvc-border",
|
||
|
watermark: "输入'a'会有错误信息且回车键不能退出编辑",
|
||
|
errorText: "字段不可重名",
|
||
|
validationChecker: function (v) {
|
||
|
if (v == "a") {
|
||
|
return false;
|
||
|
}
|
||
|
return true;
|
||
|
},
|
||
|
quitChecker: function (v) {
|
||
|
return false;
|
||
|
},
|
||
|
allowBlank: true,
|
||
|
width: 300,
|
||
|
height: 30
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: editor1,
|
||
|
left: 0,
|
||
|
top: 0
|
||
|
}, {
|
||
|
el: editor2,
|
||
|
left: 250,
|
||
|
top: 30
|
||
|
}, {
|
||
|
el: editor3,
|
||
|
left: 500,
|
||
|
top: 60
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "disable",
|
||
|
handler: function () {
|
||
|
editor1.setEnable(false);
|
||
|
editor2.setEnable(false);
|
||
|
editor3.setEnable(false);
|
||
|
},
|
||
|
height: 30
|
||
|
},
|
||
|
left: 100,
|
||
|
bottom: 60
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "enable",
|
||
|
handler: function () {
|
||
|
editor1.setEnable(true);
|
||
|
editor2.setEnable(true);
|
||
|
editor3.setEnable(true);
|
||
|
},
|
||
|
height: 30
|
||
|
},
|
||
|
left: 200,
|
||
|
bottom: 60
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.editor", Demo.Editor);Demo.CodeEditor = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-editor"
|
||
|
},
|
||
|
render: function () {
|
||
|
this.formula = BI.createWidget({
|
||
|
type : 'bi.formula_editor',
|
||
|
width : 300,
|
||
|
height : 200,
|
||
|
value : 'SUM(C5, 16, 26)'
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.left",
|
||
|
element: this,
|
||
|
items: [this.formula],
|
||
|
hgap: 20,
|
||
|
vgap: 20
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.formula_editor", Demo.CodeEditor);Demo.CodeEditor = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-editor"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.adaptive",
|
||
|
cls: "layout-bg1",
|
||
|
items: [{
|
||
|
type: "bi.multifile_editor",
|
||
|
width: 400,
|
||
|
height: 300
|
||
|
}],
|
||
|
width: 400,
|
||
|
height: 300
|
||
|
},
|
||
|
top: 50,
|
||
|
left: 50
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.CodeEditor = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-editor"
|
||
|
},
|
||
|
render: function () {
|
||
|
var editor = BI.createWidget({
|
||
|
type: "bi.textarea_editor",
|
||
|
cls: "mvc-border",
|
||
|
width: 600,
|
||
|
height: 400
|
||
|
});
|
||
|
editor.on(BI.TextAreaEditor.EVENT_FOCUS, function () {
|
||
|
BI.Msg.toast("Focus");
|
||
|
});
|
||
|
editor.on(BI.TextAreaEditor.EVENT_BLUR, function () {
|
||
|
BI.Msg.toast("Blur");
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.vertical",
|
||
|
element: this,
|
||
|
hgap: 30,
|
||
|
vgap: 20,
|
||
|
items: [editor, {
|
||
|
type: "bi.button",
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.toast(JSON.stringify(editor.getValue()));
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.button",
|
||
|
text: "setValue",
|
||
|
handler: function () {
|
||
|
editor.setValue("测试数据");
|
||
|
}
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.textarea_editor", Demo.CodeEditor);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [], header = [], columnSize = [];
|
||
|
|
||
|
var rowCount = 100, columnCount = 100;
|
||
|
for (var i = 0; i < 1; i++) {
|
||
|
header[i] = [];
|
||
|
for (var j = 0; j < columnCount; j++) {
|
||
|
header[i][j] = {
|
||
|
type: "bi.label",
|
||
|
text: "表头" + i + "-" + j
|
||
|
}
|
||
|
columnSize[j] = 100;
|
||
|
}
|
||
|
}
|
||
|
for (var i = 0; i < rowCount; i++) {
|
||
|
items[i] = [];
|
||
|
for (var j = 0; j < columnCount; j++) {
|
||
|
items[i][j] = {
|
||
|
type: "bi.label",
|
||
|
text: (i < 3 ? 0 : i) + "-" + j
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var table = BI.createWidget({
|
||
|
type: "bi.resizable_table",
|
||
|
el: {
|
||
|
type: "bi.collection_table"
|
||
|
},
|
||
|
width: 600,
|
||
|
height: 500,
|
||
|
isResizeAdapt: true,
|
||
|
isNeedResize: true,
|
||
|
isNeedMerge: true,
|
||
|
mergeCols: [0, 1],
|
||
|
mergeRule: function (col1, col2) {
|
||
|
return BI.isEqual(col1, col2);
|
||
|
},
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [0, 1],
|
||
|
columnSize: columnSize,
|
||
|
items: items,
|
||
|
header: header
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: table,
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.collection_table", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [], header = [], columnSize = [];
|
||
|
|
||
|
var rowCount = 100, columnCount = 100;
|
||
|
for (var i = 0; i < 1; i++) {
|
||
|
header[i] = [];
|
||
|
for (var j = 0; j < columnCount; j++) {
|
||
|
header[i][j] = {
|
||
|
type: "bi.label",
|
||
|
text: "表头" + i + "-" + j
|
||
|
}
|
||
|
columnSize[j] = 100;
|
||
|
}
|
||
|
}
|
||
|
for (var i = 0; i < rowCount; i++) {
|
||
|
items[i] = [];
|
||
|
for (var j = 0; j < columnCount; j++) {
|
||
|
items[i][j] = {
|
||
|
type: "bi.label",
|
||
|
text: (i < 3 ? 0 : i) + "-" + j
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var table = BI.createWidget({
|
||
|
type: "bi.resizable_table",
|
||
|
el: {
|
||
|
type: "bi.grid_table",
|
||
|
},
|
||
|
width: 600,
|
||
|
height: 500,
|
||
|
isResizeAdapt: true,
|
||
|
isNeedResize: true,
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [0, 1],
|
||
|
columnSize: columnSize,
|
||
|
items: items,
|
||
|
header: header
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: table,
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.grid_table", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [], header = [], columnSize = [];
|
||
|
|
||
|
var rowCount = 100, columnCount = 100;
|
||
|
for (var i = 0; i < 1; i++) {
|
||
|
header[i] = [];
|
||
|
for (var j = 0; j < columnCount; j++) {
|
||
|
header[i][j] = {
|
||
|
type: "bi.label",
|
||
|
text: "表头" + i + "-" + j
|
||
|
}
|
||
|
columnSize[j] = 100;
|
||
|
}
|
||
|
}
|
||
|
for (var i = 0; i < rowCount; i++) {
|
||
|
items[i] = [];
|
||
|
for (var j = 0; j < columnCount; j++) {
|
||
|
items[i][j] = {
|
||
|
type: "bi.label",
|
||
|
text: (i < 3 ? 0 : i) + "-" + j
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var table = BI.createWidget({
|
||
|
type: "bi.resizable_table",
|
||
|
el: {
|
||
|
type: "bi.grid_table",
|
||
|
},
|
||
|
width: 600,
|
||
|
height: 500,
|
||
|
isResizeAdapt: true,
|
||
|
isNeedResize: true,
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [0, 1],
|
||
|
columnSize: columnSize,
|
||
|
items: items,
|
||
|
header: header
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: table,
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.resizable_table", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [[{
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}], [{
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}], [{
|
||
|
text: "第三行第一列"
|
||
|
}, {
|
||
|
text: "第三行第二列"
|
||
|
}, {
|
||
|
text: "第三行第三列"
|
||
|
}], [{
|
||
|
text: "第四行第一列"
|
||
|
}, {
|
||
|
text: "第四行第二列"
|
||
|
}, {
|
||
|
text: "第四行第三列"
|
||
|
}], [{
|
||
|
text: "第五行第一列"
|
||
|
}, {
|
||
|
text: "第五行第二列"
|
||
|
}, {
|
||
|
text: "第五行第三列"
|
||
|
}], [{
|
||
|
text: "第六行第一列"
|
||
|
}, {
|
||
|
text: "第六行第二列"
|
||
|
}, {
|
||
|
text: "第六行第三列"
|
||
|
}], [{
|
||
|
text: "第七行第一列"
|
||
|
}, {
|
||
|
text: "第七行第二列"
|
||
|
}, {
|
||
|
text: "第七行第三列"
|
||
|
}], [{
|
||
|
text: "第八行第一列"
|
||
|
}, {
|
||
|
text: "第八行第二列"
|
||
|
}, {
|
||
|
text: "第八行第三列"
|
||
|
}], [{
|
||
|
text: "第九行第一列"
|
||
|
}, {
|
||
|
text: "第九行第二列"
|
||
|
}, {
|
||
|
text: "第九行第三列"
|
||
|
}], [{
|
||
|
text: "第十行第一列"
|
||
|
}, {
|
||
|
text: "第十行第二列"
|
||
|
}, {
|
||
|
text: "第十行第三列"
|
||
|
}], [{
|
||
|
text: "第十一行第一列"
|
||
|
}, {
|
||
|
text: "第十一行第二列"
|
||
|
}, {
|
||
|
text: "第十一行第三列"
|
||
|
}], [{
|
||
|
text: "第十二行第一列"
|
||
|
}, {
|
||
|
text: "第十二行第二列"
|
||
|
}, {
|
||
|
text: "第十二行第三列"
|
||
|
}], [{
|
||
|
text: "第十三行第一列"
|
||
|
}, {
|
||
|
text: "第十三行第二列"
|
||
|
}, {
|
||
|
text: "第十三行第三列"
|
||
|
}], [{
|
||
|
text: "第十四行第一列"
|
||
|
}, {
|
||
|
text: "第十四行第二列"
|
||
|
}, {
|
||
|
text: "第十四行第三列"
|
||
|
}], [{
|
||
|
text: "第十五行第一列"
|
||
|
}, {
|
||
|
text: "第十五行第二列"
|
||
|
}, {
|
||
|
text: "第十五行第三列"
|
||
|
}], [{
|
||
|
text: "第十六行第一列"
|
||
|
}, {
|
||
|
text: "第十六行第二列"
|
||
|
}, {
|
||
|
text: "第十六行第三列"
|
||
|
}], [{
|
||
|
text: "第十七行第一列"
|
||
|
}, {
|
||
|
text: "第十七行第二列"
|
||
|
}, {
|
||
|
text: "第十七行第三列"
|
||
|
}], [{
|
||
|
text: "第十八行第一列"
|
||
|
}, {
|
||
|
text: "第十八行第二列"
|
||
|
}, {
|
||
|
text: "第十八行第三列"
|
||
|
}]];
|
||
|
|
||
|
|
||
|
var items2 = [[{
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第二列"
|
||
|
}, {
|
||
|
text: "第一行第三列"
|
||
|
}, {
|
||
|
text: "第一行第四列"
|
||
|
}, {
|
||
|
text: "第一行第五列"
|
||
|
}], [{
|
||
|
text: "第二行第一列"
|
||
|
}, {
|
||
|
text: "第二行第二列"
|
||
|
}, {
|
||
|
text: "第二行第三列"
|
||
|
}, {
|
||
|
text: "第二行第四列"
|
||
|
}, {
|
||
|
text: "第二行第五列"
|
||
|
}], [{
|
||
|
text: "第二行第一列"
|
||
|
}, {
|
||
|
text: "第二行第二列"
|
||
|
}, {
|
||
|
text: "第三行第三列"
|
||
|
}, {
|
||
|
text: "第三行第四列"
|
||
|
}, {
|
||
|
text: "第三行第五列"
|
||
|
}], [{
|
||
|
text: "第二行第一列"
|
||
|
}, {
|
||
|
text: "第四行第二列"
|
||
|
}, {
|
||
|
text: "第四行第三列"
|
||
|
}, {
|
||
|
text: "第四行第四列"
|
||
|
}, {
|
||
|
text: "第四行第五列"
|
||
|
}]
|
||
|
|
||
|
|
||
|
, [{
|
||
|
text: "第五行第一列"
|
||
|
}, {
|
||
|
text: "第五行第一列"
|
||
|
}, {
|
||
|
text: "第五行第三列"
|
||
|
}, {
|
||
|
text: "第五行第四列"
|
||
|
}, {
|
||
|
text: "第五行第五列"
|
||
|
}], [{
|
||
|
text: "第六行第一列"
|
||
|
}, {
|
||
|
text: "第六行第一列"
|
||
|
}, {
|
||
|
text: "第六行第三列"
|
||
|
}, {
|
||
|
text: "第六行第四列"
|
||
|
}, {
|
||
|
text: "第六行第五列"
|
||
|
}], [{
|
||
|
text: "第七行第一列"
|
||
|
}, {
|
||
|
text: "第七行第二列"
|
||
|
}, {
|
||
|
text: "第七行第三列"
|
||
|
}, {
|
||
|
text: "第七行第四列"
|
||
|
}, {
|
||
|
text: "第七行第五列"
|
||
|
}], [{
|
||
|
text: "第八行第一列"
|
||
|
}, {
|
||
|
text: "第八行第二列"
|
||
|
}, {
|
||
|
text: "第八行第三列"
|
||
|
}, {
|
||
|
text: "第八行第四列"
|
||
|
}, {
|
||
|
text: "第八行第五列"
|
||
|
}], [{
|
||
|
text: "第九行第一列"
|
||
|
}, {
|
||
|
text: "第九行第二列"
|
||
|
}, {
|
||
|
text: "第九行第三列"
|
||
|
}, {
|
||
|
text: "第九行第四列"
|
||
|
}, {
|
||
|
text: "第九行第五列"
|
||
|
}], [{
|
||
|
text: "第十行第一列"
|
||
|
}, {
|
||
|
text: "第十行第二列"
|
||
|
}, {
|
||
|
text: "第十行第三列"
|
||
|
}, {
|
||
|
text: "第十行第四列"
|
||
|
}, {
|
||
|
text: "第十行第五列"
|
||
|
}], [{
|
||
|
text: "第十一行第一列"
|
||
|
}, {
|
||
|
text: "第十一行第二列"
|
||
|
}, {
|
||
|
text: "第十一行第三列"
|
||
|
}, {
|
||
|
text: "第十一行第四列"
|
||
|
}, {
|
||
|
text: "第十一行第五列"
|
||
|
}], [{
|
||
|
text: "第十二行第一列"
|
||
|
}, {
|
||
|
text: "第十二行第二列"
|
||
|
}, {
|
||
|
text: "第十二行第三列"
|
||
|
}, {
|
||
|
text: "第十二行第四列"
|
||
|
}, {
|
||
|
text: "第十二行第五列"
|
||
|
}], [{
|
||
|
text: "第十三行第一列"
|
||
|
}, {
|
||
|
text: "第十三行第二列"
|
||
|
}, {
|
||
|
text: "第十三行第三列"
|
||
|
}, {
|
||
|
text: "第十三行第四列"
|
||
|
}, {
|
||
|
text: "第十三行第五列"
|
||
|
}], [{
|
||
|
text: "第十四行第一列"
|
||
|
}, {
|
||
|
text: "第十四行第二列"
|
||
|
}, {
|
||
|
text: "第十四行第三列"
|
||
|
}, {
|
||
|
text: "第十四行第四列"
|
||
|
}, {
|
||
|
text: "第十四行第五列"
|
||
|
}]];
|
||
|
|
||
|
var header = [[{
|
||
|
text: "表头1"
|
||
|
}, {
|
||
|
text: "表头2"
|
||
|
}, {
|
||
|
text: "表头3"
|
||
|
}]];
|
||
|
|
||
|
var header2 = [[{
|
||
|
text: "表头1"
|
||
|
}, {
|
||
|
text: "表头2"
|
||
|
}, {
|
||
|
text: "表头3"
|
||
|
}, {
|
||
|
text: "表头4"
|
||
|
}, {
|
||
|
text: "表头5"
|
||
|
}]];
|
||
|
|
||
|
var table1 = BI.createWidget({
|
||
|
type: "bi.table_view",
|
||
|
isNeedResize: true,
|
||
|
isNeedMerge: true,
|
||
|
mergeCols: [0, 1],
|
||
|
columnSize: [100, 200, 300],
|
||
|
items: items,
|
||
|
header: header
|
||
|
});
|
||
|
var table2 = BI.createWidget({
|
||
|
type: "bi.table_view",
|
||
|
isNeedMerge: true,
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [0, 1],
|
||
|
mergeCols: [0, 1],
|
||
|
columnSize: [100, 200, 300, 400, 500],
|
||
|
items: items2,
|
||
|
header: header2
|
||
|
});
|
||
|
var table3 = BI.createWidget({
|
||
|
type: "bi.table_view",
|
||
|
isNeedMerge: true,
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [4],
|
||
|
mergeCols: [0, 1],
|
||
|
columnSize: [100, 200, 300, 400, 100],
|
||
|
items: items2,
|
||
|
header: header2
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.grid",
|
||
|
columns: 2,
|
||
|
rows: 2,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: table1
|
||
|
}, {
|
||
|
column: 1,
|
||
|
row: 0,
|
||
|
el: table2
|
||
|
}, {
|
||
|
column: 0,
|
||
|
row: 1,
|
||
|
el: table3
|
||
|
}, {
|
||
|
column: 1,
|
||
|
row: 1,
|
||
|
el: {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.button",
|
||
|
text: "第一个表setColumnSize([300, 200, 100])",
|
||
|
handler: function () {
|
||
|
table1.setColumnSize([300, 200, 100]);
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.button",
|
||
|
text: "第二个表setColumnSize([50, 100, 150, 200, 250])",
|
||
|
handler: function () {
|
||
|
table2.setColumnSize([50, 100, 150, 200, 250]);
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.button",
|
||
|
text: "第三个表setColumnSize([50, 100, 150, 200, 50])",
|
||
|
handler: function () {
|
||
|
table3.setColumnSize([50, 100, 150, 200, 50]);
|
||
|
}
|
||
|
}],
|
||
|
vgap: 10
|
||
|
}
|
||
|
}]
|
||
|
},
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-bubble"
|
||
|
},
|
||
|
render: function () {
|
||
|
var btns = [];
|
||
|
var items = [
|
||
|
{
|
||
|
el: {
|
||
|
ref: function (_ref) {
|
||
|
btns.push(_ref);
|
||
|
},
|
||
|
type: 'bi.button',
|
||
|
text: 'bubble测试',
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
BI.Bubbles.show("singleBubble1", "bubble测试", this);
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
ref: function (_ref) {
|
||
|
btns.push(_ref);
|
||
|
},
|
||
|
type: 'bi.button',
|
||
|
text: 'bubble测试(居中显示)',
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
BI.Bubbles.show("singleBubble2", "bubble测试", this, {
|
||
|
offsetStyle: "center"
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
ref: function (_ref) {
|
||
|
btns.push(_ref);
|
||
|
},
|
||
|
type: 'bi.button',
|
||
|
text: 'bubble测试(右边显示)',
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
BI.Bubbles.show("singleBubble3", "bubble测试", this, {
|
||
|
offsetStyle: "right"
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
];
|
||
|
return {
|
||
|
type: "bi.left",
|
||
|
vgap: 200,
|
||
|
hgap: 20,
|
||
|
items: items
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.bubble", Demo.Bubble);Demo.Title = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-title"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg1",
|
||
|
height: 50,
|
||
|
title: "title提示",
|
||
|
text: "移上去有title提示",
|
||
|
textAlign: "center"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg6",
|
||
|
height: 50,
|
||
|
disabled: true,
|
||
|
warningTitle: "title错误提示",
|
||
|
text: "移上去有title错误提示",
|
||
|
textAlign: "center"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg2",
|
||
|
height: 50,
|
||
|
disabled: true,
|
||
|
tipType: "success",
|
||
|
title: "自定义title提示效果",
|
||
|
warningTitle: "自定义title提示效果",
|
||
|
text: "自定义title提示效果",
|
||
|
textAlign: "center"
|
||
|
}],
|
||
|
hgap: 300,
|
||
|
vgap: 20
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.title", Demo.Title);Demo.Toast = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-toast"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [
|
||
|
{
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '简单Toast测试',
|
||
|
height : 30,
|
||
|
handler: function(){
|
||
|
BI.Msg.toast("这是一条简单的数据");
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '很长的Toast测试',
|
||
|
height : 30,
|
||
|
handler: function(){
|
||
|
BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据")
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '非常长的Toast测试',
|
||
|
height : 30,
|
||
|
handler: function(){
|
||
|
BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据")
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.button',
|
||
|
text: '错误提示Toast测试',
|
||
|
level: "warning",
|
||
|
height : 30,
|
||
|
handler: function(){
|
||
|
BI.Msg.toast("错误提示Toast测试", "warning");
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
];
|
||
|
BI.createWidget({
|
||
|
type: "bi.left",
|
||
|
element: this,
|
||
|
vgap : 200,
|
||
|
hgap : 20,
|
||
|
items: items
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.toast", Demo.Toast);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.part_tree", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.sync_tree", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
_createDefaultTree: function(){
|
||
|
var tree = BI.createWidget({
|
||
|
type: "bi.tree_view"
|
||
|
});
|
||
|
tree.initTree([
|
||
|
{"id":1, "pId":0, "text":"test1", open:true},
|
||
|
{"id":11, "pId":1, "text":"test11"},
|
||
|
{"id":12, "pId":1, "text":"test12"},
|
||
|
{"id":111, "pId":11, "text":"test111"},
|
||
|
{"id":2, "pId":0, "text":"test2", open:true},
|
||
|
{"id":21, "pId":2, "text":"test21"},
|
||
|
{"id":22, "pId":2, "text":"test22"}
|
||
|
])
|
||
|
return tree;
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
BI.createWidget({
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 1,
|
||
|
element: this,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.vtape",
|
||
|
items: [
|
||
|
{
|
||
|
el: this._createDefaultTree()
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: 'tree.initTree([{"id":1, "pId":0, "text":"test1", open:true},{"id":11, "pId":1, "text":"test11"},{"id":12, "pId":1, "text":"test12"},{"id":111, "pId":11, "text":"test111"}])',
|
||
|
whiteSpace: "normal"
|
||
|
},
|
||
|
height: 50
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.tree_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
_createNav: function(v){
|
||
|
var m = this.MONTH, y = this.YEAR;
|
||
|
m += v;
|
||
|
while(m < 0){
|
||
|
y--;
|
||
|
m += 12;
|
||
|
}
|
||
|
while(m > 11){
|
||
|
y++;
|
||
|
m -= 12;
|
||
|
}
|
||
|
var calendar = BI.createWidget({
|
||
|
type: "bi.calendar",
|
||
|
logic: {
|
||
|
dynamic: false
|
||
|
},
|
||
|
year: y,
|
||
|
month: m,
|
||
|
day: this.DAY
|
||
|
})
|
||
|
calendar.setValue(this.selectedTime);
|
||
|
return calendar;
|
||
|
},
|
||
|
|
||
|
_stringfyTimeObject: function(timeOb){
|
||
|
return timeOb.year + "-" + (timeOb.month + 1) + "-" + timeOb.day;
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
var combo1 = BI.createWidget({
|
||
|
type: "bi.bubble_combo",
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "测试",
|
||
|
height: 25
|
||
|
},
|
||
|
popup: {
|
||
|
el: {
|
||
|
type: "bi.button_group",
|
||
|
items: BI.makeArray(100, {
|
||
|
type: "bi.text_item",
|
||
|
height: 25,
|
||
|
text: "item"
|
||
|
}),
|
||
|
layouts: [{
|
||
|
type: "bi.vertical"
|
||
|
}]
|
||
|
},
|
||
|
maxHeight: 200
|
||
|
}
|
||
|
})
|
||
|
var combo2 = BI.createWidget({
|
||
|
type: "bi.bubble_combo",
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "测试",
|
||
|
height: 25
|
||
|
},
|
||
|
popup: {
|
||
|
type: "bi.bubble_bar_popup_view",
|
||
|
el: {
|
||
|
type: "bi.button_group",
|
||
|
items: BI.makeArray(100, {
|
||
|
type: "bi.text_item",
|
||
|
height: 25,
|
||
|
text: "item"
|
||
|
}),
|
||
|
layouts: [{
|
||
|
type: "bi.vertical"
|
||
|
}]
|
||
|
},
|
||
|
maxHeight: 200,
|
||
|
minWidth: 600
|
||
|
}
|
||
|
})
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: combo1,
|
||
|
left: 100,
|
||
|
top: 100
|
||
|
}, {
|
||
|
el: combo2,
|
||
|
left: 100,
|
||
|
bottom: 100
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.bubble_combo", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
_createNav: function(v){
|
||
|
var m = this.MONTH, y = this.YEAR;
|
||
|
m += v;
|
||
|
while(m < 0){
|
||
|
y--;
|
||
|
m += 12;
|
||
|
}
|
||
|
while(m > 11){
|
||
|
y++;
|
||
|
m -= 12;
|
||
|
}
|
||
|
var calendar = BI.createWidget({
|
||
|
type: "bi.calendar",
|
||
|
logic: {
|
||
|
dynamic: false
|
||
|
},
|
||
|
year: y,
|
||
|
month: m,
|
||
|
day: this.DAY
|
||
|
})
|
||
|
calendar.setValue(this.selectedTime);
|
||
|
return calendar;
|
||
|
},
|
||
|
|
||
|
_stringfyTimeObject: function(timeOb){
|
||
|
return timeOb.year + "-" + (timeOb.month + 1) + "-" + timeOb.day;
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this, d = new Date();
|
||
|
this.YEAR = d.getFullYear();
|
||
|
this.MONTH = d.getMonth();
|
||
|
this.DAY = d.getDate();
|
||
|
|
||
|
this.selectedTime = {
|
||
|
year: this.YEAR,
|
||
|
month: this.MONTH,
|
||
|
day: this.DAY
|
||
|
};
|
||
|
|
||
|
var tip = BI.createWidget({
|
||
|
type: "bi.label"
|
||
|
});
|
||
|
|
||
|
var nav = BI.createWidget({
|
||
|
type: "bi.navigation",
|
||
|
element: this,
|
||
|
tab: {
|
||
|
height: 30,
|
||
|
items: [{
|
||
|
once: false,
|
||
|
text: "后退",
|
||
|
value: -1,
|
||
|
cls: "mvc-button layout-bg3"
|
||
|
},tip, {
|
||
|
once: false,
|
||
|
text: "前进",
|
||
|
value: 1,
|
||
|
cls: "mvc-button layout-bg4"
|
||
|
}]
|
||
|
},
|
||
|
cardCreator: BI.bind(this._createNav, this),
|
||
|
|
||
|
afterCardCreated: function(){
|
||
|
|
||
|
},
|
||
|
|
||
|
afterCardShow: function(){
|
||
|
this.setValue(self.selectedTime);
|
||
|
}
|
||
|
})
|
||
|
|
||
|
nav.on(BI.Navigation.EVENT_CHANGE, function(){
|
||
|
self.selectedTime = nav.getValue();
|
||
|
tip.setText(self._stringfyTimeObject(self.selectedTime));
|
||
|
});
|
||
|
tip.setText(this._stringfyTimeObject(this.selectedTime));
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.calendar", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.color_chooser",
|
||
|
width: 30,
|
||
|
height: 30
|
||
|
},
|
||
|
left: 100,
|
||
|
top: 250
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.color_chooser", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var canvas = BI.createWidget({
|
||
|
type: "bi.complex_canvas",
|
||
|
width: 500,
|
||
|
height: 600
|
||
|
});
|
||
|
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, {
|
||
|
offset: 20,
|
||
|
strokeStyle: "red",
|
||
|
lineWidth: 2
|
||
|
});
|
||
|
|
||
|
canvas.branch(220, 155, 120, 110, 150, 200, {
|
||
|
offset: 40
|
||
|
});
|
||
|
|
||
|
canvas.stroke();
|
||
|
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: canvas,
|
||
|
left: 100,
|
||
|
top: 50
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.complex_canvas", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var editor = BI.createWidget({
|
||
|
type: "bi.text_editor",
|
||
|
width: 200,
|
||
|
height: 30,
|
||
|
value: "这是复制的内容"
|
||
|
});
|
||
|
var zclip = BI.createWidget({
|
||
|
type: 'bi.zero_clip',
|
||
|
width: 100,
|
||
|
height: 100,
|
||
|
cls: 'layout-bg1',
|
||
|
copy: function () {
|
||
|
return editor.getValue();
|
||
|
},
|
||
|
|
||
|
afterCopy: function () {
|
||
|
BI.Msg.toast(editor.getValue());
|
||
|
}
|
||
|
});
|
||
|
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: editor,
|
||
|
left: 100,
|
||
|
top: 50,
|
||
|
}, {
|
||
|
el: zclip,
|
||
|
left: 100,
|
||
|
top: 100
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.zclip", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var relation = BI.createWidget({
|
||
|
type: "bi.branch_relation",
|
||
|
items: [
|
||
|
{
|
||
|
id: -1,
|
||
|
value: "根目录",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 1,
|
||
|
pId: -1,
|
||
|
value: "第一级目录1",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 11,
|
||
|
pId: 1,
|
||
|
value: "第二级文件1",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 12,
|
||
|
pId: 1,
|
||
|
value: "第二级目录1",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 121,
|
||
|
pId: 12,
|
||
|
value: "第三级目录1",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 122,
|
||
|
pId: 12,
|
||
|
value: "第三级文件1",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 1211,
|
||
|
pId: 121,
|
||
|
value: "第四级目录",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 12111,
|
||
|
pId: 1211,
|
||
|
value: "第五级文件1",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 2,
|
||
|
pId: -1,
|
||
|
value: "第一级目录2",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 21,
|
||
|
pId: 2,
|
||
|
value: "第二级目录2",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 22,
|
||
|
pId: 2,
|
||
|
value: "第二级文件2",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 211,
|
||
|
pId: 21,
|
||
|
value: "第三级目录2",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 212,
|
||
|
pId: 21,
|
||
|
value: "第三级文件2",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
},
|
||
|
{
|
||
|
id: 2111,
|
||
|
pId: 211,
|
||
|
value: "第四级文件2",
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
width: 180,
|
||
|
height: 100
|
||
|
}
|
||
|
],
|
||
|
|
||
|
direction: BI.Direction.Right,
|
||
|
align: BI.HorizontalAlign.Right,
|
||
|
|
||
|
centerOffset: -50
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.adaptive",
|
||
|
element: this,
|
||
|
items: [relation]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.branch_relation", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
_createBranchTree: function () {
|
||
|
var tree = BI.createWidget({
|
||
|
type: "bi.branch_tree",
|
||
|
items: [{
|
||
|
el: {
|
||
|
text: "且",
|
||
|
value: "且1",
|
||
|
cls: "layout-bg7"
|
||
|
},
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1",
|
||
|
value: "这里是一段文字1"
|
||
|
}, {
|
||
|
el: {
|
||
|
text: "或",
|
||
|
value: "或2",
|
||
|
cls: "layout-bg7"
|
||
|
},
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1435",
|
||
|
value: "这里是一段文字1435"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1xx",
|
||
|
value: "这里是一段文字1xx"
|
||
|
}, {
|
||
|
el: {
|
||
|
text: "且",
|
||
|
value: "且3",
|
||
|
cls: "layout-bg7"
|
||
|
},
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "可以理解为一个条件",
|
||
|
value: "可以理解为一个条件"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "可以理解为一个条件v",
|
||
|
value: "可以理解为一个条件v"
|
||
|
}]
|
||
|
}]
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1xa",
|
||
|
value: "这里是一段文字1xa"
|
||
|
}]
|
||
|
}]
|
||
|
});
|
||
|
return tree;
|
||
|
},
|
||
|
|
||
|
_createBranchMapTree: function () {
|
||
|
var tree = BI.createWidget({
|
||
|
type: "bi.branch_tree",
|
||
|
el: {
|
||
|
type: "bi.virtual_group"
|
||
|
},
|
||
|
items: [{
|
||
|
text: "且",
|
||
|
value: "且1",
|
||
|
cls: "layout-bg7",
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1",
|
||
|
value: "这里是一段文字1"
|
||
|
}, {
|
||
|
text: "或",
|
||
|
value: "或2",
|
||
|
cls: "layout-bg7",
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1435",
|
||
|
value: "这里是一段文字1435"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1xx",
|
||
|
value: "这里是一段文字1xx"
|
||
|
}, {
|
||
|
text: "且",
|
||
|
value: "且3",
|
||
|
cls: "layout-bg7",
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "可以理解为一个条件",
|
||
|
value: "可以理解为一个条件"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "可以理解为一个条件v",
|
||
|
value: "可以理解为一个条件v"
|
||
|
}]
|
||
|
}]
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1xa",
|
||
|
value: "这里是一段文字1xa"
|
||
|
}]
|
||
|
}]
|
||
|
});
|
||
|
return tree;
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var tree = this._createBranchTree();
|
||
|
var mapTree = this._createBranchMapTree();
|
||
|
|
||
|
function getItems() {
|
||
|
return [{
|
||
|
text: "且",
|
||
|
value: "且",
|
||
|
cls: "layout-bg7",
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字",
|
||
|
value: "这里是一段文字"
|
||
|
}, {
|
||
|
text: "或",
|
||
|
value: "或2",
|
||
|
cls: "layout-bg7",
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字",
|
||
|
value: "这里是一段文字"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字" ,
|
||
|
value: "这里是一段文字"
|
||
|
}, {
|
||
|
text: "且",
|
||
|
value: "且3",
|
||
|
cls: "layout-bg7",
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "可以理解为一个条件",
|
||
|
value: "可以理解为一个条件"
|
||
|
}]
|
||
|
}]
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1xa",
|
||
|
value: "这里是一段文字1xa"
|
||
|
}]
|
||
|
}];
|
||
|
}
|
||
|
|
||
|
BI.createWidget({
|
||
|
type: "bi.center",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
type: "bi.vtape",
|
||
|
items: [{
|
||
|
el: tree
|
||
|
}, {
|
||
|
height: 30,
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
height: 30,
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", tree.getValue());
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
}, {
|
||
|
type: "bi.vtape",
|
||
|
items: [{
|
||
|
el: mapTree
|
||
|
}, {
|
||
|
height: 30,
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
height: 30,
|
||
|
text: "populate",
|
||
|
handler: function () {
|
||
|
mapTree.populate(getItems());
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
height: 30,
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
height: 30,
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", mapTree.getValue());
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.branch_tree", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var tree = BI.createWidget({
|
||
|
type: "bi.display_tree",
|
||
|
element: this
|
||
|
});
|
||
|
|
||
|
tree.initTree([{
|
||
|
id: 1,
|
||
|
text: "第一项",
|
||
|
open: true
|
||
|
}, {
|
||
|
id: 2,
|
||
|
text: "第二项"
|
||
|
}, {
|
||
|
id: 11,
|
||
|
pId: 1,
|
||
|
text: "子项1(共2个)",
|
||
|
open: true
|
||
|
}, {
|
||
|
id: 111,
|
||
|
pId: 11,
|
||
|
text: "子子项1"
|
||
|
}, {
|
||
|
id: 112,
|
||
|
pId: 11,
|
||
|
text: "子子项2"
|
||
|
}, {
|
||
|
id: 12,
|
||
|
pId: 1,
|
||
|
text: "子项2"
|
||
|
}, {
|
||
|
id: 13,
|
||
|
pId: 1,
|
||
|
text: "子项3"
|
||
|
}]);
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.display_tree", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
_createHandStandBranchTree: function () {
|
||
|
var tree = BI.createWidget({
|
||
|
type: "bi.handstand_branch_tree",
|
||
|
expander: {},
|
||
|
el: {
|
||
|
layouts: [{
|
||
|
type: "bi.horizontal_adapt",
|
||
|
verticalAlign: BI.VerticalAlign.Top
|
||
|
}]
|
||
|
},
|
||
|
items: [{
|
||
|
el: {
|
||
|
text: "且",
|
||
|
value: "且1",
|
||
|
cls: "layout-bg7"
|
||
|
},
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1",
|
||
|
value: "这里是一段文字1"
|
||
|
}, {
|
||
|
el: {
|
||
|
text: "或",
|
||
|
value: "或2",
|
||
|
cls: "layout-bg7"
|
||
|
},
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1435",
|
||
|
value: "这里是一段文字1435"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1xx",
|
||
|
value: "这里是一段文字1xx"
|
||
|
}, {
|
||
|
el: {
|
||
|
text: "且",
|
||
|
value: "且3",
|
||
|
cls: "layout-bg7"
|
||
|
},
|
||
|
children: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "可以理解为一个条件",
|
||
|
value: "可以理解为一个条件"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "可以理解为一个条件v",
|
||
|
value: "可以理解为一个条件v"
|
||
|
}]
|
||
|
}]
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
textAlign: "left",
|
||
|
text: "这里是一段文字1xa",
|
||
|
value: "这里是一段文字1xa"
|
||
|
}]
|
||
|
}]
|
||
|
});
|
||
|
return tree;
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var tree = this._createHandStandBranchTree();
|
||
|
|
||
|
BI.createWidget({
|
||
|
type: "bi.center",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
type: "bi.vtape",
|
||
|
items: [{
|
||
|
el: tree
|
||
|
}, {
|
||
|
height: 30,
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
height: 30,
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", tree.getValue());
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.handstand_branch_tree", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var tree = BI.createWidget({
|
||
|
type: "bi.level_tree",
|
||
|
chooseType: 0,
|
||
|
items: [{
|
||
|
id: 1,
|
||
|
text: "第一项",
|
||
|
value: 1,
|
||
|
isParent: true
|
||
|
}, {
|
||
|
id: 2,
|
||
|
text: "第二项",
|
||
|
value: 2,
|
||
|
isParent: true
|
||
|
}, {
|
||
|
id: 3,
|
||
|
text: "第三项",
|
||
|
value: 1,
|
||
|
isParent: true,
|
||
|
open: true
|
||
|
}, {
|
||
|
id: 4,
|
||
|
text: "第四项",
|
||
|
value: 1
|
||
|
}, {
|
||
|
id: 11,
|
||
|
pId: 1,
|
||
|
text: "子项1",
|
||
|
value: 11
|
||
|
}, {
|
||
|
id: 12,
|
||
|
pId: 1,
|
||
|
text: "子项2",
|
||
|
value: 12
|
||
|
}, {
|
||
|
id: 13,
|
||
|
pId: 1,
|
||
|
text: "子项3",
|
||
|
value: 13
|
||
|
}, {
|
||
|
id: 21,
|
||
|
pId: 2,
|
||
|
text: "子项1",
|
||
|
value: 21
|
||
|
}, {
|
||
|
id: 31,
|
||
|
pId: 3,
|
||
|
text: "子项1",
|
||
|
value: 31
|
||
|
}, {
|
||
|
id: 32,
|
||
|
pId: 3,
|
||
|
text: "子项2",
|
||
|
value: 32
|
||
|
}, {
|
||
|
id: 33,
|
||
|
pId: 3,
|
||
|
text: "子项3",
|
||
|
value: 33
|
||
|
}]
|
||
|
})
|
||
|
|
||
|
BI.createWidget({
|
||
|
type: "bi.vtape",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: tree
|
||
|
}, {
|
||
|
height: 30,
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
height: 30,
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", tree.getValue());
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.level_tree", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
//value值一定要是字符串
|
||
|
var tree = BI.createWidget({
|
||
|
type: "bi.simple_tree",
|
||
|
items: []
|
||
|
});
|
||
|
|
||
|
tree.populate([{
|
||
|
id: 1,
|
||
|
text: "第一项",
|
||
|
value: "1"
|
||
|
}, {
|
||
|
id: 2,
|
||
|
text: "第二项",
|
||
|
value: "2"
|
||
|
}, {
|
||
|
id: 3,
|
||
|
text: "第三项",
|
||
|
value: "3",
|
||
|
open: true
|
||
|
}, {
|
||
|
id: 11,
|
||
|
pId: 1,
|
||
|
text: "子项1",
|
||
|
value: "11"
|
||
|
}, {
|
||
|
id: 12,
|
||
|
pId: 1,
|
||
|
text: "子项2",
|
||
|
value: "12"
|
||
|
}, {
|
||
|
id: 13,
|
||
|
pId: 1,
|
||
|
text: "子项3",
|
||
|
value: "13"
|
||
|
}, {
|
||
|
id: 31,
|
||
|
pId: 3,
|
||
|
text: "子项1",
|
||
|
value: "31"
|
||
|
}, {
|
||
|
id: 32,
|
||
|
pId: 3,
|
||
|
text: "子项2",
|
||
|
value: "32"
|
||
|
}, {
|
||
|
id: 33,
|
||
|
pId: 3,
|
||
|
text: "子项3",
|
||
|
value: "33"
|
||
|
}], "z");
|
||
|
BI.createWidget({
|
||
|
type: "bi.vtape",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: tree
|
||
|
}, {
|
||
|
height: 30,
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
height: 30,
|
||
|
text: "setValue(['31', '32', '33'])",
|
||
|
handler: function () {
|
||
|
tree.setValue(['31', '32', '33']);
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
height: 30,
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
height: 30,
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", JSON.stringify(tree.getValue()));
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.simple_tree", Demo.Func);Demo.Center = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-center"
|
||
|
},
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
return {
|
||
|
type: "bi.tab",
|
||
|
ref: function () {
|
||
|
self.tab = this;
|
||
|
},
|
||
|
defaultShowIndex: "demo.face",
|
||
|
cardCreator: function (v) {
|
||
|
return BI.createWidget({
|
||
|
type: v
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
|
||
|
setValue: function (v) {
|
||
|
this.tab.setSelect(v);
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.center", Demo.Center);Demo.TreeValueChooser = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-tree-value-chooser"
|
||
|
},
|
||
|
render: function () {
|
||
|
|
||
|
var tree = [];
|
||
|
for (var i = 0; i < 21; i++) {
|
||
|
tree.push({
|
||
|
value: i + "",
|
||
|
text: i + "",
|
||
|
id: i + "",
|
||
|
pId: null
|
||
|
});
|
||
|
for (var j = 0; j < 9; j++) {
|
||
|
tree.push({
|
||
|
value: i + "-" + j,
|
||
|
text: j + "",
|
||
|
id: i + "-" + j,
|
||
|
pId: i + ""
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
var widget = BI.createWidget({
|
||
|
type: "bi.tree_value_chooser_combo",
|
||
|
width: 300,
|
||
|
items: tree,
|
||
|
itemsCreator: function (op, callback) {
|
||
|
callback(tree);
|
||
|
}
|
||
|
});
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
hgap: 200,
|
||
|
vgap: 10,
|
||
|
items: [widget]
|
||
|
};
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.tree_value_chooser", Demo.TreeValueChooser);
|
||
|
Demo.ValueChooserCombo = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-value-chooser-combo"
|
||
|
},
|
||
|
render: function () {
|
||
|
var widget = BI.createWidget({
|
||
|
type: "bi.value_chooser_combo",
|
||
|
itemsCreator: function (op, callback) {
|
||
|
callback(BI.deepClone(Demo.MULTI_COMBO_ITEMS));
|
||
|
}
|
||
|
});
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
hgap: 200,
|
||
|
vgap: 10,
|
||
|
items: [widget]
|
||
|
};
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.value_chooser_combo", Demo.ValueChooserCombo);Demo.BASE_CONFIG = [{
|
||
|
id: 2,
|
||
|
text: "基础控件",
|
||
|
open: true
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "bi.label",
|
||
|
value: "demo.label"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "title提示",
|
||
|
value: "demo.title"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "气泡提示",
|
||
|
value: "demo.bubble"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "toast提示",
|
||
|
value: "demo.toast"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "message提示",
|
||
|
value: "demo.message"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
id: 201,
|
||
|
text: "button"
|
||
|
}, {
|
||
|
pId: 201,
|
||
|
text: "bi.button",
|
||
|
value: "demo.button"
|
||
|
}, {
|
||
|
pId: 201,
|
||
|
text: "bi.text_button",
|
||
|
value: "demo.text_button"
|
||
|
}, {
|
||
|
pId: 201,
|
||
|
text: "bi.icon_button",
|
||
|
value: "demo.icon_button"
|
||
|
}, {
|
||
|
pId: 201,
|
||
|
text: "bi.image_button",
|
||
|
value: "demo.image_button"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
id: 202,
|
||
|
text: "editor"
|
||
|
}, {
|
||
|
pId: 202,
|
||
|
text: "bi.editor",
|
||
|
value: "demo.editor"
|
||
|
}, {
|
||
|
pId: 202,
|
||
|
text: "bi.code_editor",
|
||
|
value: "demo.code_editor"
|
||
|
}, {
|
||
|
pId: 202,
|
||
|
text: "bi.multifile_editor",
|
||
|
value: "demo.multifile_editor"
|
||
|
}, {
|
||
|
pId: 202,
|
||
|
text: "bi.textarea_editor",
|
||
|
value: "demo.textarea_editor"
|
||
|
}, {
|
||
|
pId: 202,
|
||
|
text: "bi.formula_editor",
|
||
|
value: "demo.formula_editor"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
id: 203,
|
||
|
text: "tree"
|
||
|
}, {
|
||
|
pId: 203,
|
||
|
text: "bi.tree_view",
|
||
|
value: "demo.tree_view"
|
||
|
}, {
|
||
|
pId: 203,
|
||
|
text: "bi.sync_tree",
|
||
|
value: "demo.sync_tree"
|
||
|
}, {
|
||
|
pId: 203,
|
||
|
text: "bi.part_tree",
|
||
|
value: "demo.part_tree"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
id: 204,
|
||
|
text: "table"
|
||
|
}, {
|
||
|
pId: 204,
|
||
|
text: "bi.table_view",
|
||
|
value: "demo.table_view"
|
||
|
}, {
|
||
|
pId: 204,
|
||
|
text: "bi.grid_table",
|
||
|
value: "demo.grid_table"
|
||
|
}, {
|
||
|
pId: 204,
|
||
|
text: "bi.collection_table",
|
||
|
value: "demo.collection_table"
|
||
|
}, {
|
||
|
pId: 204,
|
||
|
text: "bi.resizable_table",
|
||
|
value: "demo.resizable_table"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "bi.canvas",
|
||
|
value: "demo.canvas"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "bi.pager",
|
||
|
value: "demo.pager"
|
||
|
}, {
|
||
|
pId: 2,
|
||
|
text: "bi.svg",
|
||
|
value: "demo.svg"
|
||
|
}];Demo.CASE_CONFIG = [{
|
||
|
id: 3,
|
||
|
text: "实例控件",
|
||
|
open: true,
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
id: 301,
|
||
|
text: "editors"
|
||
|
}, {
|
||
|
pId: 301,
|
||
|
text: "bi.record_editor",
|
||
|
value: "demo.record_editor"
|
||
|
}, {
|
||
|
pId: 301,
|
||
|
text: "bi.shelter_editor",
|
||
|
value: "demo.shelter_editor"
|
||
|
}, {
|
||
|
pId: 301,
|
||
|
text: "bi.sign_editor",
|
||
|
value: "demo.sign_editor"
|
||
|
}, {
|
||
|
pId: 301,
|
||
|
text: "bi.state_editor",
|
||
|
value: "demo.state_editor"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
id: 302,
|
||
|
text: "combo"
|
||
|
}, {
|
||
|
pId: 302,
|
||
|
text: "bi.bubble_combo",
|
||
|
value: "demo.bubble_combo"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
id: 303,
|
||
|
text: "tree"
|
||
|
}, {
|
||
|
pId: 303,
|
||
|
text: "bi.branch_tree",
|
||
|
value: "demo.branch_tree"
|
||
|
}, {
|
||
|
pId: 303,
|
||
|
text: "bi.handstand_branch_tree",
|
||
|
value: "demo.handstand_branch_tree"
|
||
|
}, {
|
||
|
pId: 303,
|
||
|
text: "bi.display_tree",
|
||
|
value: "demo.display_tree"
|
||
|
}, {
|
||
|
pId: 303,
|
||
|
text: "bi.simple_tree",
|
||
|
value: "demo.simple_tree"
|
||
|
}, {
|
||
|
pId: 303,
|
||
|
text: "bi.level_tree",
|
||
|
value: "demo.level_tree"
|
||
|
}, {
|
||
|
pId: 303,
|
||
|
text: "bi.branch_relation",
|
||
|
value: "demo.branch_relation"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
id: 304,
|
||
|
text: "table"
|
||
|
}, {
|
||
|
pId: 304,
|
||
|
text: "bi.adaptive_table",
|
||
|
value: "demo.adaptive_table"
|
||
|
}, {
|
||
|
pId: 304,
|
||
|
text: "bi.tree_table",
|
||
|
value: "demo.tree_table"
|
||
|
}, {
|
||
|
pId: 304,
|
||
|
text: "bi.layer_tree_table",
|
||
|
value: "demo.layer_tree_table"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
text: "bi.calendar",
|
||
|
value: "demo.calendar"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
text: "bi.zclip",
|
||
|
value: "demo.zclip"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
text: "bi.complex_canvas",
|
||
|
value: "demo.complex_canvas"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
text: "bi.color_chooser",
|
||
|
value: "demo.color_chooser"
|
||
|
}, {
|
||
|
pId: 3,
|
||
|
text: "bi.segment",
|
||
|
value: "demo.segment"
|
||
|
}];/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.COMPONENT_CONFIG = [{
|
||
|
id: 15,
|
||
|
text: "部件"
|
||
|
}, {
|
||
|
pId: 15,
|
||
|
text: "bi.value_chooser_combo",
|
||
|
value: "demo.value_chooser_combo"
|
||
|
}, {
|
||
|
pId: 15,
|
||
|
text: "bi.tree_value_chooser_combo",
|
||
|
value: "demo.tree_value_chooser"
|
||
|
}];Demo.CORE_CONFIG = [{
|
||
|
id: 1,
|
||
|
text: "核心控件",
|
||
|
}, {
|
||
|
id: 101,
|
||
|
pId: 1,
|
||
|
text: "布局"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.center_adapt",
|
||
|
value: "demo.center_adapt"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.vertical_adapt",
|
||
|
value: "demo.vertical_adapt"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.horizontal_adapt",
|
||
|
value: "demo.horizontal_adapt"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.horizontal_auto",
|
||
|
value: "demo.horizontal_auto"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.horizontal_float",
|
||
|
value: "demo.horizontal_float"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.left_right_vertical_adapt",
|
||
|
value: "demo.left_right_vertical_adapt"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.center",
|
||
|
value: "demo.center_layout"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.float_center",
|
||
|
value: "demo.float_center"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.vertical",
|
||
|
value: "demo.vertical"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.horizontal",
|
||
|
value: "demo.horizontal"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.border",
|
||
|
value: "demo.border"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.left, bi.right",
|
||
|
value: "demo.flow"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.inline",
|
||
|
value: "demo.inline"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.htape",
|
||
|
value: "demo.htape"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.vtape",
|
||
|
value: "demo.vtape"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.grid",
|
||
|
value: "demo.grid"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.table",
|
||
|
value: "demo.table_layout"
|
||
|
}, {
|
||
|
pId: 101,
|
||
|
text: "bi.td",
|
||
|
value: "demo.td"
|
||
|
}, {
|
||
|
pId: 1,
|
||
|
id: 102,
|
||
|
text: "抽象控件"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
text: "bi.button_group",
|
||
|
value: "demo.button_group"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
text: "bi.button_tree",
|
||
|
value: "demo.button_tree"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
text: "bi.virtual_group",
|
||
|
value: "demo.virtual_group"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
text: "bi.custom_tree",
|
||
|
value: "demo.custom_tree"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
text: "bi.grid_view",
|
||
|
value: "demo.grid_view"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
text: "bi.collection_view",
|
||
|
value: "demo.collection_view"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
id: 10201,
|
||
|
text: "组合控件"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.combo",
|
||
|
value: "demo.combo"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.expander",
|
||
|
value: "demo.expander"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.group_combo",
|
||
|
value: "demo.group_combo"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.loader",
|
||
|
value: "demo.loader"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.navigation",
|
||
|
value: "demo.navigation"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.searcher",
|
||
|
value: "demo.searcher"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.switcher",
|
||
|
value: "demo.switcher"
|
||
|
}, {
|
||
|
pId: 10201,
|
||
|
text: "bi.tab",
|
||
|
value: "demo.tab"
|
||
|
}, {
|
||
|
pId: 102,
|
||
|
id: 10202,
|
||
|
text: "弹出层"
|
||
|
}, {
|
||
|
pId: 10202,
|
||
|
text: "bi.layer_float_box",
|
||
|
value: "demo.layer_float_box"
|
||
|
}, {
|
||
|
pId: 10202,
|
||
|
text: "bi.layer_popup",
|
||
|
value: "demo.layer_popup"
|
||
|
}, {
|
||
|
pId: 10202,
|
||
|
text: "bi.layer_searcher",
|
||
|
value: "demo.layer_searcher"
|
||
|
}, {
|
||
|
pId: 1,
|
||
|
text: "widget",
|
||
|
value: "demo.widget"
|
||
|
}, {
|
||
|
pId: 1,
|
||
|
text: "single",
|
||
|
value: "demo.single"
|
||
|
}, {
|
||
|
pId: 1,
|
||
|
text: "BasicButton",
|
||
|
value: "demo.basic_button"
|
||
|
}, {
|
||
|
pId: 1,
|
||
|
text: "NodeButton",
|
||
|
value: "demo.node_button"
|
||
|
}, {
|
||
|
pId: 1,
|
||
|
text: "pane",
|
||
|
value: "demo.pane"
|
||
|
}];Demo.WIDGET_CONFIG = [{
|
||
|
id: 4,
|
||
|
text: "详细控件"
|
||
|
}, {
|
||
|
id: 401,
|
||
|
pId: 4,
|
||
|
text: "table"
|
||
|
}, {
|
||
|
pId: 401,
|
||
|
text: "bi.preview_table",
|
||
|
value: "demo.preview_table"
|
||
|
}, {
|
||
|
pId: 401,
|
||
|
text: "bi.responsive_table",
|
||
|
value: "demo.responsive_table"
|
||
|
}, {
|
||
|
pId: 401,
|
||
|
text: "bi.sequence_table",
|
||
|
value: "demo.sequence_table"
|
||
|
}, {
|
||
|
pId: 401,
|
||
|
text: "bi.page_table",
|
||
|
value: "demo.page_table"
|
||
|
}, {
|
||
|
pId: 4,
|
||
|
text: "bi.multi_select_combo",
|
||
|
value: "demo.multi_select_combo"
|
||
|
}, {
|
||
|
pId: 4,
|
||
|
text: "bi.path_chooser",
|
||
|
value: "demo.path_chooser"
|
||
|
}, {
|
||
|
pId: 4,
|
||
|
text: "bi.relation_view",
|
||
|
value: "demo.relation_view"
|
||
|
}];Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.layout",
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.combo", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var ref;
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.button_group",
|
||
|
ref: function (_ref) {
|
||
|
ref = _ref;
|
||
|
},
|
||
|
chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE,
|
||
|
layouts: [{
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.vtape",
|
||
|
height: 200,
|
||
|
}]
|
||
|
}],
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)"
|
||
|
},
|
||
|
height: 150,
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "1"
|
||
|
}
|
||
|
}]
|
||
|
}, {
|
||
|
type: "bi.button",
|
||
|
text: "populate",
|
||
|
handler: function () {
|
||
|
ref.populate([{
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "1"
|
||
|
},
|
||
|
height: 50
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "2"
|
||
|
},
|
||
|
height: 50
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "3"
|
||
|
}
|
||
|
}])
|
||
|
}
|
||
|
}]
|
||
|
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.button_group", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.button_tree",
|
||
|
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
|
||
|
layouts: [{
|
||
|
type: "bi.vertical"
|
||
|
}, {
|
||
|
type: "bi.center_adapt",
|
||
|
}],
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "0",
|
||
|
value: 0
|
||
|
}, {
|
||
|
type: "bi.button",
|
||
|
text: "1",
|
||
|
value: 1
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.button_tree", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [];
|
||
|
var cellCount = 100;
|
||
|
for (var i = 0; i < cellCount; i++) {
|
||
|
items[i] = {
|
||
|
type: "bi.label",
|
||
|
text: i
|
||
|
};
|
||
|
}
|
||
|
var grid = BI.createWidget({
|
||
|
type: "bi.collection_view",
|
||
|
items: items,
|
||
|
cellSizeAndPositionGetter: function (index) {
|
||
|
return {
|
||
|
x: index % 10 * 50,
|
||
|
y: Math.floor(index / 10) * 50,
|
||
|
width: 50,
|
||
|
height: 50
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: grid,
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.collection_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
render: function () {
|
||
|
var items = [];
|
||
|
var rowCount = 10000, columnCount = 100;
|
||
|
for (var i = 0; i < rowCount; i++) {
|
||
|
items[i] = [];
|
||
|
for (var j = 0; j < columnCount; j++) {
|
||
|
items[i][j] = {
|
||
|
type: "bi.label",
|
||
|
text: i + "-" + j
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
var grid = BI.createWidget({
|
||
|
type: "bi.grid_view",
|
||
|
items: items,
|
||
|
scrollTop: 100,
|
||
|
rowHeightGetter: function () {
|
||
|
return 30;
|
||
|
},
|
||
|
columnWidthGetter: function () {
|
||
|
return 100;
|
||
|
}
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 1,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: grid
|
||
|
}]
|
||
|
},
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.grid_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
_createItems: function () {
|
||
|
var items = BI.makeArray(100, {
|
||
|
type: "demo.virtual_group_item"
|
||
|
});
|
||
|
items[0].value = BI.UUID();
|
||
|
return items;
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
vgap: 20,
|
||
|
items: [{
|
||
|
type: "bi.virtual_group",
|
||
|
width: 500,
|
||
|
height: 300,
|
||
|
ref: function () {
|
||
|
self.buttonMap = this;
|
||
|
},
|
||
|
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
|
||
|
layouts: [{
|
||
|
type: "bi.vertical"
|
||
|
}, {
|
||
|
type: "bi.center_adapt",
|
||
|
}],
|
||
|
items: this._createItems()
|
||
|
}, {
|
||
|
type: "bi.button",
|
||
|
text: "点击刷新",
|
||
|
handler: function () {
|
||
|
var items = self._createItems();
|
||
|
items.pop();
|
||
|
self.buttonMap.populate(items);
|
||
|
}
|
||
|
}]
|
||
|
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.virtual_group", Demo.Func);
|
||
|
|
||
|
Demo.Item = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-item",
|
||
|
height: 30
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
return {
|
||
|
type: "bi.label",
|
||
|
ref: function () {
|
||
|
self.label = this;
|
||
|
},
|
||
|
height: this.options.height,
|
||
|
text: "这是一个测试项" + BI.UUID()
|
||
|
}
|
||
|
},
|
||
|
|
||
|
update: function (item) {
|
||
|
this.label.setText(item.value);
|
||
|
console.log("更新了一项");
|
||
|
return true;
|
||
|
},
|
||
|
|
||
|
created: function () {
|
||
|
console.log("创建了一项");
|
||
|
},
|
||
|
|
||
|
destroyed: function () {
|
||
|
console.log("删除了一项");
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.virtual_group_item", Demo.Item);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
_createDefaultTree: function () {
|
||
|
var TREEITEMS = [{id: -1, pId: -2, value: "根目录", open: true, type: "bi.plus_group_node", height: 25},
|
||
|
{id: 1, pId: -1, value: "第一级目录1", type: "bi.plus_group_node", height: 25},
|
||
|
{id: 11, pId: 1, value: "第二级文件1", type: "bi.single_select_item", height: 25},
|
||
|
{id: 12, pId: 1, value: "第二级目录2", type: "bi.plus_group_node", height: 25},
|
||
|
{id: 121, pId: 12, value: "第三级目录1", type: "bi.plus_group_node", height: 25},
|
||
|
{id: 122, pId: 12, value: "第三级文件1", type: "bi.single_select_item", height: 25},
|
||
|
{id: 1211, pId: 121, value: "第四级目录1", type: "bi.plus_group_node", height: 25},
|
||
|
{id: 12111, pId: 1211, value: "第五级文件1", type: "bi.single_select_item", height: 25},
|
||
|
{id: 2, pId: -1, value: "第一级目录2", type: "bi.plus_group_node", height: 25},
|
||
|
{id: 21, pId: 2, value: "第二级目录3", type: "bi.plus_group_node", height: 25},
|
||
|
{id: 22, pId: 2, value: "第二级文件2", type: "bi.single_select_item", height: 25},
|
||
|
{id: 211, pId: 21, value: "第三级目录2", type: "bi.plus_group_node", height: 25},
|
||
|
{id: 212, pId: 21, value: "第三级文件2", type: "bi.single_select_item", height: 25},
|
||
|
{id: 2111, pId: 211, value: "第四级文件1", type: "bi.single_select_item", height: 25}];
|
||
|
this.tree = BI.createWidget({
|
||
|
type: "bi.custom_tree",
|
||
|
el: {
|
||
|
type: "bi.button_tree",
|
||
|
chooseType: 0,
|
||
|
layouts: [{
|
||
|
type: "bi.vertical",
|
||
|
hgap: 30
|
||
|
}]
|
||
|
},
|
||
|
items: BI.deepClone(TREEITEMS)
|
||
|
});
|
||
|
return this.tree;
|
||
|
},
|
||
|
|
||
|
_createAsyncTree: function () {
|
||
|
this.asyncTree = BI.createWidget({
|
||
|
type: "bi.custom_tree",
|
||
|
itemsCreator: function (op, callback) {
|
||
|
if (!op.node) {//根节点
|
||
|
callback([{
|
||
|
"id": 1,
|
||
|
"pId": 0,
|
||
|
type: "bi.plus_group_node",
|
||
|
text: "test1",
|
||
|
value: 1,
|
||
|
height: 25,
|
||
|
isParent: true
|
||
|
}, {
|
||
|
"id": 2,
|
||
|
"pId": 0,
|
||
|
type: "bi.plus_group_node",
|
||
|
"text": "test2",
|
||
|
value: 1,
|
||
|
isParent: true,
|
||
|
open: true,
|
||
|
height: 25
|
||
|
}])
|
||
|
} else {
|
||
|
if (op.node.id == 1) {
|
||
|
callback([
|
||
|
{
|
||
|
"id": 11,
|
||
|
"pId": 1,
|
||
|
type: "bi.plus_group_node",
|
||
|
"text": "test11",
|
||
|
value: 11,
|
||
|
height: 25,
|
||
|
isParent: true
|
||
|
},
|
||
|
{
|
||
|
"id": 12,
|
||
|
"pId": 1,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test12",
|
||
|
value: 12,
|
||
|
height: 35
|
||
|
},
|
||
|
{
|
||
|
"id": 13,
|
||
|
"pId": 1,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test13",
|
||
|
value: 13,
|
||
|
height: 35
|
||
|
},
|
||
|
{
|
||
|
"id": 14,
|
||
|
"pId": 1,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test14",
|
||
|
value: 14,
|
||
|
height: 35
|
||
|
},
|
||
|
{
|
||
|
"id": 15,
|
||
|
"pId": 1,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test15",
|
||
|
value: 15,
|
||
|
height: 35
|
||
|
},
|
||
|
{
|
||
|
"id": 16,
|
||
|
"pId": 1,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test16",
|
||
|
value: 16,
|
||
|
height: 35
|
||
|
},
|
||
|
{"id": 17, "pId": 1, type: "bi.single_select_item", "text": "test17", value: 17, height: 35}
|
||
|
])
|
||
|
} else if (op.node.id == 2) {
|
||
|
callback([{
|
||
|
"id": 21,
|
||
|
"pId": 2,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test21",
|
||
|
value: 21,
|
||
|
height: 35
|
||
|
},
|
||
|
{
|
||
|
"id": 22,
|
||
|
"pId": 2,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test22",
|
||
|
value: 22,
|
||
|
height: 35
|
||
|
}])
|
||
|
} else if (op.node.id == 11) {
|
||
|
callback([{
|
||
|
"id": 111,
|
||
|
"pId": 11,
|
||
|
type: "bi.single_select_item",
|
||
|
"text": "test111",
|
||
|
value: 111,
|
||
|
height: 35
|
||
|
}])
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
el: {
|
||
|
type: "bi.loader",
|
||
|
next: false,
|
||
|
el: {
|
||
|
type: "bi.button_tree",
|
||
|
chooseType: 0,
|
||
|
layouts: [{
|
||
|
type: "bi.vertical",
|
||
|
hgap: 30,
|
||
|
vgap: 0
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
return this.asyncTree;
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
BI.createWidget({
|
||
|
type: "bi.grid",
|
||
|
columns: 2,
|
||
|
rows: 1,
|
||
|
element: this,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.vtape",
|
||
|
items: [
|
||
|
{
|
||
|
el: this._createDefaultTree()
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.center",
|
||
|
hgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.text_button",
|
||
|
cls: "mvc-button layout-bg2",
|
||
|
text: "getValue",
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", JSON.stringify(self.tree.getValue()));
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.text_button",
|
||
|
cls: "mvc-button layout-bg2",
|
||
|
text: "getNodeByValue(第一级目录1)",
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", "节点名称为: " + self.tree.getNodeByValue("第一级目录1").getValue());
|
||
|
}
|
||
|
}]
|
||
|
},
|
||
|
height: 30
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}, {
|
||
|
column: 1,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.vtape",
|
||
|
items: [
|
||
|
{
|
||
|
type: "bi.label",
|
||
|
text: "异步加载数据",
|
||
|
height: 30
|
||
|
},
|
||
|
{
|
||
|
el: this._createAsyncTree()
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
type: "bi.center",
|
||
|
hgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.text_button",
|
||
|
cls: "mvc-button layout-bg2",
|
||
|
text: "getValue",
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", JSON.stringify(self.asyncTree.getValue()));
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.text_button",
|
||
|
cls: "mvc-button layout-bg2",
|
||
|
text: "getNodeById(11)",
|
||
|
height: 30,
|
||
|
handler: function () {
|
||
|
BI.Msg.alert("", "节点名称为: " + (self.asyncTree.getNodeById(11) && self.asyncTree.getNodeById(11).getText()));
|
||
|
}
|
||
|
}]
|
||
|
},
|
||
|
height: 30
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.custom_tree", Demo.Func);Demo.AbsoluteLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-absolute"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "absolute"
|
||
|
},
|
||
|
left: 100,
|
||
|
top: 100
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.absolute", Demo.AbsoluteLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.BorderLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-border"
|
||
|
},
|
||
|
|
||
|
_createNorth: function(){
|
||
|
return BI.createWidget({
|
||
|
type: "bi.label",
|
||
|
text: "North",
|
||
|
cls: "layout-bg1",
|
||
|
height: 30
|
||
|
})
|
||
|
},
|
||
|
|
||
|
_createWest: function(){
|
||
|
return BI.createWidget({
|
||
|
type: "bi.center",
|
||
|
cls: "layout-bg2",
|
||
|
items:[{
|
||
|
type: "bi.label",
|
||
|
text: "West",
|
||
|
whiteSpace: "normal"
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
_createCenter: function(){
|
||
|
return BI.createWidget({
|
||
|
type: "bi.center",
|
||
|
cls: "layout-bg3",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "Center",
|
||
|
whiteSpace: "normal"
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
_createEast: function(){
|
||
|
return BI.createWidget({
|
||
|
type: "bi.center",
|
||
|
cls: "layout-bg5",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "East",
|
||
|
whiteSpace: "normal"
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
_createSouth: function(){
|
||
|
return BI.createWidget({
|
||
|
type: "bi.label",
|
||
|
text: "South",
|
||
|
cls: "layout-bg6",
|
||
|
height: 50
|
||
|
})
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.border",
|
||
|
cls: "",
|
||
|
items: {
|
||
|
north: {
|
||
|
el: this._createNorth(),
|
||
|
height: 30,
|
||
|
top: 20,
|
||
|
left: 20,
|
||
|
right: 20
|
||
|
},
|
||
|
south: {
|
||
|
el: this._createSouth(),
|
||
|
height: 50,
|
||
|
bottom: 20,
|
||
|
left: 20,
|
||
|
right: 20
|
||
|
},
|
||
|
west: {
|
||
|
el: this._createWest(),
|
||
|
width: 200,
|
||
|
left: 20
|
||
|
},
|
||
|
east: {
|
||
|
el: this._createEast(),
|
||
|
width: 300,
|
||
|
right: 20
|
||
|
},
|
||
|
center: this._createCenter()
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.border", Demo.BorderLayout);Demo.CenterAdapt = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-absolute"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 2,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: this._createNoWidth()
|
||
|
}, {
|
||
|
column: 0,
|
||
|
row: 1,
|
||
|
el: this._createBottom()
|
||
|
}]
|
||
|
}
|
||
|
},
|
||
|
|
||
|
_createNoWidth: function () {
|
||
|
return BI.createWidget({
|
||
|
type: "bi.center_adapt",
|
||
|
hgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "Center Adapt 1,center adapt布局只会影响容器内部的位置(水平和垂直居中)而不会影响到内部控件本身属性",
|
||
|
cls: "layout-bg1",
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "Center Adapt 2,根据内部控件的宽度的比例来计算",
|
||
|
cls: "layout-bg2",
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "Center Adapt 3,这些label都是没有宽度的",
|
||
|
cls: "layout-bg3",
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "Center Adapt 4",
|
||
|
cls: "layout-bg5",
|
||
|
height: 30
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
_createBottom: function () {
|
||
|
return BI.createWidget({
|
||
|
type: "bi.center_adapt",
|
||
|
items: [{
|
||
|
type: "bi.text_button",
|
||
|
text: "这个是有宽度和高度的按钮-1",
|
||
|
height: "100%",
|
||
|
width: 160,
|
||
|
cls: "layout-bg1"
|
||
|
}, {
|
||
|
type: "bi.text_button",
|
||
|
text: "这个是有宽度和高度的按钮-2",
|
||
|
height: 30,
|
||
|
width: 160,
|
||
|
cls: "layout-bg2"
|
||
|
}, {
|
||
|
type: "bi.text_button",
|
||
|
text: "这个是有宽度和高度的按钮-3",
|
||
|
height: 30,
|
||
|
width: 160,
|
||
|
cls: "layout-bg3"
|
||
|
}, {
|
||
|
type: "bi.text_button",
|
||
|
text: "这个是有宽度和高度的按钮-4",
|
||
|
height: 30,
|
||
|
width: 160,
|
||
|
cls: "layout-bg5"
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
});
|
||
|
BI.shortcut("demo.center_adapt", Demo.CenterAdapt);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.CenterLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-center"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.center",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局",
|
||
|
cls: "layout-bg1",
|
||
|
whiteSpace: "normal"
|
||
|
},{
|
||
|
type: "bi.label",
|
||
|
text: "Center 2,为了演示label是占满整个的,用了一个whiteSpace:normal",
|
||
|
cls: "layout-bg2",
|
||
|
whiteSpace: "normal"
|
||
|
},{
|
||
|
type: "bi.label",
|
||
|
text: "Center 3",
|
||
|
cls: "layout-bg3"
|
||
|
},{
|
||
|
type: "bi.label",
|
||
|
text: "Center 4",
|
||
|
cls: "layout-bg5"
|
||
|
}],
|
||
|
hgap: 20,
|
||
|
vgap: 20
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.center_layout", Demo.CenterLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.FloatCenterLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-float-center"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.float_center",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "floatCenter与center的不同在于,它可以控制最小宽度和最大宽度",
|
||
|
cls: "layout-bg1",
|
||
|
whiteSpace: "normal"
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "floatCenter与center的不同在于,它可以控制最小宽度和最大宽度",
|
||
|
cls: "layout-bg2",
|
||
|
whiteSpace: "normal"
|
||
|
}],
|
||
|
hgap: 20,
|
||
|
vgap: 20
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.float_center", Demo.FloatCenterLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.FlowLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-flow"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.center_adapt",
|
||
|
items: [{
|
||
|
type: "bi.left",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-1",
|
||
|
cls: "layout-bg1",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-2",
|
||
|
cls: "layout-bg2",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-3",
|
||
|
cls: "layout-bg3",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-4",
|
||
|
cls: "layout-bg4",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-5",
|
||
|
cls: "layout-bg5",
|
||
|
hgap: 20
|
||
|
}],
|
||
|
hgap: 20,
|
||
|
vgap: 20
|
||
|
}, {
|
||
|
type: "bi.right",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Right-1",
|
||
|
cls: "layout-bg1",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Right-2",
|
||
|
cls: "layout-bg2",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Right-3",
|
||
|
cls: "layout-bg3",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Right-4",
|
||
|
cls: "layout-bg4",
|
||
|
hgap: 20
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Right-5",
|
||
|
cls: "layout-bg5",
|
||
|
hgap: 20
|
||
|
}],
|
||
|
hgap: 20,
|
||
|
vgap: 20
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.flow", Demo.FlowLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.GridLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-grid"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.grid",
|
||
|
columns: 5,
|
||
|
rows: 3,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-0, row-0",
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
}, {
|
||
|
column: 1,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-1, row-0",
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
}, {
|
||
|
column: 2,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-2, row-0",
|
||
|
cls: "layout-bg6"
|
||
|
}
|
||
|
}, {
|
||
|
column: 3,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-3, row-0",
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
}, {
|
||
|
column: 4,
|
||
|
row: 0,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-4, row-0",
|
||
|
cls: "layout-bg4"
|
||
|
}
|
||
|
}, {
|
||
|
column: 0,
|
||
|
row: 1,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-0, row-1",
|
||
|
cls: "layout-bg5"
|
||
|
}
|
||
|
}, {
|
||
|
column: 1,
|
||
|
row: 1,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-1, row-1",
|
||
|
cls: "layout-bg6"
|
||
|
}
|
||
|
}, {
|
||
|
column: 2,
|
||
|
row: 1,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-2, row-1",
|
||
|
cls: "layout-bg7"
|
||
|
}
|
||
|
}, {
|
||
|
column: 3,
|
||
|
row: 1,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-3, row-1",
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
}, {
|
||
|
column: 4,
|
||
|
row: 1,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-4, row-1",
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
}, {
|
||
|
column: 0,
|
||
|
row: 2,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-0, row-2",
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
}, {
|
||
|
column: 1,
|
||
|
row: 2,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-1, row-2",
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
}, {
|
||
|
column: 2,
|
||
|
row: 2,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-2, row-2",
|
||
|
cls: "layout-bg4"
|
||
|
}
|
||
|
}, {
|
||
|
column: 3,
|
||
|
row: 2,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-3, row-2",
|
||
|
cls: "layout-bg5"
|
||
|
}
|
||
|
}, {
|
||
|
column: 4,
|
||
|
row: 2,
|
||
|
el: {
|
||
|
type: "bi.label",
|
||
|
text: "column-4, row-2",
|
||
|
cls: "layout-bg6"
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.grid", Demo.GridLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-horizontal-adapt"
|
||
|
},
|
||
|
|
||
|
_createLayout: function () {
|
||
|
return BI.createWidget({
|
||
|
type: "bi.horizontal_adapt",
|
||
|
vgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "Horizontal Adapt左右自适应",
|
||
|
cls: "layout-bg1",
|
||
|
width: 300,
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "Horizontal Adapt左右自适应",
|
||
|
cls: "layout-bg2",
|
||
|
//width: 300,
|
||
|
height: 30
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 2,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: this._createLayout()
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.HorizontalAuto = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-horizontal-auto"
|
||
|
},
|
||
|
|
||
|
_createLayout: function () {
|
||
|
return BI.createWidget({
|
||
|
type: "bi.horizontal_auto",
|
||
|
vgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "Horizontal Auto左右自适应",
|
||
|
cls: "layout-bg1",
|
||
|
width: 300,
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "Horizontal Auto左右自适应",
|
||
|
cls: "layout-bg2",
|
||
|
width: 300,
|
||
|
height: 30
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 2,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: this._createLayout()
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.horizontal_auto", Demo.HorizontalAuto);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.HorizontalFloat = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-horizontal-float"
|
||
|
},
|
||
|
|
||
|
_createLayout: function () {
|
||
|
return BI.createWidget({
|
||
|
type: "bi.horizontal_float",
|
||
|
vgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "Horizontal Float左右自适应",
|
||
|
cls: "layout-bg1",
|
||
|
width: 100
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 2,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: this._createLayout()
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.horizontal_float", Demo.HorizontalFloat);/**
|
||
|
* Created by User on 2017/3/21.
|
||
|
*/
|
||
|
Demo.Horizontal = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-horizontal"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.horizontal",
|
||
|
items: [{
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg1",
|
||
|
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
|
||
|
height: 30
|
||
|
},
|
||
|
left: 0,
|
||
|
right: 0
|
||
|
}],
|
||
|
width: 100,
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.text_button",
|
||
|
cls: "layout-bg2",
|
||
|
text: "这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)这里设置了lgap(左边距),rgap(右边距),tgap(上边距),bgap(下边距)",
|
||
|
height: 30
|
||
|
},
|
||
|
left: 0,
|
||
|
right: 0
|
||
|
}],
|
||
|
width: 200,
|
||
|
height: 30
|
||
|
}]
|
||
|
}],
|
||
|
lgap: 20,
|
||
|
rgap: 80,
|
||
|
tgap: 80,
|
||
|
bgap: 50
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.horizontal", Demo.Horizontal);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.HtapeLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-htape"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.htape",
|
||
|
items : [
|
||
|
{
|
||
|
width: 100,
|
||
|
el : {
|
||
|
type : 'bi.label',
|
||
|
text : '1',
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
}, {
|
||
|
width: 200,
|
||
|
el : {
|
||
|
type : 'bi.label',
|
||
|
text : '2',
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
}, {
|
||
|
width: 'fill',
|
||
|
el : {
|
||
|
type : 'bi.label',
|
||
|
text : '3',
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.htape", Demo.HtapeLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.InlineLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-inline"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.inline",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-1",
|
||
|
cls: "layout-bg1",
|
||
|
hgap: 200
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-2",
|
||
|
cls: "layout-bg2",
|
||
|
hgap: 200
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-3",
|
||
|
cls: "layout-bg3",
|
||
|
hgap: 200
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-4",
|
||
|
cls: "layout-bg4",
|
||
|
hgap: 200
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
height: 30,
|
||
|
text: "Left-5",
|
||
|
cls: "layout-bg5",
|
||
|
hgap: 200
|
||
|
}],
|
||
|
hgap: 20,
|
||
|
vgap: 20
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.inline", Demo.InlineLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-left-right-vertical-adapt"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.left_right_vertical_adapt",
|
||
|
lhgap: 10,
|
||
|
rhgap: 30,
|
||
|
items: {
|
||
|
left: [{
|
||
|
type: "bi.label",
|
||
|
text: "左边的垂直居中",
|
||
|
cls: "layout-bg1",
|
||
|
width: 100,
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "左边的垂直居中",
|
||
|
cls: "layout-bg2",
|
||
|
width: 100,
|
||
|
height: 30
|
||
|
}],
|
||
|
right: [{
|
||
|
type: "bi.label",
|
||
|
text: "右边的垂直居中",
|
||
|
cls: "layout-bg1",
|
||
|
width: 100,
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "右边的垂直居中",
|
||
|
cls: "layout-bg2",
|
||
|
width: 100,
|
||
|
height: 30
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.left_right_vertical_adapt", Demo.LeftRightVerticalAdaptLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.TableLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-table-layout"
|
||
|
},
|
||
|
|
||
|
_createTable1: function () {
|
||
|
return {
|
||
|
type: "bi.table",
|
||
|
items: BI.createItems([
|
||
|
[
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
[
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg4"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg5"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg6"
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
[
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg7"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg8"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
[
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg4"
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
[
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg5"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg6"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg7"
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
[
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg8"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
}
|
||
|
],
|
||
|
[
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg6"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg7"
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
el: {
|
||
|
cls: "layout-bg8"
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
], {
|
||
|
type: "bi.layout"
|
||
|
}),
|
||
|
columnSize: [100, "fill", 200],
|
||
|
rowSize: [10, 30, 50, 70, 90, 110, 130],
|
||
|
hgap: 20,
|
||
|
vgap: 10
|
||
|
}
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 1,
|
||
|
items: [
|
||
|
{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: this._createTable1()
|
||
|
}
|
||
|
//, {
|
||
|
// column: 0,
|
||
|
// row: 1,
|
||
|
// el: this._createTable2()
|
||
|
//}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.table_layout", Demo.TableLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.TdLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-td"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.td",
|
||
|
columnSize: [100, 100, ""],
|
||
|
items: BI.createItems([
|
||
|
[{
|
||
|
el: {
|
||
|
type: 'bi.label',
|
||
|
text: '这是一段可以换行的文字,为了使它换行我要多写几个字,但是我又凑不够这么多的字,万般焦急下,只能随便写写',
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.label',
|
||
|
text: '这是一段可以换行的文字,为了使它换行我要多写几个字,但是我又凑不够这么多的字,万般焦急下,只能随便写写',
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.label',
|
||
|
text: '这是一段可以换行的文字,为了使它换行我要多写几个字,但是我又凑不够这么多的字,万般焦急下,只能随便写写',
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
}], [{
|
||
|
el: {
|
||
|
type: 'bi.label',
|
||
|
text: '这是一段可以换行的文字,为了使它换行我要多写几个字,但是我又凑不够这么多的字,万般焦急下,只能随便写写',
|
||
|
cls: "layout-bg5"
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.label',
|
||
|
text: '这是一段可以换行的文字,为了使它换行我要多写几个字,但是我又凑不够这么多的字,万般焦急下,只能随便写写',
|
||
|
cls: "layout-bg6"
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: 'bi.label',
|
||
|
text: '这是一段可以换行的文字,为了使它换行我要多写几个字,但是我又凑不够这么多的字,万般焦急下,只能随便写写',
|
||
|
cls: "layout-bg7"
|
||
|
}
|
||
|
}]
|
||
|
], {
|
||
|
whiteSpace: "normal"
|
||
|
})
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.td", Demo.TdLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-vertical-adapt"
|
||
|
},
|
||
|
|
||
|
_createLayout: function () {
|
||
|
return BI.createWidget({
|
||
|
type: "bi.vertical_adapt",
|
||
|
vgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
text: "Vertical Adapt上下自适应",
|
||
|
cls: "layout-bg1",
|
||
|
width: 300,
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
text: "Vertical Adapt上下自适应",
|
||
|
cls: "layout-bg2",
|
||
|
width: 300,
|
||
|
height: 30
|
||
|
}]
|
||
|
})
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.grid",
|
||
|
columns: 2,
|
||
|
rows: 1,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: this._createLayout()
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout);/**
|
||
|
* Created by User on 2017/3/21.
|
||
|
*/
|
||
|
Demo.VerticalLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-vertical"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg1",
|
||
|
text: "这里设置了hgap(水平间距),vgap(垂直间距)",
|
||
|
height: 30
|
||
|
}, {
|
||
|
type: "bi.label",
|
||
|
cls: "layout-bg2",
|
||
|
text: "这里设置了hgap(水平间距),vgap(垂直间距)",
|
||
|
height: 30
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.vertical", Demo.VerticalLayout);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.VtapeLayout = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-vtape"
|
||
|
},
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: "bi.vtape",
|
||
|
items : [
|
||
|
{
|
||
|
height: 100,
|
||
|
el : {
|
||
|
type : 'bi.label',
|
||
|
text : '1',
|
||
|
cls: "layout-bg1"
|
||
|
}
|
||
|
}, {
|
||
|
height: 200,
|
||
|
el : {
|
||
|
type : 'bi.label',
|
||
|
text : '2',
|
||
|
cls: "layout-bg2"
|
||
|
}
|
||
|
}, {
|
||
|
height: 'fill',
|
||
|
el : {
|
||
|
type : 'bi.label',
|
||
|
text : '3',
|
||
|
cls: "layout-bg3"
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.vtape", Demo.VtapeLayout);Demo.Face = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-face"
|
||
|
},
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
return {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.svg",
|
||
|
ref: function () {
|
||
|
self.svg = this;
|
||
|
}
|
||
|
},
|
||
|
left: 0,
|
||
|
right: 0,
|
||
|
top: 0,
|
||
|
bottom: 0
|
||
|
}]
|
||
|
}
|
||
|
},
|
||
|
mounted: function () {
|
||
|
var circle = this.svg.circle(this.element.width() / 2, this.element.height() / 2, 20);
|
||
|
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.face", Demo.Face);Demo.Main = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-main"
|
||
|
},
|
||
|
render: function () {
|
||
|
var center;
|
||
|
return {
|
||
|
type: "bi.border",
|
||
|
items: {
|
||
|
north: {
|
||
|
height: 50,
|
||
|
el: {
|
||
|
type: "demo.north",
|
||
|
listeners: [{
|
||
|
eventName: Demo.North.EVENT_VALUE_CHANGE,
|
||
|
action: function (v) {
|
||
|
center.setValue(v);
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
},
|
||
|
west: {
|
||
|
width: 230,
|
||
|
el: {
|
||
|
type: "demo.west",
|
||
|
listeners: [{
|
||
|
eventName: Demo.West.EVENT_VALUE_CHANGE,
|
||
|
action: function (v) {
|
||
|
center.setValue(v);
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
},
|
||
|
center: {
|
||
|
el: {
|
||
|
type: "demo.center",
|
||
|
ref: function (_ref) {
|
||
|
center = _ref;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.main", Demo.Main);Demo.North = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-north"
|
||
|
},
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
return {
|
||
|
type: "bi.htape",
|
||
|
items: [{
|
||
|
width: 230,
|
||
|
el: {
|
||
|
type: "bi.text_button",
|
||
|
listeners: [{
|
||
|
eventName: BI.Button.EVENT_CHANGE,
|
||
|
action: function () {
|
||
|
self.fireEvent(Demo.North.EVENT_VALUE_CHANGE, "demo.face")
|
||
|
}
|
||
|
}],
|
||
|
cls: "logo",
|
||
|
height: 50,
|
||
|
text: "FineUI2.0"
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.right",
|
||
|
hgap: 10,
|
||
|
items: [{
|
||
|
type: "bi.text_button",
|
||
|
text: "星空蓝",
|
||
|
handler: function () {
|
||
|
$("#wrapper").removeClass("bi-theme-default").addClass("bi-theme-dark");
|
||
|
}
|
||
|
}, {
|
||
|
type: "bi.text_button",
|
||
|
text: "典雅白",
|
||
|
handler: function () {
|
||
|
$("#wrapper").removeClass("bi-theme-dark").addClass("bi-theme-default");
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
Demo.North.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
|
||
|
BI.shortcut("demo.north", Demo.North);Demo.West = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-west"
|
||
|
},
|
||
|
render: function () {
|
||
|
var self = this;
|
||
|
return {
|
||
|
type: "bi.vertical",
|
||
|
items: [{
|
||
|
type: "bi.multilayer_single_level_tree",
|
||
|
listeners: [{
|
||
|
eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE,
|
||
|
action: function (v) {
|
||
|
self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
|
||
|
}
|
||
|
}],
|
||
|
items: Demo.CONFIG
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
|
||
|
BI.shortcut("demo.west", Demo.West);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.MultiSelectCombo = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-multi-select-combo"
|
||
|
},
|
||
|
|
||
|
_createMultiSelectCombo: function () {
|
||
|
var self = this;
|
||
|
var widget = BI.createWidget({
|
||
|
type: 'bi.multi_select_combo',
|
||
|
itemsCreator: BI.bind(this._itemsCreator, this),
|
||
|
width: 200
|
||
|
});
|
||
|
|
||
|
widget.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () {
|
||
|
BI.Msg.toast(JSON.stringify(this.getValue()));
|
||
|
});
|
||
|
|
||
|
return widget;
|
||
|
},
|
||
|
|
||
|
_getItemsByTimes: function (items, times) {
|
||
|
var res = [];
|
||
|
for (var i = (times - 1) * 3; items[i] && i < times * 3; i++) {
|
||
|
res.push(items[i]);
|
||
|
}
|
||
|
return res;
|
||
|
},
|
||
|
|
||
|
_hasNextByTimes: function (items, times) {
|
||
|
return times * 3 < items.length;
|
||
|
},
|
||
|
|
||
|
_itemsCreator: function (options, callback) {
|
||
|
var self = this;
|
||
|
var items = Demo.MULTI_COMBO_ITEMS;
|
||
|
var keywords = (options.keywords || []).slice();
|
||
|
if (options.keyword) {
|
||
|
keywords.push(options.keyword);
|
||
|
}
|
||
|
BI.each(keywords, function (i, kw) {
|
||
|
var search = BI.Func.getSearchResult(items, kw);
|
||
|
items = search.matched.concat(search.finded);
|
||
|
});
|
||
|
if (options.selected_values) {//过滤
|
||
|
var filter = BI.makeObject(options.selected_values, true);
|
||
|
items = BI.filter(items, function (i, ob) {
|
||
|
return !filter[ob.value];
|
||
|
});
|
||
|
}
|
||
|
if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) {
|
||
|
callback({
|
||
|
items: items
|
||
|
});
|
||
|
return;
|
||
|
}
|
||
|
if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) {
|
||
|
callback({count: items.length});
|
||
|
return;
|
||
|
}
|
||
|
BI.delay(function () {
|
||
|
callback({
|
||
|
items: self._getItemsByTimes(items, options.times),
|
||
|
hasNext: self._hasNextByTimes(items, options.times)
|
||
|
});
|
||
|
}, 1000);
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
return {
|
||
|
type: 'bi.absolute',
|
||
|
scrolly: false,
|
||
|
items: [{
|
||
|
el: this._createMultiSelectCombo(),
|
||
|
right: 10,
|
||
|
top: 10
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.multi_select_combo", Demo.MultiSelectCombo);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.PathChooser = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-path-chooser"
|
||
|
},
|
||
|
render: function () {
|
||
|
var pathchooser = BI.createWidget({
|
||
|
type: "bi.path_chooser",
|
||
|
width: 800,
|
||
|
height: 400,
|
||
|
items: // [
|
||
|
// [{region: "区域X", value: "X1"},
|
||
|
// {region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域B", value: "B"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域E", value: "E"},
|
||
|
// {region: "区域G", value: "G"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X"},
|
||
|
// {region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域B", value: "B"},
|
||
|
// {region: "区域C", value: "C"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域E", value: "E"},
|
||
|
// {region: "区域G", value: "G"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X"},
|
||
|
// //{region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域C", value: "C"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域E", value: "E"},
|
||
|
// {region: "区域G", value: "G"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X"},
|
||
|
// {region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域B", value: "B"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域E", value: "E1"},
|
||
|
// {region: "区域H", value: "H"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X"},
|
||
|
// {region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域B", value: "B"},
|
||
|
// {region: "区域C", value: "C"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域E", value: "E1"},
|
||
|
// {region: "区域H", value: "H"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X"},
|
||
|
// {region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域C", value: "C"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域E", value: "E1"},
|
||
|
// {region: "区域H", value: "H"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X"},
|
||
|
// {region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域B", value: "B"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域F", value: "F"},
|
||
|
// {region: "区域H", value: "H"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X"},
|
||
|
// {region: "区域Q", value: "Q"},
|
||
|
// {region: "区域A", value: "A"},
|
||
|
// {region: "区域B", value: "B"},
|
||
|
// {region: "区域C", value: "C"},
|
||
|
// {region: "区域D", value: "D"},
|
||
|
// {region: "区域F", value: "F"},
|
||
|
// {region: "区域H", value: "H"},
|
||
|
// {region: "区域I", value: "I"},
|
||
|
// {region: "区域J", value: "J"}],
|
||
|
// [{region: "区域X", value: "X", text: "X"},
|
||
|
// {region: "区域Q", value: "Q", text: "Q"},
|
||
|
// {region: "区域A", value: "A", text: "A"},
|
||
|
// {region: "区域C", value: "C", text: "C"},
|
||
|
// {region: "区域D", value: "D", text: "D"},
|
||
|
// {region: "区域F", value: "F", text: "F"},
|
||
|
// {region: "区域H", value: "H", text: "H"},
|
||
|
// {region: "区域I", value: "I", text: "I"},
|
||
|
// {region: "区域J", value: "J", text: "J"}]
|
||
|
//]
|
||
|
[[{
|
||
|
"region": "8c4460bc3605685e",
|
||
|
"regionText": "采购订单XXX",
|
||
|
"text": "ID",
|
||
|
"value": "1"
|
||
|
}, {
|
||
|
"region": "0fbd0dc648f41e97",
|
||
|
"regionText": "采购订单",
|
||
|
"text": "学号",
|
||
|
"value": "3"
|
||
|
}, {
|
||
|
"region": "c6d72d6c7e19a667",
|
||
|
"regionText": "供应商基本信息",
|
||
|
"text": "ID",
|
||
|
"value": "5"
|
||
|
}], [{
|
||
|
"region": "ed013e18cc7c8637",
|
||
|
"regionText": "采购订单XXX",
|
||
|
"text": "ID",
|
||
|
"value": "1"
|
||
|
}, {
|
||
|
"region": "153d75878431f8ee",
|
||
|
"regionText": "A3",
|
||
|
"text": "学号",
|
||
|
"value": "2"
|
||
|
}, {
|
||
|
"region": "3861fb024c7d7825",
|
||
|
"regionText": "采购订单",
|
||
|
"text": "学号",
|
||
|
"value": "3"
|
||
|
}, {
|
||
|
"region": "88e3e5071bd10bc5",
|
||
|
"regionText": "供应商",
|
||
|
"text": "ID",
|
||
|
"value": "4"
|
||
|
}, {
|
||
|
"region": "8476c77ab5c147e0",
|
||
|
"regionText": "供应商基本信息",
|
||
|
"text": "ID",
|
||
|
"value": "5"
|
||
|
}], [{
|
||
|
"region": "f00f67fbb9fba6fe",
|
||
|
"regionText": "采购订单XXX",
|
||
|
"text": "ID",
|
||
|
"value": "1"
|
||
|
}, {
|
||
|
"region": "1e8badf5d5793408",
|
||
|
"regionText": "A3",
|
||
|
"text": "学号",
|
||
|
"value": "2"
|
||
|
}, {
|
||
|
"region": "de1ebd3d0986a294",
|
||
|
"regionText": "供应商基本信息",
|
||
|
"text": "ID",
|
||
|
"value": "5"
|
||
|
}]]
|
||
|
});
|
||
|
pathchooser.setValue();
|
||
|
return {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: pathchooser,
|
||
|
left: 100,
|
||
|
top: 100
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.button",
|
||
|
text: "getValue",
|
||
|
handler: function () {
|
||
|
BI.Msg.toast(JSON.stringify(pathchooser.getValue()));
|
||
|
}
|
||
|
},
|
||
|
left: 100,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.path_chooser", Demo.PathChooser);/**
|
||
|
* Created by User on 2017/3/22.
|
||
|
*/
|
||
|
Demo.RelationView = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-relation-view"
|
||
|
},
|
||
|
render: function () {
|
||
|
var relationview = BI.createWidget({
|
||
|
type: "bi.relation_view",
|
||
|
items: [
|
||
|
{
|
||
|
primary: {
|
||
|
region: "B", regionText: "比", regionTitle: "bbb", regionHandler: function () {
|
||
|
alert("a")
|
||
|
},
|
||
|
|
||
|
|
||
|
title: "b2...",
|
||
|
value: "b2", text: "b2字段",
|
||
|
handler: function () {
|
||
|
alert("d")
|
||
|
}
|
||
|
},
|
||
|
foreign: {region: "C", value: "c1", text: "c1字段"}
|
||
|
},
|
||
|
{
|
||
|
primary: {region: "A", value: "a1", text: "a1字段"},
|
||
|
foreign: {region: "C", value: "c2", text: "c2字段"}
|
||
|
},
|
||
|
{
|
||
|
primary: {region: "C", value: "c3", text: "c3字段"},
|
||
|
foreign: {region: "D", value: "d1", text: "d1字段"}
|
||
|
},
|
||
|
{
|
||
|
primary: {region: "A", value: "a1", text: "a1字段"},
|
||
|
foreign: {region: "B", value: "b1", text: "b1字段"}
|
||
|
},
|
||
|
|
||
|
{
|
||
|
primary: {region: "X", value: "x1", text: "x1字段"},
|
||
|
foreign: {region: "Y", value: "y1", text: "y1字段"}
|
||
|
},
|
||
|
{
|
||
|
primary: {region: "X", value: "x2", text: "x2字段"},
|
||
|
foreign: {region: "Z", value: "z1", text: "z1字段"}
|
||
|
},
|
||
|
{
|
||
|
primary: {region: "X", value: "x2", text: "x2字段"},
|
||
|
foreign: {region: "B", value: "b1", text: "b1字段"}
|
||
|
},
|
||
|
{
|
||
|
primary: {region: "X33", value: "x233", text: "x233字段"},
|
||
|
}
|
||
|
]
|
||
|
});
|
||
|
return {
|
||
|
type: "bi.float_center_adapt",
|
||
|
items: [{
|
||
|
el: relationview
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.relation_view", Demo.RelationView);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var items = [{
|
||
|
children: [{
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "node1",
|
||
|
children: [{
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "childnode1",
|
||
|
values: [{type: "bi.page_table_cell", text: 101}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 102
|
||
|
}, {type: "bi.page_table_cell", text: 101}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 102
|
||
|
}, {type: "bi.page_table_cell", text: 101}]
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "childnode2",
|
||
|
values: [{type: "bi.page_table_cell", text: 201}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 202
|
||
|
}, {type: "bi.page_table_cell", text: 201}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 202
|
||
|
}, {type: "bi.page_table_cell", text: 201}]
|
||
|
}],
|
||
|
values: [{type: "bi.page_table_cell", text: 1001}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 1002
|
||
|
}, {type: "bi.page_table_cell", text: 1001}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 1002
|
||
|
}, {type: "bi.page_table_cell", text: 1001}]
|
||
|
}], values: [{type: "bi.page_table_cell", text: 12001}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 12002
|
||
|
}, {type: "bi.page_table_cell", text: 12001}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: 12002
|
||
|
}, {type: "bi.page_table_cell", text: 12001}]
|
||
|
}];
|
||
|
|
||
|
var header = [{
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "header1"
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "header2"
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "jine",
|
||
|
tag: 1
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "jine",
|
||
|
tag: 2
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "jine",
|
||
|
tag: 3
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "金额汇总",
|
||
|
tag: 4
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "金额汇总2",
|
||
|
tag: 5
|
||
|
}];
|
||
|
|
||
|
var crossHeader = [{
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "cross1"
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "cross2"
|
||
|
}];
|
||
|
|
||
|
var crossItems = [{
|
||
|
children: [{
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "node1",
|
||
|
values: [1, 2, 3]
|
||
|
}, {
|
||
|
type: "bi.page_table_cell",
|
||
|
text: "node3",
|
||
|
values: [1, 2]
|
||
|
}],
|
||
|
//values: [1, 2]
|
||
|
}];
|
||
|
|
||
|
var table1 = BI.createWidget({
|
||
|
type: "bi.page_table",
|
||
|
el: {
|
||
|
type: "bi.sequence_table",
|
||
|
showSequence: true,
|
||
|
el: {
|
||
|
type: "bi.dynamic_summary_tree_table",
|
||
|
el: {
|
||
|
type: "bi.adaptive_table",
|
||
|
el: {
|
||
|
type: "bi.resizable_table",
|
||
|
el: {
|
||
|
type: "bi.collection_table"
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
sequence: {
|
||
|
type: "bi.sequence_table_dynamic_number"
|
||
|
}
|
||
|
},
|
||
|
summaryCellStyleGetter: function (isLast) {
|
||
|
return isLast ? {
|
||
|
backgroundColor: "#6495ED",
|
||
|
color: "#ffffff"
|
||
|
} : {
|
||
|
backgroundColor: "#B0C4DE",
|
||
|
color: "#ffffff"
|
||
|
}
|
||
|
},
|
||
|
sequenceCellStyleGetter: function (index) {
|
||
|
return {
|
||
|
backgroundColor: "#87CEEB",
|
||
|
color: "#ffffff"
|
||
|
}
|
||
|
},
|
||
|
headerCellStyleGetter: function () {
|
||
|
return {
|
||
|
backgroundColor: "#6495ED",
|
||
|
color: "#ffffff"
|
||
|
}
|
||
|
},
|
||
|
pager: {
|
||
|
horizontal: {
|
||
|
pages: false, //总页数
|
||
|
curr: 1, //初始化当前页, pages为数字时可用
|
||
|
|
||
|
hasPrev: function (page) {
|
||
|
return page > 1;
|
||
|
},
|
||
|
hasNext: function (page) {
|
||
|
return page < 3;
|
||
|
}
|
||
|
},
|
||
|
vertical: {
|
||
|
pages: false, //总页数
|
||
|
curr: 1, //初始化当前页, pages为数字时可用
|
||
|
|
||
|
hasPrev: function (page) {
|
||
|
return page > 1;
|
||
|
},
|
||
|
hasNext: function (page) {
|
||
|
return page < 3;
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
itemsCreator: function (op, populate) {
|
||
|
var vpage = op.vpage || "";
|
||
|
var hpage = op.hpage || "";
|
||
|
BI.each(header, function (i, h) {
|
||
|
h.text = h.text + "V" + vpage + "H" + hpage;
|
||
|
});
|
||
|
populate(items, header, crossItems, crossHeader);
|
||
|
},
|
||
|
width: 600,
|
||
|
height: 400,
|
||
|
columnSize: [100, 100, 100, 100, 100, 100, 100],
|
||
|
minColumnSize: [100, 100, 100, 100, 100, 100, 100],
|
||
|
isNeedMerge: true,
|
||
|
isNeedFreeze: true,
|
||
|
mergeCols: [0, 1],
|
||
|
mergeRule: function (col1, col2) {
|
||
|
if (col1 === col2) {
|
||
|
return true;
|
||
|
}
|
||
|
if (col1.tag && col2.tag) {
|
||
|
return col1.tag === col2.tag;
|
||
|
}
|
||
|
return col1 === col2;
|
||
|
},
|
||
|
freezeCols: [0, 1],
|
||
|
header: header,
|
||
|
items: items,
|
||
|
crossHeader: crossHeader,
|
||
|
crossItems: crossItems
|
||
|
});
|
||
|
// table1.populate(items, header, crossItems, crossHeader);
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 1,
|
||
|
items: [[{
|
||
|
el: table1
|
||
|
}]]
|
||
|
},
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.page_table", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var items = [[{
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第二列"
|
||
|
}, {
|
||
|
text: "第一行第三列"
|
||
|
}], [{
|
||
|
text: "第二行第一列"
|
||
|
}, {
|
||
|
text: "第二行第二列"
|
||
|
}, {
|
||
|
text: "第二行第三列"
|
||
|
}], [{
|
||
|
text: "第二行第一列"
|
||
|
}, {
|
||
|
text: "第三行第二列"
|
||
|
}, {
|
||
|
text: "第三行第三列"
|
||
|
}], [{
|
||
|
text: "第二行第一列"
|
||
|
}, {
|
||
|
text: "第四行第二列"
|
||
|
}, {
|
||
|
text: "第四行第三列"
|
||
|
}], [{
|
||
|
text: "第五行第一列"
|
||
|
}, {
|
||
|
text: "第五行第二列"
|
||
|
}, {
|
||
|
text: "第五行第三列"
|
||
|
}], [{
|
||
|
text: "第六行第一列"
|
||
|
}, {
|
||
|
text: "第六行第二列"
|
||
|
}, {
|
||
|
text: "第六行第三列"
|
||
|
}], [{
|
||
|
text: "第七行第一列"
|
||
|
}, {
|
||
|
text: "第七行第二列"
|
||
|
}, {
|
||
|
text: "第七行第三列"
|
||
|
}], [{
|
||
|
text: "第八行第一列"
|
||
|
}, {
|
||
|
text: "第八行第二列"
|
||
|
}, {
|
||
|
text: "第八行第三列"
|
||
|
}], [{
|
||
|
text: "第九行第一列"
|
||
|
}, {
|
||
|
text: "第九行第二列"
|
||
|
}, {
|
||
|
text: "第九行第三列"
|
||
|
}], [{
|
||
|
text: "第十行第一列"
|
||
|
}, {
|
||
|
text: "第十行第二列"
|
||
|
}, {
|
||
|
text: "第十行第三列"
|
||
|
}], [{
|
||
|
text: "第十一行第一列"
|
||
|
}, {
|
||
|
text: "第十一行第二列"
|
||
|
}, {
|
||
|
text: "第十一行第三列"
|
||
|
}], [{
|
||
|
text: "第十二行第一列"
|
||
|
}, {
|
||
|
text: "第十二行第二列"
|
||
|
}, {
|
||
|
text: "第十二行第三列"
|
||
|
}], [{
|
||
|
text: "第十三行第一列"
|
||
|
}, {
|
||
|
text: "第十三行第二列"
|
||
|
}, {
|
||
|
text: "第十三行第三列"
|
||
|
}], [{
|
||
|
text: "第十四行第一列"
|
||
|
}, {
|
||
|
text: "第十四行第二列"
|
||
|
}, {
|
||
|
text: "第十四行第三列"
|
||
|
}], [{
|
||
|
text: "第十五行第一列"
|
||
|
}, {
|
||
|
text: "第十五行第二列"
|
||
|
}, {
|
||
|
text: "第十五行第三列"
|
||
|
}], [{
|
||
|
text: "第十六行第一列"
|
||
|
}, {
|
||
|
text: "第十六行第二列"
|
||
|
}, {
|
||
|
text: "第十六行第三列"
|
||
|
}], [{
|
||
|
text: "第十七行第一列"
|
||
|
}, {
|
||
|
text: "第十七行第二列"
|
||
|
}, {
|
||
|
text: "第十七行第三列"
|
||
|
}], [{
|
||
|
text: "第十八行第一列"
|
||
|
}, {
|
||
|
text: "第十八行第二列"
|
||
|
}, {
|
||
|
text: "第十八行第三列"
|
||
|
}]];
|
||
|
|
||
|
var header = [[{
|
||
|
text: "表头1"
|
||
|
}, {
|
||
|
text: "表头2"
|
||
|
}, {
|
||
|
text: "表头3"
|
||
|
}]];
|
||
|
|
||
|
var table1 = BI.createWidget({
|
||
|
type: "bi.preview_table",
|
||
|
columnSize: ["", "", ""],
|
||
|
header: header,
|
||
|
items: items
|
||
|
});
|
||
|
var table2 = BI.createWidget({
|
||
|
type: "bi.preview_table",
|
||
|
header: header,
|
||
|
columnSize: [100, "", 50],
|
||
|
items: items
|
||
|
});
|
||
|
var table3 = BI.createWidget({
|
||
|
type: "bi.preview_table",
|
||
|
header: header,
|
||
|
columnSize: [0.2, 0.4, 0.4],
|
||
|
headerRowSize: 30,
|
||
|
items: items
|
||
|
});
|
||
|
var table4 = BI.createWidget({
|
||
|
type: "bi.preview_table",
|
||
|
header: header,
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [0, 1],
|
||
|
columnSize: [0.2, "", 0.4],
|
||
|
items: items
|
||
|
});
|
||
|
var table5 = BI.createWidget({
|
||
|
type: "bi.preview_table",
|
||
|
header: header,
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [0, 1],
|
||
|
columnSize: [200, 100, ""],
|
||
|
items: items
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.grid",
|
||
|
columns: 3,
|
||
|
rows: 2,
|
||
|
items: [[{
|
||
|
el: {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: table1,
|
||
|
left: 5,
|
||
|
right: 5,
|
||
|
top: 5,
|
||
|
bottom: 5
|
||
|
}]
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: table2,
|
||
|
left: 5,
|
||
|
right: 5,
|
||
|
top: 5,
|
||
|
bottom: 5
|
||
|
}]
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: table3,
|
||
|
left: 5,
|
||
|
right: 5,
|
||
|
top: 5,
|
||
|
bottom: 5
|
||
|
}]
|
||
|
}
|
||
|
}], [{
|
||
|
el: {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: table4,
|
||
|
left: 5,
|
||
|
right: 5,
|
||
|
top: 5,
|
||
|
bottom: 5
|
||
|
}]
|
||
|
}
|
||
|
}, {
|
||
|
el: {
|
||
|
type: "bi.absolute",
|
||
|
items: [{
|
||
|
el: table5,
|
||
|
left: 5,
|
||
|
right: 5,
|
||
|
top: 5,
|
||
|
bottom: 5
|
||
|
}]
|
||
|
}
|
||
|
}]]
|
||
|
},
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.preview_table", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var items = [[{
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}], [{
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}, {
|
||
|
text: "第一行第一列"
|
||
|
}], [{
|
||
|
text: "第三行第一列"
|
||
|
}, {
|
||
|
text: "第三行第二列"
|
||
|
}, {
|
||
|
text: "第三行第三列"
|
||
|
}], [{
|
||
|
text: "第四行第一列"
|
||
|
}, {
|
||
|
text: "第四行第二列"
|
||
|
}, {
|
||
|
text: "第四行第三列"
|
||
|
}], [{
|
||
|
text: "第五行第一列"
|
||
|
}, {
|
||
|
text: "第五行第二列"
|
||
|
}, {
|
||
|
text: "第五行第三列"
|
||
|
}], [{
|
||
|
text: "第六行第一列"
|
||
|
}, {
|
||
|
text: "第六行第二列"
|
||
|
}, {
|
||
|
text: "第六行第三列"
|
||
|
}], [{
|
||
|
text: "第七行第一列"
|
||
|
}, {
|
||
|
text: "第七行第二列"
|
||
|
}, {
|
||
|
text: "第七行第三列"
|
||
|
}], [{
|
||
|
text: "第八行第一列"
|
||
|
}, {
|
||
|
text: "第八行第二列"
|
||
|
}, {
|
||
|
text: "第八行第三列"
|
||
|
}], [{
|
||
|
text: "第九行第一列"
|
||
|
}, {
|
||
|
text: "第九行第二列"
|
||
|
}, {
|
||
|
text: "第九行第三列"
|
||
|
}], [{
|
||
|
text: "第十行第一列"
|
||
|
}, {
|
||
|
text: "第十行第二列"
|
||
|
}, {
|
||
|
text: "第十行第三列"
|
||
|
}], [{
|
||
|
text: "第十一行第一列"
|
||
|
}, {
|
||
|
text: "第十一行第二列"
|
||
|
}, {
|
||
|
text: "第十一行第三列"
|
||
|
}], [{
|
||
|
text: "第十二行第一列"
|
||
|
}, {
|
||
|
text: "第十二行第二列"
|
||
|
}, {
|
||
|
text: "第十二行第三列"
|
||
|
}], [{
|
||
|
text: "第十三行第一列"
|
||
|
}, {
|
||
|
text: "第十三行第二列"
|
||
|
}, {
|
||
|
text: "第十三行第三列"
|
||
|
}], [{
|
||
|
text: "第十四行第一列"
|
||
|
}, {
|
||
|
text: "第十四行第二列"
|
||
|
}, {
|
||
|
text: "第十四行第三列"
|
||
|
}], [{
|
||
|
text: "第十五行第一列"
|
||
|
}, {
|
||
|
text: "第十五行第二列"
|
||
|
}, {
|
||
|
text: "第十五行第三列"
|
||
|
}], [{
|
||
|
text: "第十六行第一列"
|
||
|
}, {
|
||
|
text: "第十六行第二列"
|
||
|
}, {
|
||
|
text: "第十六行第三列"
|
||
|
}], [{
|
||
|
text: "第十七行第一列"
|
||
|
}, {
|
||
|
text: "第十七行第二列"
|
||
|
}, {
|
||
|
text: "第十七行第三列"
|
||
|
}], [{
|
||
|
text: "第十八行第一列"
|
||
|
}, {
|
||
|
text: "第十八行第二列"
|
||
|
}, {
|
||
|
text: "第十八行第三列"
|
||
|
}]];
|
||
|
|
||
|
|
||
|
var header = [[{
|
||
|
text: "表头1"
|
||
|
}, {
|
||
|
text: "表头2"
|
||
|
}, {
|
||
|
text: "表头3"
|
||
|
}]];
|
||
|
|
||
|
|
||
|
var table1 = BI.createWidget({
|
||
|
type: "bi.responsive_table",
|
||
|
isNeedMerge: true,
|
||
|
isNeedFreeze: true,
|
||
|
mergeCols: [0, 1],
|
||
|
columnSize: ["", "", ""],
|
||
|
items: items,
|
||
|
header: header
|
||
|
});
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.grid",
|
||
|
columns: 2,
|
||
|
rows: 2,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: table1
|
||
|
}]
|
||
|
},
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 10
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.responsive_table", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
|
||
|
props: {
|
||
|
baseCls: "demo-func"
|
||
|
},
|
||
|
|
||
|
render: function () {
|
||
|
var items = [{
|
||
|
children: [{
|
||
|
text: "节点1",
|
||
|
children: [{
|
||
|
text: "子节点1",
|
||
|
children: [{
|
||
|
text: "叶节点1",
|
||
|
values: [{text: 11}, {text: 12}, {text: 11}, {text: 12}, {text: 11}, {text: 12}, {text: 112}]
|
||
|
}, {
|
||
|
text: "叶节点2",
|
||
|
values: [{text: 21}, {text: 22}, {text: 21}, {text: 22}, {text: 21}, {text: 22}, {text: 122}]
|
||
|
}],
|
||
|
values: [{text: 101}, {text: 102}, {text: 101}, {text: 102}, {text: 101}, {text: 102}, {text: 1102}]
|
||
|
}, {
|
||
|
text: "子节点2",
|
||
|
children: [{
|
||
|
text: "叶节点3",
|
||
|
values: [{text: 31}, {text: 32}, {text: 31}, {text: 32}, {text: 31}, {text: 32}, {text: 132}]
|
||
|
}, {
|
||
|
text: "叶节点4",
|
||
|
values: [{text: 41}, {text: 42}, {text: 41}, {text: 42}, {text: 41}, {text: 42}, {text: 142}]
|
||
|
}],
|
||
|
values: [{text: 201}, {text: 202}, {text: 201}, {text: 202}, {text: 201}, {text: 202}, {text: 1202}]
|
||
|
}, {
|
||
|
text: "子节点3",
|
||
|
children: [{
|
||
|
text: "叶节点5",
|
||
|
values: [{text: 51}, {text: 52}, {text: 51}, {text: 52}, {text: 51}, {text: 52}, {text: 152}]
|
||
|
}],
|
||
|
values: [{text: 301}, {text: 302}, {text: 301}, {text: 302}, {text: 301}, {text: 302}, {text: 1302}]
|
||
|
}],
|
||
|
values: [{text: 1001}, {text: 1002}, {text: 1001}, {text: 1002}, {text: 1001}, {text: 1002}, {text: 11002}]
|
||
|
}, {
|
||
|
text: "节点2",
|
||
|
values: [{text: 2001}, {text: 2002}, {text: 2001}, {text: 2002}, {text: 2001}, {text: 2002}, {text: 12002}]
|
||
|
}],
|
||
|
values: [{text: 12001}, {text: 12002}, {text: 12001}, {text: 12002}, {text: 12001}, {text: 12002}, {text: 112002}]
|
||
|
}];
|
||
|
|
||
|
var header = [{
|
||
|
text: "header1"
|
||
|
}, {
|
||
|
text: "header2"
|
||
|
}, {
|
||
|
text: "header3"
|
||
|
}, {
|
||
|
text: "金额",
|
||
|
tag: 1
|
||
|
}, {
|
||
|
text: "金额",
|
||
|
tag: 2
|
||
|
}, {
|
||
|
text: "金额",
|
||
|
tag: 3
|
||
|
}, {
|
||
|
text: "金额",
|
||
|
tag: 4
|
||
|
}, {
|
||
|
text: "金额",
|
||
|
tag: 5
|
||
|
}, {
|
||
|
text: "金额",
|
||
|
tag: 6
|
||
|
}, {
|
||
|
text: "金额",
|
||
|
tag: 7
|
||
|
}];
|
||
|
|
||
|
var crossHeader = [{
|
||
|
text: "cross1"
|
||
|
}, {
|
||
|
text: "cross2"
|
||
|
}];
|
||
|
|
||
|
var crossItems = [{
|
||
|
children: [{
|
||
|
text: "节点1",
|
||
|
children: [{
|
||
|
text: "子节点1"
|
||
|
}, {
|
||
|
text: "子节点2"
|
||
|
}],
|
||
|
values: [0]
|
||
|
}, {
|
||
|
text: "节点2",
|
||
|
children: [{
|
||
|
text: "子节点3"
|
||
|
}, {
|
||
|
text: "子节点4"
|
||
|
}],
|
||
|
values: [0]
|
||
|
}],
|
||
|
values: [0]
|
||
|
}];
|
||
|
var table = BI.createWidget({
|
||
|
type: "bi.sequence_table",
|
||
|
el: {
|
||
|
type: "bi.tree_table",
|
||
|
el: {
|
||
|
type: "bi.adaptive_table",
|
||
|
el: {
|
||
|
type: "bi.resizable_table",
|
||
|
el: {
|
||
|
type: "bi.collection_table"
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
sequence: {
|
||
|
type: "bi.sequence_table_tree_number"
|
||
|
},
|
||
|
showSequence: true,
|
||
|
width: 600,
|
||
|
height: 400,
|
||
|
isNeedResize: true,
|
||
|
isNeedMerge: true,
|
||
|
mergeRule: function (row1, row2) {
|
||
|
return row1 === row2;
|
||
|
},
|
||
|
columnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
|
||
|
minColumnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
|
||
|
isNeedFreeze: true,
|
||
|
freezeCols: [0, 1, 2],
|
||
|
mergeCols: [0, 1, 2],
|
||
|
header: header,
|
||
|
items: items,
|
||
|
crossHeader: crossHeader,
|
||
|
crossItems: crossItems
|
||
|
});
|
||
|
|
||
|
BI.createWidget({
|
||
|
type: "bi.absolute",
|
||
|
element: this,
|
||
|
items: [{
|
||
|
el: {
|
||
|
type: "bi.grid",
|
||
|
columns: 1,
|
||
|
rows: 1,
|
||
|
items: [{
|
||
|
column: 0,
|
||
|
row: 0,
|
||
|
el: table
|
||
|
}]
|
||
|
},
|
||
|
left: 10,
|
||
|
right: 10,
|
||
|
top: 10,
|
||
|
bottom: 50
|
||
|
}]
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
BI.shortcut("demo.sequence_table", Demo.Func);Demo.CONFIG = Demo.CORE_CONFIG.concat(Demo.BASE_CONFIG).concat(Demo.CASE_CONFIG).concat(Demo.WIDGET_CONFIG).concat(Demo.COMPONENT_CONFIG);
|
||
|
Demo.stringsForMultiCombo = " 柳州市城贸金属材料有限责任公司 柳州市建福房屋租赁有限公司 柳州市迅昌数码办公设备有限责任公司 柳州市河海贸易有限责任公司 柳州市花篮制衣厂 柳州市兴溪物资有限公司 柳州市针织总厂 柳州市衡管物资有限公司 柳州市琪成机电设备有限公司 柳州市松林工程机械修理厂 柳州市积玉贸易有限公司 柳州市福运来贸易有限责任公司 柳州市钢义物资有限公司 柳州市洋力化工有限公司 柳州市悦盛贸易有限公司 柳州市雁城钢管物资有限公司 柳州市恒瑞钢材经营部 柳州市科拓电子有限公司 柳州市九方电子有限公司 柳州市桂龙汽车配件厂 柳州市制鞋工厂 柳州市炜力科贸有限公司 柳州市希翼贸易有限公司 柳州市兆金物资有限公司 柳州市和润电子科技有限责任公司 柳州市汇凯贸易有限公司 柳州市好机汇商贸有限公司 柳州市泛源商贸经营部 柳州市利汇达物资有限公司 广西全民药业有限责任公司 柳州超凡物资贸易有限责任公司 柳州市贵宏物资有限责任公司 柳州昊恒贸易有限责任公司 柳州市浦联物资有限公司 柳州市广通园林绿化工程有限责任公司 柳州市松发物资贸易有限责任公司 柳州市奥士达办公设备有限责任公司 柳州市海泰物资有限公司 柳州市金三环针织厂 柳州市钢贸物资有限公司 柳州市明阳纺织有限公司 柳州市世科科技发展有限公司 柳州市禄羊贸易有限公司 柳州市金兆阳商贸有限公司 柳州市汇昌物资经营部 柳州市林泰金属物资供应站 柳州市自来水管道材料设备公司 柳州市丹柳铝板有限公司 柳州市桂冶物资有限公司 柳州市宸业物资经营部 柳州市耀成贸易有限公司 柳州奥易自动化科技有限公司 柳州市萃丰科技有限责任公司 柳州市华储贸易有限责任公司 柳州市黄颜钢材有限责任公司 柳州市银盛物资有限责任公司 柳州市新仪化玻供应站 柳州市晶凯化工有限公司 广西柳州市柳江包装纸厂 柳州市志新物资有限责任公司 柳州市兆钢物资有限公司 柳州市友方科技发展有限责任公司 柳州市缝纫机台板家具总厂 柳州市晖海数码办公设备有限责任公司 柳州市富兰特服饰有限责任公司 柳州市柳北区富兴物资经营部 柳州市柳锌福利厂 柳州市海泉印刷有限责任公司 柳州市乾亨贸易有限公司 柳州市悦宁物资贸易有限公司 柳州市昊天贸易有限公司 广西惠字钢铁有限公司 柳州市名青物资有限公司 柳州市林郝物资有限公司 柳州市民政服装厂 柳州市多维劳保用品厂 柳州市轻工物资供应公司 柳州市程源物资有限责任公司 柳州市寿丰物资贸易有限责任公司 柳州市凯凡物资有限公司 柳州市利晖物资经营部 柳州市恒茂金属物资供应站 柳州市中储物资经营部 柳州市第二医疗器械厂 柳州市来鑫物资经营部 柳州市钢鑫物资贸易有限责任公司 柳州市双合袜业有限责任公司 柳州市茂松经贸有限责任公司 柳州市行行物资贸易有限公司 柳州市方一物资有限公司 柳州成异钢管销售有限公司 柳州广惠佳电脑有限公司 桂林市圣泽鑫物资有限公司柳州分公司 柳州市砼基建材贸易有限公司 柳州市海燕针织厂 上海浦光仪表厂柳州销售处 柳州市能电工贸有限责任公司 柳州市广贸物资有限
|
||
|
Demo.MULTI_COMBO_ITEMS = BI.map(Demo.stringsForMultiCombo.match(/[^\s]+/g), function (i, v) {
|
||
|
return {
|
||
|
text: v,
|
||
|
value: v,
|
||
|
title: v
|
||
|
}
|
||
|
});
|