@ -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 |