在 fancytree 中延迟加载时,如何将 <table> 添加到 child 节点?
How can I add a <table> to a child node when is lazyloaded in fancytree?
我这周刚开始使用fancytree,我想在节点延迟加载时添加一个table,table的数据将是GET请求的输出并且我有生成 table 的代码,因为我想要它 jquery 但是当它的时间将它添加到 data.result 我不知道如何去做,它期待一个列表children 并且我的函数的输出将是 table,因为它在片段
中
我尝试了很多很可能是愚蠢的事情,但我在示例中找不到任何帮助,请帮忙!
const SOURCEDATA = [
{
"title": "group1",
expanded: true,
children: [
{
"title": "Users",
expanded: true,
children: [
{"title": "User1", "lazy": true},
{"title": "User2", "lazy": true},
{"title": "User3", "lazy": true}
]
}]
},
{
"title": "group2",
children: [
{
"title": "Users",
expanded: true,
children: [
{"title": "User4", "lazy": true},
{"title": "User5", "lazy": true},
{"title": "User6", "lazy": true}
]
}]
}
]
$(function() {
$("#tree").fancytree({
source: SOURCEDATA,
focusOnSelect: true,
activeVisible: true,
lazyLoad: function(event, data){
var node = data.node
data.result = [{"title":"this should be the place for the table"}]
}
});
});
<link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.25/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all.min.js"></script>
<div id="tree">my tree</div>
<table id="user_2">
<thead>
<tr>
<th>Process Name</th>
<th>Process Hashes</th>
<th>Process Author</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="process_name">
<option>Foo.exe</option>
<option></option>
</select>
</td>
<td>
<select id="process_hash">
<option></option>
<option value="0123ABC">0123ABC</option>
<option value="ABC0123">ABC0123</option>
</select>
</td>
<td>
<select id="process_author">
<option></option>
<option value="Someone">Someone</option>
<option value="Somebody">Somebody</option>
</select>
</td>
<td>
<input id="act_allow" type="radio" name="action" value="allow">Allow</input>
<input id="act_deny" type="radio" name="action" value="deny">Deny</input>
<input id="act_warn" type="radio" name="action" value="warn">Warn</input>
</td>
</tr>
</tbody>
</table>
只要 escapeTitles
选项未启用,您应该能够添加原始 HTML 标记作为标题。
你试了吗
lazyLoad: function(event, data){
var node = data.node
data.result = [{title: "<table>...</table>", icon: false}]
}
});
但是不确定这对标准树的样式和事件处理有多大影响。
我这周刚开始使用fancytree,我想在节点延迟加载时添加一个table,table的数据将是GET请求的输出并且我有生成 table 的代码,因为我想要它 jquery 但是当它的时间将它添加到 data.result 我不知道如何去做,它期待一个列表children 并且我的函数的输出将是 table,因为它在片段
中我尝试了很多很可能是愚蠢的事情,但我在示例中找不到任何帮助,请帮忙!
const SOURCEDATA = [
{
"title": "group1",
expanded: true,
children: [
{
"title": "Users",
expanded: true,
children: [
{"title": "User1", "lazy": true},
{"title": "User2", "lazy": true},
{"title": "User3", "lazy": true}
]
}]
},
{
"title": "group2",
children: [
{
"title": "Users",
expanded: true,
children: [
{"title": "User4", "lazy": true},
{"title": "User5", "lazy": true},
{"title": "User6", "lazy": true}
]
}]
}
]
$(function() {
$("#tree").fancytree({
source: SOURCEDATA,
focusOnSelect: true,
activeVisible: true,
lazyLoad: function(event, data){
var node = data.node
data.result = [{"title":"this should be the place for the table"}]
}
});
});
<link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.25/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all.min.js"></script>
<div id="tree">my tree</div>
<table id="user_2">
<thead>
<tr>
<th>Process Name</th>
<th>Process Hashes</th>
<th>Process Author</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="process_name">
<option>Foo.exe</option>
<option></option>
</select>
</td>
<td>
<select id="process_hash">
<option></option>
<option value="0123ABC">0123ABC</option>
<option value="ABC0123">ABC0123</option>
</select>
</td>
<td>
<select id="process_author">
<option></option>
<option value="Someone">Someone</option>
<option value="Somebody">Somebody</option>
</select>
</td>
<td>
<input id="act_allow" type="radio" name="action" value="allow">Allow</input>
<input id="act_deny" type="radio" name="action" value="deny">Deny</input>
<input id="act_warn" type="radio" name="action" value="warn">Warn</input>
</td>
</tr>
</tbody>
</table>
只要 escapeTitles
选项未启用,您应该能够添加原始 HTML 标记作为标题。
你试了吗
lazyLoad: function(event, data){
var node = data.node
data.result = [{title: "<table>...</table>", icon: false}]
}
});
但是不确定这对标准树的样式和事件处理有多大影响。