forked from fanruan/fineui
guy
8 years ago
32 changed files with 1220 additions and 464 deletions
@ -0,0 +1,62 @@
|
||||
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 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.collection_table", Demo.Func); |
@ -0,0 +1,57 @@
|
||||
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 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.grid_table", Demo.Func); |
@ -0,0 +1,367 @@
|
||||
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 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.table_view", Demo.Func); |
@ -0,0 +1,233 @@
|
||||
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.button_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: "这里是一段文字" + BI.UUID(), |
||||
value: "这里是一段文字" + BI.UUID() |
||||
}, { |
||||
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()); |
||||
} |
||||
} |
||||
}] |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.branch_tree", Demo.Func); |
@ -0,0 +1,43 @@
|
||||
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" |
||||
}]); |
||||
} |
||||
}); |
||||
$.shortcut("demo.display_tree", Demo.Func); |
@ -0,0 +1,103 @@
|
||||
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()); |
||||
} |
||||
} |
||||
}] |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.handstand_branch_tree", Demo.Func); |
@ -0,0 +1,87 @@
|
||||
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()); |
||||
} |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.level_tree", Demo.Func); |
@ -0,0 +1,86 @@
|
||||
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())); |
||||
} |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.simple_tree", Demo.Func); |
@ -0,0 +1,39 @@
|
||||
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 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.collection_view", Demo.Func); |
@ -0,0 +1,50 @@
|
||||
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 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.grid_view", Demo.Func); |
Loading…
Reference in new issue