fineui是帆软报表和BI产品线所使用的前端框架。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

223 lines
6.1 KiB

3 years ago
<html>
<head>
<meta charset="utf-8">
<title></title>
3 years ago
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
3 years ago
</head>
<body>
<div id="wrapper"></div>
<script>
var Item = BI.inherit(BI.BasicButton, {
props: {
baseCls: "bi-list-item-active"
},
render: function () {
var self = this;
return {
type: "bi.vertical_adapt",
items: [
{
el: {
type: "bi.label",
textAlign: "left",
text: this.options.text
},
lgap: this.options.layer * 24 + 24
}
]
};
},
getValue: function () {
return this.options.id;
}
});
BI.shortcut("bi.example.single_custom_tree.item", Item);
var Node = BI.inherit(BI.NodeButton, {
props: {
baseCls: "bi-list-item"
},
render: function () {
var self = this;
return {
type: "bi.vertical_adapt",
items: [
{
el: {
type: "bi.label",
ref: function (_ref) {
self.icon = _ref;
},
text: this.options.open ? "-" : "+",
height: 24,
width: 24
},
lgap: this.options.layer * 24
}, {
type: "bi.label",
textAlign: "left",
text: this.options.text
}
]
};
},
setOpened: function (b) {
Node.superclass.setOpened.apply(this, arguments);
this.icon.setText(b ? "-" : "+");
},
getValue: function () {
return this.options.id;
}
});
BI.shortcut("bi.example.single_custom_tree.node", Node);
var mockData = [
{
id: "无锡",
text: "无锡",
isParent: true
}, {
id: "锡山区",
text: "锡山区",
pId: "无锡",
isParent: true
}, {
id: "安镇街道",
text: "安镇街道",
pId: "锡山区"
}, {
id: "滨湖区",
text: "滨湖区",
pId: "无锡"
}, {
id: "南京",
text: "南京",
isParent: true
}, {
id: "建邺区",
text: "建邺区",
pId: "南京"
}
];
var Tree = BI.inherit(BI.Widget, {
render: function () {
var self = this;
return {
type: "bi.custom_tree",
ref: function (_ref) {
self.tree = _ref;
},
expander: {
type: "bi.expander",
isDefaultInit: false,
el: {},
popup: {
type: "bi.custom_tree"
}
},
el: {
type: "bi.button_tree",
chooseType: 0,
layouts: [
{
type: "bi.vertical"
}
]
},
items: []
};
},
_formatItems: function (items) {
var nodes = BI.map(items, function (index, item) {
return BI.extend({
type: item.isParent ? "bi.example.single_custom_tree.node" : "bi.example.single_custom_tree.item"
}, item);
});
return this.traversalLayers(BI.Tree.transformToTreeFormat(nodes), 0);
},
traversalLayers: function (items, layer) {
var self = this;
BI.each(items, function (index, item) {
item.layer = layer;
if (item.children) {
self.traversalLayers(item.children, layer + 1);
}
});
return items;
},
populate: function (items) {
this.tree.populate(this._formatItems(items));
}
});
BI.shortcut("bi.example.single_custom_tree", Tree);
var Widget = BI.inherit(BI.Widget, {
setup: function () {
var wrapper, tree;
return function () {
return {
type: "bi.vertical",
items: [{
type: "bi.vertical",
invisible: true,
ref: function (_ref) {
wrapper = _ref;
},
items: [{
type: "bi.example.single_custom_tree",
height: 100,
ref: function (_ref) {
tree = _ref;
}
}]
}, {
type: "bi.button",
text: "点击",
handler: function () {
tree.populate(mockData);
wrapper.setVisible(true);
}
}]
};
};
}
});
BI.shortcut("demo.parent", Widget);
BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "demo.parent"
},
top: 100,
left: 100
}],
element: "#wrapper"
});
</script>
</body>
</html>