<html> <head> <meta charset="utf-8"> <title></title> <!-- <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> </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>