FuelUX树dataSource选项未定义
FuelUX树dataSource选项未定义
提问于 2014-10-03 13:02:53
我正在尝试使用FuelUX实现treeview。
到目前为止，我在网站上成功地设置了这个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fuel UX Basic Template (Globals)</title>
<!-- CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.fuelcdn.com/fuelux/3.0.2/css/fuelux.min.css" rel="stylesheet">
</head>
<body class="fuelux">
<ul class="tree fuelux" role="tree" id="myTree">
<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
<div class="tree-branch-header">
<button class="tree-branch-name">
<span class="glyphicon icon-caret glyphicon-play"></span>
<span class="glyphicon icon-folder glyphicon-folder-close"></span>
<span class="tree-label"></span>
</button>
</div>
<ul class="tree-branch-children" role="group"></ul>
<div class="tree-loader" role="alert">Loading...</div>
</li>
<li class="tree-item hide" data-template="treeitem" role="treeitem">
<button class="tree-item-name">
<span class="glyphicon icon-item fueluxicon-bullet"></span>
<span class="tree-label"></span>
</button>
</li>
</ul>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js"></script>
<script>
$(document).ready(function() {
$('#myTree').tree({
dataSource: function(options, callback){
var self = this;
var param = null
console.log(options.type);
if ("type" in options && options.type == "folder") {
if ("dataAttributes" in options && "children" in options.dataAttributes) {
param = options.dataAttributes["id"];
}
}
if (param != null) {
$.ajax({
url: "@routes.FileController.getFolderStructure()",
type: 'POST',
params: {
contentType: 'application/json; charset=utf-8'
},
dataType: 'json',
data: JSON.stringify({ id: 1 }),
success: function (response) {
callback(response)
},
error: function (response) {
console.log(response);
}
})
}
setTimeout(function () {
callback({ data: [
{ name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
{ name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
{ name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
{ name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
{ name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
{ name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
{ name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },
{ name: 'Convex and Concave', type: 'item', dataAttributes: { id: 'item4' } }
]});
}, 400);
},
multiSelect: true,
cacheItems: true,
folderSelect: false,
});
});
</script>
</body>
</html>不幸的是，传入"dataSource“中的dataSource参数没有属性(type、dataAttributes等)。
我做错了什么？如何设置这些参数？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-03 20:00:55
我得到了options.type of "folder"。至于options.children，它不会出现在项/文件夹的回调数据对象中。
这对我来说很管用：
$('#myTree1').tree({
dataSource: function(options, callback){
var self = this;
var param = null
console.log(options.type);
if ("type" in options && options.type == "folder") {
if ("dataAttributes" in options && "children" in options.dataAttributes) {
param = options.dataAttributes["id"];
}
}
if (param != null) {
$.ajax({
url: "@routes.FileController.getFolderStructure()",
data: 'id=' + param,
type: 'POST',
dataType: 'json',
success: function (response) {
callback(response)
},
error: function (response) {
console.log(response);
}
})
}
setTimeout(function () {
callback({ data: [
{ name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
{ name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
{ name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
{ name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
{ name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
{ name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
{ name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },
{ name: 'Convex and Concave', type: 'item', dataAttributes: { id: 'item4' } }
]});
}, 400);
},
multiSelect: true,
cacheItems: true,
folderSelect: false,
});我所做的就是复制上面的index.js在燃料UX回购和添加的condole.log。它在打开“升和降”时输出“文件夹”，这是该项目的类型。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26179456
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号