如何重新加载数据在燃料UX树| jQuery
How to reaload data in Fuel UX Tree | jQuery
我使用燃料UX树框架加载树视图数据。
在第一次加载文档时,树视图正确呈现,但当我尝试用新的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 init函数:
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调用时。
我终于找到了解决办法。也许这不是最佳实践,但这是我发现的唯一方法:
看起来像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
,所以如果有人会遇到同样的问题,这个解决方案可以帮助。
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- JQuery使计数器每次更改时都会增加
- 如何在Angular2中使用jQuery插件
- 提高JQuery的性能
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JQuery合并了keyup和focusout两个函数
- 如何使用jQuery选择下拉列表的值
- 将PHP变量传递给jQuery时遇到问题
- jQuery UI自动完成突然停止工作
- jQuery UI and Fuel UX conflict
- 从UI / UX开发中放弃jQuery
- 如何重新加载数据在燃料UX树| jQuery
- jQuery UX 故障在 CSS 下拉菜单中