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.
222 lines
6.1 KiB
222 lines
6.1 KiB
<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>
|
|
|