forked from fanruan/fineui
Zhenfei.Li
7 years ago
967 changed files with 238212 additions and 795803 deletions
@ -1,48 +0,0 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
|
||||
var canvas = BI.createWidget({ |
||||
type: "bi.canvas", |
||||
width: 500, |
||||
height: 600 |
||||
}); |
||||
canvas.rect(0, 0, 80, 100, "#7dbd2f"); |
||||
|
||||
canvas.line(80, 0, 100, 100, 200, 100, 300, 0, { |
||||
strokeStyle: "red", |
||||
lineWidth: 2 |
||||
}); |
||||
|
||||
canvas.circle(150, 50, 20, "green"); |
||||
|
||||
// 渐变矩形
|
||||
canvas.rect(0, 120, 80, 100, canvas.gradient(0, 120, 80, 220, "#FF0000", "#00FF00")); |
||||
|
||||
// 空心图形
|
||||
canvas.hollow(100, 120, 100, 220, 200, 120, { |
||||
strokeStyle: "blue" |
||||
}); |
||||
|
||||
// 实心图形
|
||||
canvas.solid(100, 240, 200, 240, 150, 280, 200, 320, 100, 320, { |
||||
strokeStyle: "yellow", |
||||
fillStyle: "pink" |
||||
}); |
||||
|
||||
canvas.stroke(); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: canvas, |
||||
left: 100, |
||||
top: 50 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.canvas", Demo.Func); |
||||
@ -1,32 +0,0 @@
|
||||
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); |
||||
@ -1,33 +0,0 @@
|
||||
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); |
||||
@ -1,21 +0,0 @@
|
||||
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); |
||||
@ -1,61 +0,0 @@
|
||||
Demo.RichEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-rich-editor" |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.rich_editor", |
||||
height: "100%", |
||||
cls: "bi-border", |
||||
ref: function () { |
||||
self.editor = this; |
||||
}, |
||||
toolbar: { |
||||
type: "bi.rich_editor_text_toolbar", |
||||
buttons: [ |
||||
{type: "bi.rich_editor_font_chooser"}, |
||||
{type: "bi.rich_editor_size_chooser"}, |
||||
{type: "bi.rich_editor_bold_button"}, |
||||
{type: "bi.rich_editor_italic_button"}, |
||||
{type: "bi.rich_editor_underline_button"}, |
||||
{type: "bi.rich_editor_color_chooser"}, |
||||
{ |
||||
type: "bi.rich_editor_background_color_chooser", |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function (backgroundColor) { |
||||
self.editor.element.css({ |
||||
backgroundColor: backgroundColor, |
||||
color: BI.DOM.getContrastColor(backgroundColor) |
||||
}); |
||||
} |
||||
}] |
||||
}, |
||||
{type: "bi.rich_editor_align_left_button"}, |
||||
{type: "bi.rich_editor_align_center_button"}, |
||||
{type: "bi.rich_editor_align_right_button"}, |
||||
{type: "bi.rich_editor_param_button"} |
||||
] |
||||
} |
||||
}, |
||||
left: 10, |
||||
top: 10, |
||||
bottom: 10, |
||||
right: 10 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
mounted: function () { |
||||
var image = BI.DOM.getImage("测试"); |
||||
var src = image.src; |
||||
var style = image.style; |
||||
this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>"); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.rich_editor", Demo.RichEditor); |
||||
@ -1,33 +0,0 @@
|
||||
/** |
||||
* Created by Windy on 2017/12/15. |
||||
*/ |
||||
Demo.SQLEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-editor" |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
this.formula = BI.createWidget({ |
||||
type : 'bi.sql_editor', |
||||
supportParam: true, |
||||
width : 300, |
||||
height : 200, |
||||
value : "select * from DEMO_CONTRACT where 合同类型 = ${长期协议} and 购买数量 = sum([1,2,3,4])" |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.left", |
||||
element: this, |
||||
items: [this.formula, { |
||||
type: "bi.button", |
||||
height: 24, |
||||
handler: function () { |
||||
BI.Msg.alert("", self.formula.getValue()); |
||||
} |
||||
|
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}) |
||||
} |
||||
}); |
||||
BI.shortcut("demo.sql_editor", Demo.SQLEditor); |
||||
@ -1,62 +0,0 @@
|
||||
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); |
||||
@ -1,57 +0,0 @@
|
||||
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); |
||||
@ -1,57 +0,0 @@
|
||||
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); |
||||
@ -1,367 +0,0 @@
|
||||
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); |
||||
@ -1,45 +0,0 @@
|
||||
/** |
||||
* Created by Dailer on 2017/7/11. |
||||
*/ |
||||
Demo.StaticCombo = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "" |
||||
}, |
||||
|
||||
|
||||
beforeMount: function () { |
||||
this.refs.setValue(2); |
||||
}, |
||||
|
||||
render: function () { |
||||
|
||||
var self = this; |
||||
|
||||
return { |
||||
type: "bi.horizontal_auto", |
||||
items: [{ |
||||
type: "bi.static_combo", |
||||
text: "Value 不变", |
||||
width: 300, |
||||
ref: function (_ref) { |
||||
self.refs = _ref; |
||||
}, |
||||
items: [ |
||||
{ |
||||
text: "MVC-1", |
||||
value: 1 |
||||
}, { |
||||
text: "MVC-2", |
||||
value: 2 |
||||
}, { |
||||
text: "MVC-3", |
||||
value: 3 |
||||
} |
||||
] |
||||
}], |
||||
vgap: 20 |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("demo.static_combo", Demo.StaticCombo); |
||||
@ -1,42 +0,0 @@
|
||||
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 clipboard = BI.createWidget({ |
||||
type: "bi.clipboard", |
||||
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: clipboard, |
||||
left: 100, |
||||
top: 100 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.clipboard", Demo.Func); |
||||
@ -1,35 +0,0 @@
|
||||
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); |
||||
@ -1,33 +0,0 @@
|
||||
/** |
||||
* Created by Dailer on 2017/7/11. |
||||
*/ |
||||
Demo.SignInitialEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "" |
||||
}, |
||||
mounted: function () { |
||||
this.editor.setValue({ |
||||
value: "123", |
||||
text: "sdga" |
||||
}); |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.horizontal_adapt", |
||||
items: [{ |
||||
type: "bi.sign_initial_editor", |
||||
ref: function () { |
||||
self.editor = this; |
||||
}, |
||||
cls: "layout-bg5", |
||||
text: "原始值", |
||||
width: 300 |
||||
}], |
||||
vgap: 20 |
||||
|
||||
}; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("demo.sign_initial_editor", Demo.SignInitialEditor); |
||||
@ -1,160 +0,0 @@
|
||||
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 table = BI.createWidget({ |
||||
type: "bi.adaptive_table", |
||||
el: { |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.grid_table" |
||||
} |
||||
}, |
||||
width: 600, |
||||
height: 400, |
||||
minColumnSize: [100, 100, 100], |
||||
columnSize: [100, 100, 100], |
||||
header: header, |
||||
items: items |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
items: [[{ |
||||
el: table |
||||
}]] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.adaptive_table", Demo.Func); |
||||
@ -1,149 +0,0 @@
|
||||
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.layer_tree_table", |
||||
el: { |
||||
type: "bi.adaptive_table", |
||||
el: { |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.collection_table", |
||||
mergeRule: function (col1, col2) { |
||||
return BI.isEqual(col1, col2); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
width: 600, |
||||
height: 400, |
||||
isNeedFreeze: true, |
||||
isNeedMerge: true, |
||||
freezeCols: [0, 1, 2], |
||||
mergeCols: [0, 1, 2], |
||||
minColumnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
columnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
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: [[{ |
||||
el: table |
||||
}]] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.layer_tree_table", Demo.Func); |
||||
@ -1,149 +0,0 @@
|
||||
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.tree_table", |
||||
el: { |
||||
type: "bi.adaptive_table", |
||||
el: { |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.collection_table", |
||||
mergeRule: function (col1, col2) { |
||||
return BI.isEqual(col1, col2); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
width: 600, |
||||
height: 400, |
||||
isNeedFreeze: true, |
||||
isNeedMerge: true, |
||||
freezeCols: [0, 1, 2], |
||||
mergeCols: [0, 1, 2], |
||||
minColumnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
columnSize: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100], |
||||
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: [[{ |
||||
el: table |
||||
}]] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.tree_table", Demo.Func); |
||||
@ -1,149 +0,0 @@
|
||||
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); |
||||
@ -1,233 +0,0 @@
|
||||
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); |
||||
@ -1,103 +0,0 @@
|
||||
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); |
||||
@ -1,137 +0,0 @@
|
||||
Demo.Face = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-face" |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.sequence_table", |
||||
ref: function () { |
||||
self.table = this; |
||||
}, |
||||
isNeedFreeze: null, |
||||
isNeedMerge: false, |
||||
summaryCellStyleGetter: function (isLast) { |
||||
return { |
||||
background: "rgb(4, 177, 194)", |
||||
color: "#ffffff", |
||||
fontWeight: "bold" |
||||
}; |
||||
}, |
||||
sequenceCellStyleGetter: function (index) { |
||||
return { |
||||
background: "rgb(4, 177, 194)", |
||||
color: "#ffffff", |
||||
fontWeight: "bold" |
||||
}; |
||||
}, |
||||
headerCellStyleGetter: function () { |
||||
return { |
||||
background: "rgb(4, 177, 194)", |
||||
color: "#ffffff", |
||||
fontWeight: "bold" |
||||
}; |
||||
}, |
||||
el: { |
||||
type: "bi.adaptive_table", |
||||
el: { |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.grid_table" |
||||
} |
||||
} |
||||
}, |
||||
sequence: { |
||||
type: "bi.sequence_table_list_number", |
||||
pageSize: 100, |
||||
sequenceHeaderCreator: function () { |
||||
return { |
||||
type: "bi.normal_sequence_header_cell", |
||||
styleGetter: function () { |
||||
return { |
||||
background: "rgb(4, 177, 194)", |
||||
color: "#ffffff", |
||||
fontWeight: "bold" |
||||
}; |
||||
} |
||||
}; |
||||
} |
||||
}, |
||||
itemsCreator: function (op, populate) { |
||||
} |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
mounted: function () { |
||||
var self = this; |
||||
if (BI.isNull(BI.isExpanded)) { |
||||
BI.isExpanded = false; |
||||
} else if (!BI.isExpanded) { |
||||
TABLE_ITEMS = this._expandData(TABLE_ITEMS, 3); |
||||
TABLE_HEADER = this._expandHeadData(TABLE_HEADER, 3); |
||||
BI.isExpanded = true; |
||||
} |
||||
this._resizeHandler = BI.debounce(function () { |
||||
var width = self.element.width(), height = self.element.height(); |
||||
if (self.table.getWidth() !== width || self.table.getHeight() !== height) { |
||||
self.table.setWidth(width); |
||||
self.table.setHeight(height); |
||||
self.table.populate(); |
||||
} |
||||
}, 0); |
||||
BI.ResizeDetector.addResizeListener(this, function () { |
||||
self._resizeHandler(); |
||||
}); |
||||
this.table.setWidth(this.element.width()); |
||||
this.table.setHeight(this.element.height()); |
||||
this.table.attr("columnSize", BI.makeArray(TABLE_HEADER[0].length, "")); |
||||
this.table.attr("minColumnSize", BI.makeArray(TABLE_HEADER[0].length, 60)); |
||||
this.table.attr("isNeedFreeze", true); |
||||
this.table.attr("freezeCols", []); |
||||
this.table.attr("showSequence", true); |
||||
this.table.attr("headerRowSize", 15); |
||||
this.table.attr("rowSize", 15); |
||||
this.table.populate(TABLE_ITEMS, TABLE_HEADER); |
||||
}, |
||||
|
||||
_expandData: function (items, times) { |
||||
var copy = BI.deepClone(items); |
||||
for (var m = 0; m < times - 1; m++) { |
||||
BI.each(items, function (i, row) { |
||||
copy.push(row); |
||||
}); |
||||
} |
||||
|
||||
for (var n = 0; n < copy.length; n++) { |
||||
for (var m = 0; m < times - 1; m++) { |
||||
BI.each(items[n % 100], function (j, item) { |
||||
copy[n].push(item); |
||||
}); |
||||
} |
||||
} |
||||
return copy; |
||||
}, |
||||
|
||||
_expandHeadData: function (items, times) { |
||||
var copy = BI.deepClone(items); |
||||
for (var n = 0; n < copy.length; n++) { |
||||
for (var m = 0; m < times - 1; m++) { |
||||
BI.each(items[n], function (j, item) { |
||||
copy[n].push(item); |
||||
}); |
||||
} |
||||
} |
||||
return copy; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.large_table", Demo.Face); |
||||
@ -1,54 +0,0 @@
|
||||
/* 文件管理导航 |
||||
Created by dailer on 2017 / 7 / 21. |
||||
*/ |
||||
Demo.FileManager = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "" |
||||
}, |
||||
|
||||
render: function () { |
||||
var items = [{ |
||||
id: "1", |
||||
value: "1", |
||||
text: "根目录", |
||||
lastModify: 1454316355142 |
||||
}, { |
||||
id: "11", |
||||
pId: "1", |
||||
value: "11", |
||||
text: "第一级子目录1", |
||||
lastModify: 1454316355142 |
||||
}, { |
||||
id: "12", |
||||
pId: "1", |
||||
value: "12", |
||||
text: "第一级子目录2", |
||||
lastModify: 1454316355142 |
||||
}, { |
||||
id: "111", |
||||
pId: "11", |
||||
value: "111", |
||||
text: "第二级子目录", |
||||
lastModify: 1454316355142 |
||||
}, { |
||||
id: "121", |
||||
pId: "111", |
||||
buildUrl: "www.baidu.com", |
||||
value: "121", |
||||
text: "文件1", |
||||
lastModify: 1454316355142 |
||||
}, { |
||||
id: "122", |
||||
pId: "111", |
||||
buildUrl: "www.baidu.com", |
||||
value: "122", |
||||
text: "文件2", |
||||
lastModify: 1454316355142 |
||||
}]; |
||||
return { |
||||
type: "bi.file_manager", |
||||
items: items |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.file_manager", Demo.FileManager); |
||||
@ -1,215 +0,0 @@
|
||||
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(); |
||||
// 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); |
||||
@ -1,233 +0,0 @@
|
||||
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); |
||||
@ -1,159 +0,0 @@
|
||||
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], |
||||
items: [], |
||||
header: [] |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.tab", |
||||
showIndex: 1, |
||||
cardCreator: function (v) { |
||||
switch (v) { |
||||
case 1: |
||||
table1.attr("columnSize", ["", "", ""]); |
||||
table1.populate(items, header); |
||||
return table1; |
||||
} |
||||
} |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.responsive_table", Demo.Func); |
||||
@ -1,159 +0,0 @@
|
||||
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); |
||||
@ -1,57 +0,0 @@
|
||||
/** |
||||
* Created by Dailer on 2017/7/26. |
||||
*/ |
||||
|
||||
|
||||
Demo.SwitchTree = BI.inherit(BI.Widget, { |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
var tree = BI.createWidget({ |
||||
type: "bi.switch_tree", |
||||
items: BI.deepClone(Demo.CONSTANTS.TREE), |
||||
value: "第五级文件1" |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: tree |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
height: 25, |
||||
text: "点击切换", |
||||
handler: function () { |
||||
tree.switchSelect(); |
||||
} |
||||
}, |
||||
height: 25 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
height: 25, |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.alert("", JSON.stringify(tree.getValue())); |
||||
} |
||||
}, |
||||
height: 25 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
height: 25, |
||||
text: "setValue (第二级文件1)", |
||||
handler: function () { |
||||
tree.setValue(["第二级文件1"]); |
||||
} |
||||
}, |
||||
height: 25 |
||||
}], |
||||
width: 500, |
||||
hgap: 300 |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("demo.switch_tree", Demo.SwitchTree); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 260 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 534 B |
@ -1,49 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<!--核心css文件--> |
||||
<link rel="stylesheet" type="text/css" href="core.css"/> |
||||
<!--基础css文件， 包含一些最基本控件的样式--> |
||||
<link rel="stylesheet" type="text/css" href="base.css"/> |
||||
<!--BI控件样式--> |
||||
<link rel="stylesheet" type="text/css" href="widget.css"/> |
||||
<!--资源样式， 包括font、icon、background、app--> |
||||
<link rel="stylesheet" type="text/css" href="resource.css"/> |
||||
<!--当前demo定义的样式--> |
||||
<link rel="stylesheet" type="text/css" href="demo.css"/> |
||||
|
||||
<!--IE9及以下兼容--> |
||||
<script src="polyfill.js"></script> |
||||
<!--核心js--> |
||||
<script src="core.js"></script> |
||||
<!--BI路由js--> |
||||
<script src="router.js"></script> |
||||
<!--fix1.0版本框架， 只用ui的话不用引入， fix1.0依赖于router，引入的顺序需在core.js、router.js之后， 可以和2.0版本同时使用或使用任一个均可--> |
||||
<script src="fix/fix-1.0.js"></script> |
||||
<!--fix2.0版本框架， 只用ui的话不用引入， 引入的顺序需在core.js之后--> |
||||
<script src="fix/fix.js"></script> |
||||
|
||||
<!--基础js， 包括最基本的控件--> |
||||
<script src="base.js"></script> |
||||
<!--基础js， 存放一些通用组件，如选色组件、富文本组件等--> |
||||
<script src="case.js"></script> |
||||
<!--BI控件js--> |
||||
<script src="widget.js"></script> |
||||
|
||||
<!--fix2.0版本框架与fineui结合的代码， 只用ui的话不用引入， 引入的顺序需在fix和控件库(core/base/case/widget)之后之后--> |
||||
<script src="fix/fix.compact.js"></script> |
||||
|
||||
<!--工程配置文件，主要是BI.servletURL(根目录)、BI.resourceURL(资源路径)、BI.i18n(国际化)--> |
||||
<script src="config.js"></script> |
||||
|
||||
<script src="demo.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="wrapper"></div> |
||||
</body> |
||||
|
||||
</html> |
||||
File diff suppressed because one or more lines are too long
@ -1,14 +0,0 @@
|
||||
.DS_Store |
||||
.svn |
||||
.sass-cache |
||||
.vscode |
||||
.tmp |
||||
node_modules |
||||
bower_components |
||||
tmp |
||||
dist |
||||
archive |
||||
archive.zip |
||||
*.log |
||||
#_book |
||||
test |
||||
@ -1,21 +0,0 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2017 gittz |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -1,6 +0,0 @@
|
||||
# 通用规范 |
||||
1. 控件都会提供setValue, getValue, populate这几个方法来设置值，获取值(展示类控件除外)和刷新控件 |
||||
2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能，是否可见，是否有效状态，并且在fineui2.0之后，会自动给子组件设置同样的状态，不要重写这些方法，一些需要在设置状态时的额外操作可以通过重写_setXXX来实现 |
||||
3. 布局都有lgap、rgap、tgap、bgap、hgap、vgap、scrollable,scrollx,scrolly,items属性 |
||||
3. 慎用empty |
||||
4. 谨慎监听和触发BI.Controller.EVENT_CHANGE事件，一般来说，控件都会有一个BI.ClassName.EVENT_CHANGE事件,一些特殊的事件会在对应控件文档中列出 |
||||
@ -1,15 +0,0 @@
|
||||
# FineUI |
||||
FineUI文档 |
||||
|
||||
|
||||
#### 文档地址 |
||||
|
||||
GithubPages: [https://fanruan.github.io/fineui](https://fanruan.github.io/fineui) |
||||
|
||||
CodingPages: [http://fanruan.coding.me/fineui](http://fanruan.coding.me/fineui) |
||||
|
||||
|
||||
#### Demo |
||||
|
||||
CodingPages: [http://fanruan.coding.me/fineui/dist/index.html](http://fanruan.coding.me/fineui/dist/index.html) |
||||
|
||||
@ -1,35 +0,0 @@
|
||||
|
||||
|
||||
#### 第一个demo |
||||
```html |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="https://fanruan.coding.me/fineui/dist/bundle.min.css" /> |
||||
<script src="https://coding.net/u/fanruan/p/fineui/git/raw/master/dist/bundle.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<script> |
||||
$(function(){ |
||||
BI.createWidget({ |
||||
type:"bi.absolute", |
||||
element: "body", |
||||
items: [{ |
||||
el:{ |
||||
type: "bi.button", |
||||
text: "这是一个按钮" |
||||
}, |
||||
left: 100, |
||||
top: 100 |
||||
}] |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
``` |
||||
|
||||
#### 源码集成Demo |
||||
BI的组件就是集成的fineui进行开发的 |
||||
[https://coding.net/u/fanruan/p/bi-components/](https://coding.net/u/fanruan/p/bi-components/) |
||||
@ -1,203 +0,0 @@
|
||||
# Summary |
||||
|
||||
## 总览 |
||||
* [概览](README.md) |
||||
* [起步](START.md) |
||||
|
||||
## 通用规范 |
||||
* [通用规范](OVERVIEW.md) |
||||
|
||||
## 核心控件 |
||||
* 布局 |
||||
* [vertical](core/layout/vertical.md) |
||||
* [horizontal](core/layout/horizontal.md) |
||||
* [htape](core/layout/htape.md) |
||||
* [vtape](core/layout/vtape.md) |
||||
* [center_adapt](core/layout/center_adapt.md) |
||||
* [vertical_adapt](core/layout/vertical_adapt.md) |
||||
* [left_right_vertical_adapt](core/layout/left_right_vertical_adapt.md) |
||||
* [flow](core/layout/flow.md) |
||||
* [center](core/layout/center.md) |
||||
* [horizontal_adapt](core/layout/horizontal_adapt.md) |
||||
* [horizontal_auto](core/layout/horizontal_auto.md) |
||||
* [horizontal_float](core/layout/horizontal_float.md) |
||||
* [float_center](core/layout/float_center.md) |
||||
* [border](core/layout/border.md) |
||||
* [grid](core/layout/grid.md) |
||||
* [table](core/layout/table.md) |
||||
* [td](core/layout/td.md) |
||||
* ... |
||||
* 抽象控件 |
||||
* [button_group](core/abstract/button_group.md) |
||||
* [button_tree](core/abstract/button_tree.md) |
||||
* [virtual_group](core/abstract/virtual_group.md) |
||||
* [custom_tree](core/abstract/custom_tree.md) |
||||
* [grid_view](core/abstract/grid_view.md) |
||||
* [collection_view](core/abstract/collection_view.md) |
||||
* [list_view](core/abstract/list_view.md) |
||||
* [virtual_list](core/abstract/virtual_list.md) |
||||
* 组合控件 |
||||
* [combo](core/combination/bi.combo.md) |
||||
* [expander](core/combination/bi.expander.md) |
||||
* [combo_group](core/combination/combo_group.md) |
||||
* [loader](core/combination/loader.md) |
||||
* [navigation](core/combination/navigation.md) |
||||
* [searcher](core/combination/searcher.md) |
||||
* [switcher](core/combination/switcher.md) |
||||
* [tab](core/combination/tab.md) |
||||
* 弹出层 |
||||
* [float_box](core/layer/layer_float_box.md) |
||||
* [popup_view](core/layer/layer_popup.md) |
||||
* [searcher_view](core/layer/layer_searcher.md) |
||||
* [Widget](core/widget.md) |
||||
* [Single](core/single.md) |
||||
* [BasicButton](core/basic_button.md) |
||||
* [NodeButton](core/node_button.md) |
||||
* [Pane](core/pane.md) |
||||
|
||||
## 基础控件 |
||||
* [label](base/label.md) |
||||
* [bubble](base/bubble.md) |
||||
* [toast](base/toast.md) |
||||
* [message](base/message.md) |
||||
* 按钮 |
||||
* [button](base/button/button.md) |
||||
* [text_button](base/button/text_button.md) |
||||
* [icon_button](base/button/icon_button.md) |
||||
* [image_button](base/button/image_button.md) |
||||
* 编辑框 |
||||
* [editor](base/editor/editor.md) |
||||
* [code_editor](base/editor/code_editor.md) |
||||
* [multifile_editor](base/editor/multifile_editor.md) |
||||
* [textarea_editor](base/editor/textarea_editor.md) |
||||
* [formula_editor](base/editor/formula_editor.md) |
||||
* [rich_editor](base/editor/rich_editor.md) |
||||
* 表格 |
||||
* [table_view](base/table/table_view.md) |
||||
* [grid_table](base/table/grid_table.md) |
||||
* [collection_table](base/table/collection_table.md) |
||||
* [resizable_table](base/table/resizable_table.md) |
||||
* [pager](base/pager.md) |
||||
* [svg](base/svg.md) |
||||
* [canvas](base/canvas.md) |
||||
|
||||
## 实例控件 |
||||
* 按钮 |
||||
* [multi_select_item](case/button/multi_select_item.md) |
||||
* [single_select_item](case/button/single_select_item.md) |
||||
* [single_select_radio_item](case/button/single_select_radio_item.md) |
||||
* 文本框 |
||||
* [shelter_editor](case/editor/shelter_editor.md) |
||||
* [sign_editor](case/editor/sign_editor.md) |
||||
* [sign_initial_editor](case/editor/sign_initial_editor.md) |
||||
* [state_editor](case/editor/state_editor.md) |
||||
* [simple_state_editor](case/editor/simple_state_editor.md) |
||||
* [clear_editor](detailed/text_input/bi.clear_editor.md) |
||||
* 列表 |
||||
* [select_list](case/list/list.select.md) |
||||
* [lazy_loader](case/loader/lazy_loader.md) |
||||
* [list_loader](case/loader/list_loader.md) |
||||
* [sort_list(jquery-sortable封装)](case/loader/sort_list.md) |
||||
* 面板 |
||||
* [pane_list](case/layer/pane_list.md) |
||||
* [panel](case/layer/panel.md) |
||||
* popup弹出层 |
||||
* [multi_popup_view](case/layer/multi_popup_layer.md) |
||||
* [popup_panel](case/layer/layer_panel.md) |
||||
* 触发器 |
||||
* [editor_trigger](case/trigger/editor_trigger.md) |
||||
* [icon_trigger](case/trigger/icon_trigger.md) |
||||
* [text_trigger](case/trigger/text_trigger.md) |
||||
* [select_text_trigger](case/trigger/select_text_trigger.md) |
||||
* 下拉框 |
||||
* [bubble_combo](case/combo/bubble_combo.md) |
||||
* [icon_combo](case/combo/icon_combo.md) |
||||
* [static_combo](case/combo/static_combo.md) |
||||
* [text_value_combo](case/combo/text_value_combo.md) |
||||
* [text_value_check_combo](case/combo/text_value_check_combo.md) |
||||
* [editor_icon_check_combo](case/combo/editor_icon_check_combo.md) |
||||
* [text_value_down_list_combo](case/combo/text_value_down_list_combo.md) |
||||
* 树 |
||||
* [branch_tree](case/tree/branch_tree.md) |
||||
* [handstand_branch_tree](case/tree/handstand_branch_tree.md) |
||||
* [display_tree](case/tree/display_tree.md) |
||||
* [simple_tree](case/tree/simple_tree.md) |
||||
* [level_tree](case/tree/level_tree.md) |
||||
* [branch_relation](case/tree/branch_relation.md) |
||||
* 表格 |
||||
* [adaptive_table](case/table/adaptive_table.md) |
||||
* [tree_table](case/table/tree_table.md) |
||||
* [layer_tree_table](case/table/layer_tree_table.md) |
||||
* Pager |
||||
* [all_count_pager](case/pager/all_count_pager.md) |
||||
* [direction_pager](case/pager/direction_pager.md) |
||||
* [calendar](case/calendar.md) |
||||
* [clipboard](case/clipboard.md) |
||||
* [complex_canvas](case/complex_canvas.md) |
||||
* [color_chooser](case/color_chooser.md) |
||||
* [color_chooser_popup](case/color_chooser_popup.md) |
||||
* [segment](case/segment.md) |
||||
|
||||
## 详细控件 |
||||
* 各种小组件 |
||||
* [通用按钮](detailed/bi.button/general.md) |
||||
* [提示性信息](detailed/bi.button/tooltip.md) |
||||
* [各种items](detailed/bi.button/items.md) |
||||
* [各种节点nodes](detailed/bi.button/node.md) |
||||
* [各种segment](detailed/bi.button/segment.md) |
||||
* 文本框控件 |
||||
* [text_editor](detailed/text_input/bi.text_editor.md) |
||||
* [search_editor](detailed/text_input/bi.search_editor.md) |
||||
* [number_editor](detailed/text_input/number_editor.md) |
||||
* 树 |
||||
* [single_level_tree](detailed/tree/single_level_tree.md) |
||||
* [select_level_tree](detailed/tree/select_level_tree.md) |
||||
* [multi_single_level_tree](detailed/tree/multi_single_level_tree.md) |
||||
* [multi_select_level_tree](detailed/tree/multi_select_level_tree.md) |
||||
* [switch_tree](detailed/tree/bi.switch_tree.md) |
||||
* 表格 |
||||
* [preview_table](detailed/table/bi.preview_table.md) |
||||
* [responsive_table](detailed/table/bi.responsive_table.md) |
||||
* [sequence_table](detailed/table/bi.sequence_table.md) |
||||
* [page_table](detailed/table/bi.page_table.md) |
||||
* 下拉列表 |
||||
* [down_list_combo](detailed/down_list_combo.md) |
||||
* 复选下拉框 |
||||
* [multi_select_combo](detailed/multi_select_combo.md) |
||||
* 简单下拉树 |
||||
* [single_tree_combo](detailed/combo/single_tree_combo.md) |
||||
* 多层级下拉树 |
||||
* [multilayer_single_tree_combo](detailed/combo/multilayer_single_tree_combo.md) |
||||
* 可选下拉树 |
||||
* [select_tree_combo](detailed/combo/select_tree_combo.md) |
||||
* 多层级可选下拉树 |
||||
* [multilayer_select_tree_combo](detailed/combo/multilayer_select_tree_combo.md) |
||||
* 复选下拉树 |
||||
* [multi_tree_combo](detailed/tree/bi.multi_tree_combo.md) |
||||
* 日期相关控件 |
||||
* [year_combo](detailed/year_combo.md) |
||||
* [month_combo](detailed/month_combo.md) |
||||
* [quarter_combo](detailed/quarter_combo.md) |
||||
* [year_month_combo](detailed/date/year_month_combo.md) |
||||
* [year_quarter_combo](detailed/date/year_quarter_combo.md) |
||||
* [date_pane](detailed/date/date_pane.md) |
||||
* [date_combo](detailed/date/date_combo.md) |
||||
* [multidate_combo](detailed/date/multidate_combo.md) |
||||
* [date_time](detailed/date/date_time.md) |
||||
* [time_interval](detailed/date/time_interval.md) |
||||
* 数值区间控件 |
||||
* [number_interval](detailed/number_interval.md) |
||||
* 文件管理 |
||||
* [file_manager](detailed/file_manager.md) |
||||
|
||||
## 部件 |
||||
* [value_chooser_combo](components/value_chooser_combo.md) |
||||
* [value_chooser_pane](components/value_chooser_pane.md) |
||||
* [all_value_chooser_combo](components/all_value_chooser_combo.md) |
||||
* [tree_value_chooser_combo](components/tree_value_chooser_combo.md) |
||||
* [tree_value_chooser_pane](components/tree_value_chooser_pane.md) |
||||
|
||||
## addons |
||||
* sliders |
||||
* [single_slider](detailed/single_slider.md) |
||||
|
||||
@ -1,14 +0,0 @@
|
||||
.DS_Store |
||||
.svn |
||||
.sass-cache |
||||
.vscode |
||||
.tmp |
||||
node_modules |
||||
bower_components |
||||
tmp |
||||
dist |
||||
archive |
||||
archive.zip |
||||
*.log |
||||
#_book |
||||
test |
||||
@ -1,21 +0,0 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2017 gittz |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -1,40 +0,0 @@
|
||||
# bi.bubble |
||||
|
||||
#### 气泡提示 |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/4u705v2v/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.bubble', |
||||
element: "#wrapper", |
||||
height: 30, |
||||
text: "测试" |
||||
}) |
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## API |
||||
##### 基础属性 |
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :----- | :---- |:---- |
||||
| direction | 气泡显示位置 | string | — | "top" | |
||||
| height | 气泡高度 | number | — | 35 | |
||||
| text | 气泡显示内容 | string | — | " " | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setText | 设置文本值 | 需要设置的文本值text| |
||||
|
||||
|
||||
--- |
||||
File diff suppressed because it is too large
Load Diff
@ -1,66 +0,0 @@
|
||||
# bi.button |
||||
|
||||
## 文字类型的按钮,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/txqwwzLm/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.button', |
||||
element: "#wrapper", |
||||
text: '一般按钮', |
||||
level: 'common', |
||||
height: 30 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | — | 10 | |
||||
| vgap | 效果相当于文本框上下padding值 | number | — | 0 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | — | 0 | |
||||
| tgap |效果相当于文本框top-padding值 | number | — | 0 | |
||||
| bgap | 效果相当于文本框bottom-padding值 | number | — | 0 | |
||||
| width | 宽度 | number | — | — | |
||||
| height | 高度 | number | — | — | |
||||
|
||||
|
||||
##### 高级属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| level |按钮类型 | string| common,success,warning,ignore | common | |
||||
| minWidth | 最小宽度，如果block/clear中某一项为true，此项值为0，否则为90 | number | — | 90 | |
||||
| shadow | 是否显示阴影 | boolean| true,false | props.clear !== true | |
||||
| isShadowShowingOnSelected|选中状态下是否显示阴影 | boolean| true,false | true | |
||||
| iconClass | 图标类型 | string| — | " "| |
||||
| block| 是否块状显示，即不显示边框，没有最小宽度的限制 | boolean| true,false | false | |
||||
| clear| 是否去掉边框和背景 |boolean| true,false | false | |
||||
| textAlign | 文字布局 | string | left,center,right | cneter | |
||||
| whiteSpace | 元素内的空白处理方式 | string | normal,nowrap | nowrap| |
||||
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | false | |
||||
| textWidth| 按钮文本宽度 | number| — | null | |
||||
| textHeight | 按钮文本高度 | number| — | null | |
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setText| 设置文本值 | 需要设置的文本值text| |
||||
| setValue | 设置文本值 | 需要设置的文本值text | |
||||
|
||||
--- |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,38 +0,0 @@
|
||||
# bi.icon_button |
||||
|
||||
## 图标button,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/g52u14ay/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.icon_button', |
||||
cls: "close-ha-font", |
||||
width: 20, |
||||
height: 20 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| iconWidth | 图标宽度 | number| — | null | |
||||
| iconHeight | 图标高度 | number| — | null | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,46 +0,0 @@
|
||||
# bi.image_button |
||||
|
||||
## 图片的button,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/yc0g9gLw/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.image_button', |
||||
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128", |
||||
width: 100, |
||||
height: 100 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| src |图片路径 |string | —|" " | |
||||
| iconWidth | 图标宽度 | number/string| — | "100%" | |
||||
| iconHeight | 图标高度 | number/string | — | "100%"| |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| setImageWidth | 设置图片宽度| 宽度width | |
||||
| setImageHeight| 设置图片高度| 高度height| |
||||
| getImageWidth | 获取图片宽度| —| |
||||
| getImageHeight | 获取图片高度| —| |
||||
| setSrc| 设置图片路径| src | |
||||
| getSrc |获取图片路径| — | |
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,53 +0,0 @@
|
||||
# bi.text_button |
||||
|
||||
## 可以点击的一行文字,基类[BI.BasicButton](/core/basicButton.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/5p99L39q/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: 'bi.text_button', |
||||
text: '文字按钮', |
||||
height: 30 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| hgap | 效果相当于文本框左右padding值，如果clear属性为true,该属性值置0 | number | — | 10 | |
||||
| lgap | 效果相当于文本框left-padding值 | number | — | 0 | |
||||
| rgap | 效果相当于文本框right-padding值 | number | — | 0 | |
||||
| textWidth| 按钮文本宽度 | number| — | null | |
||||
| textHeight | 按钮文本高度 | number| — | null | |
||||
|
||||
|
||||
##### 高级属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| py | 拼音 | string| | " " | |
||||
| textAlign | 文字布局 | string | left,center,right | cneter | |
||||
| whiteSpace | 元素内的空白处理方式 | string | normal,nowrap | nowrap| |
||||
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | false | |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| doRedMark | 文本标红 | — | |
||||
| unRedMark | 取消文本标红| —| |
||||
| doHighLight | 文本高亮 | —| |
||||
| unHighLight | 取消文本高亮 | —| |
||||
| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | |
||||
|
||||
--- |
||||
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
# bi.canvas |
||||
|
||||
## canvas绘图,基类[BI.Widget](/core/widget.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/gcgd1va0/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
var canvas = BI.createWidget({ |
||||
type: "bi.canvas", |
||||
element: "#wrapper", |
||||
width: 500, |
||||
height: 600 |
||||
}); |
||||
canvas.circle(150, 50, 20, "green"); |
||||
canvas.stroke(); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| line | 绘制线段| (x0, y0, x1, y1) | |
||||
| rect | 绘制矩形 | (x,y,w,h,color)分别表示左上角的横坐标、纵坐标，矩形宽、高、以及绘制的颜色| |
||||
| circle | 绘制圆形 | (x, y, radius, color)分别表示原点的横坐标，纵坐标，半径以及颜色 | |
||||
| hollow | 填充中空的路径 | — | |
||||
| solid | 填充实心的路径 | — | |
||||
| gradient | 绘制渐变色 | (x0, y0, x1, y1, start, end) | |
||||
| reset | 重置画布 | —| |
||||
| stroke | 绘制 | callback | |
||||
|
||||
--- |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,53 +0,0 @@
|
||||
# bi.code_editor |
||||
|
||||
## 代码文本框,基类[BI.Single](/core/single.md) |
||||
|
||||
{% method %} |
||||
[source](https://jsfiddle.net/fineui/fx86hLgm/) |
||||
|
||||
{% common %} |
||||
```javascript |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.code_editor", |
||||
cls: "mvc-border", |
||||
width: 600, |
||||
height: 400 |
||||
}); |
||||
|
||||
|
||||
``` |
||||
|
||||
{% endmethod %} |
||||
|
||||
## API |
||||
##### 基础属性 |
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||
| :------ |:------------- | :-----| :----|:---- |
||||
| watermark | 文本框placeholder | string | — | " " | |
||||
| readOnly | 是否只读 | boolean | true,false | false| |
||||
| lineHeight | 行高 | number|— | 2| |
||||
| value | 文本框值| string| —| " "| |
||||
| paramFormatter| 参数显示值构造函数 | function| — | value | |
||||
|
||||
|
||||
|
||||
## 对外方法 |
||||
| 名称 | 说明 | 回调参数 |
||||
| :------ |:------------- | :----- |
||||
| insertParam | 插入参数 | param | |
||||
| insertString | 插入字符串 | str| |
||||
| getValue | 获取文本框值|—| |
||||
| setValue | 设置文本框值|value| |
||||
| focus | 文本框获取焦点| — | |
||||
| blur | 文本框失焦|—| |
||||
| setStyle | 设置文本样式 |需要设置的文本标签样式style,例{"color":"#000"} | |
||||
| getStyle | 获取文本样式 |— | |
||||
| refresh | 刷新文本框,codeMirror需要用到 | —| |
||||
|
||||
|
||||
|
||||
|
||||
--- |
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue