我使用Fuel UX Tree框架来加载树视图数据。
首次加载文档时,树视图呈现正确,但是当我尝试使用新的DataSource
重新加载树时,我什么都没得到。
这是我的代码示例:
树形UI的模板:
<div id="MyTree" class="tree tree-plus-minus tree-no-line tree-unselectable">
<div class="tree-folder" style="display:none;">
<div class="tree-folder-header">
<i class="fa fa-folder"></i>
<div class="tree-folder-name">
</div>
</div>
<div class="tree-folder-content">
</div>
<div class="tree-loader" style="display:none">
</div>
</div>
<div class="tree-item" style="display:none;">
<i class="tree-dot"></i>
<div class="tree-item-name">
</div>
</div>
</div>
树UI初始化功能:
var UITree = function () {
return {
//main function to initiate the module
init: function (el, data) {
if (typeof el != 'undefined' && typeof data == 'object') {
var DataSourceTree = function (options) {
this._data = options.data;
this._delay = options.delay;
};
DataSourceTree.prototype = {
data: function (options, callback) {
var self = this;
var data = $.extend(true, [], self._data);
callback({ data: data });
}
};
var treeDataSource = new DataSourceTree(data);
$(el).tree({
selectable: false,
dataSource: treeDataSource,
loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
});
}
}
};
}();
使用Ajax加载数据后,我调用init
函数:
//my data from ajax result
var myData = {
"data": [
{
"name": "some_name",
"type": "item"
},
{
"name": "some_name_2",
"type": "item"
}
]
};
// call tree init to render data
UITree.init($('#MyTree'), myData);
函数无错误地工作,只在第一次加载页面时呈现树,而不是在下一次Ajax调用时呈现。
答案 0 :(得分:4)
最后我找到了解决方案。也许这不是最好的做法,但这只是我发现的方式:
当元素已经分配了数据属性时,Fuelux Tree UI
看起来不起作用,所以我这样做了:
// 1. Clear MyTree wrapper template with:
$('#MyTree .tree-item:visible').remove();
// 2. remove assigned data from template element object
delete($('#MyTree').data().tree);
// 3. Refactor Tree UI
$('#MyTree').tree({
selectable: false,
dataSource: {
data: function(options, callback) {
callback(MyData);
}
}
});
我在互联网上搜索过,重新阅读了Fuelux
文档,但没有提到有关重新分解Tree UI
的内容,所以如果有人遇到同样的问题,这个解决方案可以提供帮助。