<section class="widgetContainer">
<header>
<input type="search" id="txtSearchList" placeholder="  Search..." style="font-family:Arial, FontAwesome">
</header>
<section id="fleet-list-tree"></section>
<footer>
<button id="btnCollapse" title="Collapse all"><i class="fa fa-caret-right"></i> All</button>
<button id="btnExpand" title="Expand all"><i class="fa fa-caret-down"></i> All</button>
<button id="btnVisibility" title="Show/Hide nodes"><i class="fa fa-eye"></i></button>
</footer>
</section>#container {
overflow: auto;
}{
"schema": {
"type": "object",
"title": "Settings",
"properties": {
"templateSelector": {
"type": "object",
"title": "Template selector:",
"properties": {
"selector": {
"title": "Set an attribute",
"type": "string",
"default": ""
}
}
},
"templates": {
"type": "array",
"title": "Template set",
"minItems": 0,
"items": {
"title": " ",
"type": "object",
"properties": {
"name": {
"title": "Template name",
"type": "string"
},
"function": {
"title": "Template function for node: f(node)",
"type": "string",
"default": "return `\r\n<div class=\"search-clue\">\r\n\t${node.text.toLowerCase()} ${node.id.toLowerCase()}\r\n</div>\r\n<div>${node.text}</div>\r\n`;"
}
}
}
}
}
},
"form": [
"templateSelector",
{
"key": "templates",
"items": [
"templates[].name",
{
"key": "templates[].function",
"type": "javascript"
}
]
}
]
}self.onInit = async function() {
TwinDimensionTree.generate(self.ctx);
self.onResize();
}
self.onDataUpdated = function() {
}
self.actionSources = function() {
return {
'folderNodeSelected': {
name: 'widget-action.folder-node-selected',
multiple: false
},
'leafNodeSelected': {
name: 'widget-action.leaf-node-selected',
multiple: false
}
};
}
self.onResize = function() {
}
self.onDestroy = function() {
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent