这种格式类似于ztree的格式
数据: [
{"id":1,"parendId":0,"name":"Foods"},
{"id":2,"parentId":1,"name":"Fruits"},
{"id":3,"parentId":1,"name":"Vegetables"},
{"id":4,"parentId":2,"name":"apple"},
{"id":5,"parentId":2,"name":"orange"},
{"id":6,"parentId":3,"name":"tomato"},
{"id":7,"parentId":3,"name":"carrot"},
{"id":8,"parentId":3,"name":"cabbage"},
{"id":9,"parentId":3,"name":"potato"},
{"id":10,"parentId":3,"name":"lettuce"}
]
<ul id="tt"></ul>
$(function(){
$('#tt').tree({
url: 'data/tree6_data.json',
loadFilter: function(rows){
return convert(rows);
}
});
});
function convert(rows){
function exists(rows, parentId){
for(var i=0; i<rows.length; i++){
if (rows[i].id == parentId) return true;
}
return false;
}
var nodes = [];
// get the top level nodes
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (!exists(rows, row.parentId)){
nodes.push({
id:row.id,
text:row.name
});
}
}
var toDo = [];
for(var i=0; i<nodes.length; i++){
toDo.push(nodes[i]);
}
while(toDo.length){
var node = toDo.shift(); // the parent node
// get the children nodes
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.parentId == node.id){
var child ={id:row.id,text:row.name};
if (node.children){
node.children.push(child);
} else {
node.children = [child];
}
toDo.push(child);
}
}
}
return nodes;
}
分享到:
相关推荐
通过以上介绍,你应该对如何在 EasyUI 中使用同步和异步方式展示树形菜单有了深入了解,并掌握了如何结合 Java 后台代码进行数据交互。在实际项目中,根据需求灵活运用这些知识,能帮助你构建高效、用户体验良好的...
2. EasyUI中的同步树实现:同步树是EasyUI组件中的一个界面元素,用于展示具有层级关系的数据。通过使用同步树,可以在页面上展示出具有树状结构的数据,并且可以对这些数据进行各种操作,如展开、折叠等。 3. 递归...
它提供了丰富的组件,包括布局、表格、树形菜单、表单等,使得开发者能够快速地构建出美观且功能强大的Web应用程序。在这个主题中,我们将探讨 EasyUI 的几个核心知识点:基本布局、tree 菜单数据的绑定、DataGrid ...
首先,EasyUI是一个基于jQuery的UI库,它提供了一系列预定义的组件,如表格、对话框、下拉菜单等,使得开发者可以快速构建用户界面。在描述中提到的“根据json格式获取到数据,easyui样式列表显示”,意味着我们需要...
描述中提到的"两个表格之间的数据横向拖拽"意味着,不仅仅局限于在一个表格内部移动数据,而是可以将一个表格中的行拖动到另一个表格中,这样的功能需要对EasyUI的表格组件有深入的理解,并且要处理好数据源的更新...
这种同步加载的方式适用于数据量较小或者对实时性要求不高的场景。 首先,我们来看`tree.html`,这是示例的HTML文件。它会包含EasyUI的CSS和JS引用,以及用于创建树形控件的HTML代码。HTML中,树形控件通常由`<div>...
EasyUI 支持数据绑定,可以将表单字段与模型数据关联,实现数据的自动同步和验证。 12. **国际化(i18n)** EasyUI 支持多语言,开发者可以通过设置语言参数轻松实现应用的国际化。 13. **自定义扩展** 虽然...
5. **数据绑定**:EasyUI 提供了数据绑定功能,可以与后端数据库或其他数据源进行双向数据同步,实现动态刷新和交互。 6. **事件驱动**:通过事件处理机制,开发者可以方便地监听用户操作,实现复杂的业务逻辑。 7...
EasyUI结合JSON对象和JavaScript数据模型,使得数据与视图的同步变得简单。通过"data"属性,可以将JSON数据绑定到表格或表单,实现动态渲染。 8. **对话框(Dialog)** 对话框在CRUD操作中扮演重要角色,比如用于...
EasyUI是基于jQuery的一个用户界面框架,它提供了丰富的UI组件,如对话框、表单、菜单、按钮等,帮助开发者快速构建用户友好的Web应用程序。在WebForm中集成EasyUI DataGrid,可以实现数据的分页、排序、过滤等功能...
6. **数据绑定**:与 jQuery 数据绑定机制结合,实现了视图和模型的同步,方便数据操作。 二、jQuery EasyUI 的关键组件 1. **DataGrid**:数据网格组件,用于展示和编辑大量结构化的数据,支持排序、分页、过滤等...
EasyUI 是一款基于 jQuery 的轻量级前端框架,它提供了丰富的组件和强大的功能,使得开发者可以快速构建出美观且响应式的Web应用。这个压缩包包含了EasyUI的帮助文档和实例,对于学习和掌握EasyUI有着极大的帮助。 ...
3. **数据绑定和异步交互**:EasyUI与后端服务进行数据交换通常采用Ajax技术,实现了界面与数据的实时同步,增强了用户体验。 4. **主题定制**:EasyUI支持多种预设主题,同时也允许开发者自定义主题,以满足个性化...
10. **数据绑定**:EasyUI支持数据绑定,可以将组件的数据源与JSON对象或远程服务器接口关联,实现数据的实时更新和同步。 11. **API和事件**:每个EasyUI组件都有丰富的API和事件,允许开发者进行深度定制。例如,...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它极大地简化了网页开发的过程,尤其在构建用户界面方面。这个框架集成了大量的组件和插件,使得开发者能够快速创建功能丰富的、响应式的网页应用。EasyUI 1.4.1 版本...
在"easyUI ko绑定 java"的场景中,我们通常会将EasyUI用于构建前端界面,利用其丰富的组件来展示数据;而Knockout.js则负责数据绑定和状态管理,使得当模型数据变化时,界面能自动更新。结合Java后端,可以通过Ajax...
在“分哥案例easyui”中,我们可以预见到这些组件将被用来构建数据展示和交互的界面。 1. **表格(datagrid)**:EasyUI的datagrid组件用于展示数据,支持排序、筛选、分页等功能。在这个案例中,datagrid可能被...
【标题】"easyui学籍管理系统"是一款基于EasyUI框架构建的教育信息化应用,主要用于管理和维护学生的学籍信息,同时也支持教师与管理员的功能操作。EasyUI是一个轻量级的前端开发框架,它提供了丰富的组件和样式,...
- **表单构建**:EasyUI 的 Form 组件用于构建表单,它支持各种表单元素,如文本框、下拉框、复选框等,方便用户输入和选择数据。 - **表单验证**:Form 还可以配合 Validator 插件实现数据验证,确保用户输入的...
在 EasyUI 中,我们可以利用 `checkbox` 组件来创建复选框,并通过事件监听和数据同步来实现全选/反选的效果。下面将详细介绍如何实现这一功能: 1. **添加依赖** 首先,确保在 HTML 文件中引入了 EasyUI 的 CSS ...