请用easyui tree做个文件管理器DEMO
时间: 2023-08-14 12:07:28 浏览: 49
好的,以下是使用EasyUI Tree实现的一个简单的文件管理器demo,你可以根据需要进行修改和扩展:
HTML部分:
```html
<div class="easyui-panel" style="padding:10px">
<ul id="fileTree"></ul>
</div>
```
JS部分:
```javascript
$(function() {
$('#fileTree').tree({
url: 'data.json', // 获取数据的url
loadFilter: function(data) { // 过滤数据
return data.children ? data.children : [];
},
onContextMenu: function(e, node) { // 右键菜单
e.preventDefault();
$('#fileTree').tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
$('#mm').menu({ // 右键菜单项
onClick: function(item) {
var node = $('#fileTree').tree('getSelected');
switch (item.name) {
case 'add': // 添加文件夹
var newNode = {
text: '新建文件夹',
state: 'closed',
children: []
};
$('#fileTree').tree('append', {
parent: node.target,
data: newNode
});
break;
case 'remove': // 删除节点
var parentNode = $('#fileTree').tree('getParent', node.target);
$('#fileTree').tree('remove', node.target);
if (parentNode) {
$('#fileTree').tree('select', parentNode.target);
}
break;
}
}
});
});
```
data.json文件内容:
```json
{
"text": "根目录",
"state": "closed",
"children": [
{
"text": "文件夹1",
"state": "closed",
"children": [
{
"text": "文件1",
"iconCls": "icon-file"
},
{
"text": "文件2",
"iconCls": "icon-file"
}
]
},
{
"text": "文件夹2",
"state": "closed",
"children": [
{
"text": "文件3",
"iconCls": "icon-file"
},
{
"text": "文件4",
"iconCls": "icon-file"
}
]
}
]
}
```
CSS样式:
```css
#mm {
width: 120px;
}
```
这样就实现了一个简单的文件管理器demo。需要注意的是,此demo中使用的文件夹都是虚拟的,实际上并不会在服务器上创建。