jquery-easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立。如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数。
编写前台代码:
- $('#tt').tree({
-
url:'/demo2/node/getNodes'
- });
为测试用,建立一个节点的数据模型:
- @Table(name="nodes")
-
public class Node extends ActiveRecordBase{
-
@Id public Integer id;
-
@Column public Integer parentId;
-
@Column public String name;
-
-
public boolean hasChildren() throws Exception{
-
long count = count(Node.class, "parentId=?", new Object[]{id});
-
return count > 0;
- }
- }
编写后台的控制器代码:
- public class NodeController extends ApplicationController{
-
-
-
-
-
-
-
-
public View getNodes(int id) throws Exception{
-
List<Node> nodes = null;
-
-
if (id == 0){
-
nodes = Node.findAll(Node.class, "parentId=0 or parentId is null", null);
-
} else {
-
nodes = Node.findAll(Node.class, "parentId=?", new Object[]{id});
- }
-
-
List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
-
for(Node node: nodes){
-
Map<String,Object> item = new HashMap<String,Object>();
-
item.put("id", node.id);
-
item.put("text", node.name);
-
-
-
-
if (node.hasChildren()){
-
item.put("state", "closed");
- }
- items.add(item);
- }
-
-
return new JsonView(items);
- }
- }
运行测试程序:http://localhost:8080/demo2/
![](http://jquery-easyui.wikidot.com/local--files/tutorial:tree2/tree2.png)
分享到:
相关推荐
对于jquery-easyui的combotree 异步树,使用上其实并不会太复杂,但是要搞明白还是比较麻烦的,本代码基本上把异步树的生成和使用都做了示例,JSP部分基本上直接拿来用即可。同时增加了实例代码和修正了上一个上传的...
整套的jquery ui实例,版本jquery ui1.8.16, jquery-easyui-1.2.2 自己做了一个异步动态加载树
完整的jquery easyui tree 树形列表节点异步加载demo,比官方demo详细得多。是前后台交互的web应用。
本篇文章主要介绍解析jquery easyui tree异步加载子节点问题,easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立,有兴趣的可以了解一下。
Jquery EasyUI 异步树,适合大数据量无限级加载
本篇文章主要介绍了Jquery EasyUI tree 的异步加载,可以实现遍历指定文件夹,根据文件夹内的文件生成tree,有兴趣的可以了解一下。
本篇文章主要介绍了jquery使用EasyUI Tree异步加载JSON数据(生成树),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
这里面包含easyui的chm文档easyui-1.3.5.zip,datagrid项目案例,SSH和easyui整合的案例,easyui异步加载tree,tree和datagrid共用的例子,改好的兼容jQueryUI1.10.3的easyui,另外加一个primeui-10资料。资源分定为1分...
第一次加载 , 向后台传递的id为null . 之后每次将树节点展开 , 会向后台传递一个当前节点的 id . Control层 : 代码如下: /** * tree */ @RequestMapping(value = “/tree.do”) public void mytree...
在panel中创建复杂布局 创建折叠面板 创建Tabs标签 创建和动态添加tabs组件 创建自动播放tab 创建XP风格左侧面板 数据表格 转换table到数据表格 数据表格添加分页组件 数据表格添加查询功能 ...
使用easyUI在panel中创建复杂布局 使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用...
想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug html中代码是这样的 <ul class=easyui-tree id=tt> js中的代码 $(.next-menu:nth-child(1) a).click(function() { var $IDstr = $...
为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点。 往往结果和预期的都不一样,困惑了几天,展开后子节点是动态加载了,但是收缩后无法清空之前填充的...
ThinkPHP5 MVC框架图书管理系统源代码 开发环境:PHP+MYSQL 程序后台技术框架:ThinkPHP5 后台界面采用EasyUI框架,前台界面采用Bootstrap框架,用户浏览器和服务器全程几乎采用jquery异步加载技术!
为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点。 往往结果和预期的都不一样,困惑了几天,展开后子节点是动态加载了,但是收缩后无法清空之前填充的数据...
1、用ztree 异步加载菜单树; 2、Ajax技术实现多表单的动态嵌套,便用权限、角色、用户之间的关系管理; 3、对底层HQL 语句进行优化; 4、使用拦截器对权限的细颗粒控制和全站编码过滤; 5、使用jQuery-easyui-1.3.5...
兼容性非常好,可异步加载,支持拖拽。插件本身只支持HTML节点加载的,网上有人进行扩展了,用了JSON,不过个人感觉这对速度影响实在微乎其微,还是直接封装出HTML代码的。压缩包内有原版Json过的