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