@ -1 +1,5 @@
|
||||
FineUI |
||||
FineUI |
||||
|
||||
主页地址:[https://fanruan.github.io/fineui](https://fanruan.github.io/fineui) |
||||
|
||||
帆软BI和帆软报表所使用的前端UI框架。 |
@ -0,0 +1,214 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
var items = [{ |
||||
children: [{ |
||||
type: "bi.page_table_cell", |
||||
text: "node1", |
||||
children: [{ |
||||
type: "bi.page_table_cell", |
||||
text: "childnode1", |
||||
values: [{type: "bi.page_table_cell", text: 101}, { |
||||
type: "bi.page_table_cell", |
||||
text: 102 |
||||
}, {type: "bi.page_table_cell", text: 101}, { |
||||
type: "bi.page_table_cell", |
||||
text: 102 |
||||
}, {type: "bi.page_table_cell", text: 101}] |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "childnode2", |
||||
values: [{type: "bi.page_table_cell", text: 201}, { |
||||
type: "bi.page_table_cell", |
||||
text: 202 |
||||
}, {type: "bi.page_table_cell", text: 201}, { |
||||
type: "bi.page_table_cell", |
||||
text: 202 |
||||
}, {type: "bi.page_table_cell", text: 201}] |
||||
}], |
||||
values: [{type: "bi.page_table_cell", text: 1001}, { |
||||
type: "bi.page_table_cell", |
||||
text: 1002 |
||||
}, {type: "bi.page_table_cell", text: 1001}, { |
||||
type: "bi.page_table_cell", |
||||
text: 1002 |
||||
}, {type: "bi.page_table_cell", text: 1001}] |
||||
}], values: [{type: "bi.page_table_cell", text: 12001}, { |
||||
type: "bi.page_table_cell", |
||||
text: 12002 |
||||
}, {type: "bi.page_table_cell", text: 12001}, { |
||||
type: "bi.page_table_cell", |
||||
text: 12002 |
||||
}, {type: "bi.page_table_cell", text: 12001}] |
||||
}]; |
||||
|
||||
var header = [{ |
||||
type: "bi.page_table_cell", |
||||
text: "header1" |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "header2" |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "jine", |
||||
tag: 1 |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "jine", |
||||
tag: 2 |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "jine", |
||||
tag: 3 |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "金额汇总", |
||||
tag: 4 |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "金额汇总2", |
||||
tag: 5 |
||||
}]; |
||||
|
||||
var crossHeader = [{ |
||||
type: "bi.page_table_cell", |
||||
text: "cross1" |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "cross2" |
||||
}]; |
||||
|
||||
var crossItems = [{ |
||||
children: [{ |
||||
type: "bi.page_table_cell", |
||||
text: "node1", |
||||
values: [1, 2, 3] |
||||
}, { |
||||
type: "bi.page_table_cell", |
||||
text: "node3", |
||||
values: [1, 2] |
||||
}], |
||||
//values: [1, 2]
|
||||
}]; |
||||
|
||||
var table1 = BI.createWidget({ |
||||
type: "bi.page_table", |
||||
el: { |
||||
type: "bi.sequence_table", |
||||
showSequence: true, |
||||
el: { |
||||
type: "bi.dynamic_summary_tree_table", |
||||
el: { |
||||
type: "bi.adaptive_table", |
||||
el: { |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.collection_table" |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
sequence: { |
||||
type: "bi.sequence_table_dynamic_number" |
||||
} |
||||
}, |
||||
summaryCellStyleGetter: function (isLast) { |
||||
return isLast ? { |
||||
backgroundColor: "#6495ED", |
||||
color: "#ffffff" |
||||
} : { |
||||
backgroundColor: "#B0C4DE", |
||||
color: "#ffffff" |
||||
} |
||||
}, |
||||
sequenceCellStyleGetter: function (index) { |
||||
return { |
||||
backgroundColor: "#87CEEB", |
||||
color: "#ffffff" |
||||
} |
||||
}, |
||||
headerCellStyleGetter: function () { |
||||
return { |
||||
backgroundColor: "#6495ED", |
||||
color: "#ffffff" |
||||
} |
||||
}, |
||||
pager: { |
||||
horizontal: { |
||||
pages: false, //总页数
|
||||
curr: 1, //初始化当前页, pages为数字时可用
|
||||
|
||||
hasPrev: function (page) { |
||||
return page > 1; |
||||
}, |
||||
hasNext: function (page) { |
||||
return page < 3; |
||||
} |
||||
}, |
||||
vertical: { |
||||
pages: false, //总页数
|
||||
curr: 1, //初始化当前页, pages为数字时可用
|
||||
|
||||
hasPrev: function (page) { |
||||
return page > 1; |
||||
}, |
||||
hasNext: function (page) { |
||||
return page < 3; |
||||
} |
||||
} |
||||
}, |
||||
itemsCreator: function (op, populate) { |
||||
var vpage = op.vpage || ""; |
||||
var hpage = op.hpage || ""; |
||||
BI.each(header, function (i, h) { |
||||
h.text = h.text + "V" + vpage + "H" + hpage; |
||||
}); |
||||
populate(items, header, crossItems, crossHeader); |
||||
}, |
||||
width: 600, |
||||
height: 400, |
||||
columnSize: [100, 100, 100, 100, 100, 100, 100], |
||||
minColumnSize: [100, 100, 100, 100, 100, 100, 100], |
||||
isNeedMerge: true, |
||||
isNeedFreeze: true, |
||||
mergeCols: [0, 1], |
||||
mergeRule: function (col1, col2) { |
||||
if (col1 === col2) { |
||||
return true; |
||||
} |
||||
if (col1.tag && col2.tag) { |
||||
return col1.tag === col2.tag; |
||||
} |
||||
return col1 === col2; |
||||
}, |
||||
freezeCols: [0, 1], |
||||
header: header, |
||||
items: items, |
||||
crossHeader: crossHeader, |
||||
crossItems: crossItems |
||||
}); |
||||
// table1.populate(items, header, crossItems, crossHeader);
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
items: [[{ |
||||
el: table1 |
||||
}]] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
BI.shortcut("demo.page_table", Demo.Func); |
@ -0,0 +1,159 @@
|
||||
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); |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 894 B After Width: | Height: | Size: 894 B |
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 559 B After Width: | Height: | Size: 559 B |
Before Width: | Height: | Size: 525 B After Width: | Height: | Size: 525 B |
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 502 B |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 694 B After Width: | Height: | Size: 694 B |
Before Width: | Height: | Size: 400 B After Width: | Height: | Size: 400 B |
Before Width: | Height: | Size: 868 B After Width: | Height: | Size: 868 B |
Before Width: | Height: | Size: 769 B After Width: | Height: | Size: 769 B |
Before Width: | Height: | Size: 971 B After Width: | Height: | Size: 971 B |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 386 B After Width: | Height: | Size: 386 B |
Before Width: | Height: | Size: 329 B After Width: | Height: | Size: 329 B |
Before Width: | Height: | Size: 556 B After Width: | Height: | Size: 556 B |
Before Width: | Height: | Size: 514 B After Width: | Height: | Size: 514 B |
Before Width: | Height: | Size: 523 B After Width: | Height: | Size: 523 B |
Before Width: | Height: | Size: 256 B After Width: | Height: | Size: 256 B |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 369 B After Width: | Height: | Size: 369 B |
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 391 B |
Before Width: | Height: | Size: 210 B After Width: | Height: | Size: 210 B |
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 290 B |
Before Width: | Height: | Size: 356 B After Width: | Height: | Size: 356 B |
Before Width: | Height: | Size: 366 B After Width: | Height: | Size: 366 B |
Before Width: | Height: | Size: 208 B After Width: | Height: | Size: 208 B |
Before Width: | Height: | Size: 179 B After Width: | Height: | Size: 179 B |
Before Width: | Height: | Size: 347 B After Width: | Height: | Size: 347 B |
Before Width: | Height: | Size: 432 B After Width: | Height: | Size: 432 B |
Before Width: | Height: | Size: 413 B After Width: | Height: | Size: 413 B |
Before Width: | Height: | Size: 793 B After Width: | Height: | Size: 793 B |
Before Width: | Height: | Size: 826 B After Width: | Height: | Size: 826 B |
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 195 B |
Before Width: | Height: | Size: 302 B After Width: | Height: | Size: 302 B |
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 196 B |
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 303 B |
Before Width: | Height: | Size: 198 B After Width: | Height: | Size: 198 B |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 666 B After Width: | Height: | Size: 666 B |
Before Width: | Height: | Size: 594 B After Width: | Height: | Size: 594 B |
Before Width: | Height: | Size: 459 B After Width: | Height: | Size: 459 B |
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
Before Width: | Height: | Size: 569 B After Width: | Height: | Size: 569 B |
Before Width: | Height: | Size: 218 B After Width: | Height: | Size: 218 B |
Before Width: | Height: | Size: 205 B After Width: | Height: | Size: 205 B |
Before Width: | Height: | Size: 224 B After Width: | Height: | Size: 224 B |
Before Width: | Height: | Size: 196 B After Width: | Height: | Size: 196 B |
Before Width: | Height: | Size: 202 B After Width: | Height: | Size: 202 B |
Before Width: | Height: | Size: 222 B After Width: | Height: | Size: 222 B |
Before Width: | Height: | Size: 199 B After Width: | Height: | Size: 199 B |
Before Width: | Height: | Size: 191 B After Width: | Height: | Size: 191 B |
Before Width: | Height: | Size: 372 B After Width: | Height: | Size: 372 B |
Before Width: | Height: | Size: 352 B After Width: | Height: | Size: 352 B |
Before Width: | Height: | Size: 424 B After Width: | Height: | Size: 424 B |
Before Width: | Height: | Size: 431 B After Width: | Height: | Size: 431 B |
Before Width: | Height: | Size: 208 B After Width: | Height: | Size: 208 B |
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 865 B After Width: | Height: | Size: 865 B |
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 510 B |
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 284 B |
Before Width: | Height: | Size: 221 B After Width: | Height: | Size: 221 B |
Before Width: | Height: | Size: 504 B After Width: | Height: | Size: 504 B |
Before Width: | Height: | Size: 403 B After Width: | Height: | Size: 403 B |
Before Width: | Height: | Size: 452 B After Width: | Height: | Size: 452 B |
Before Width: | Height: | Size: 438 B After Width: | Height: | Size: 438 B |
Before Width: | Height: | Size: 311 B After Width: | Height: | Size: 311 B |
Before Width: | Height: | Size: 625 B After Width: | Height: | Size: 625 B |
Before Width: | Height: | Size: 523 B After Width: | Height: | Size: 523 B |
Before Width: | Height: | Size: 514 B After Width: | Height: | Size: 514 B |
Before Width: | Height: | Size: 432 B After Width: | Height: | Size: 432 B |