`

Easyui中Tree例子

easyuitree 
阅读更多

最近项目需要用到easyui中的tree，在使用的过程中发现了一些问题，现在将这些总结如

1、用到的属性有：id，text，state，children，checked

2、当有子节点的时候，在添加state属性，如果先添加state=“closed”，会出现空的文件夹点击时会继续加载整棵树

 

前台页面

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<title>tree例子</title>

<script type="text/javascript">

$(function(){

//左侧功能树

$('#categoryTree').tree({

checkbox:false,   //是否有复选框

lines:true,       //行线

animate:true,  //动画效果

url:'zhtxlAction!treeListData.action', //请求url

onClick:function(node){

$(this).tree('toggle', node.target); //切换效果

//点击事件

}

});

});

</script>

</head>

<body>

<!-- 左侧功能树 -->

<ul id="categoryTree"></ul>

</body>

</html>

 

 

后台代码：

 

 //通讯录树列表

public void treeListData(){

try {

//获取公共通讯录节点

Ggtxl g = ggtxlService.selectByPrimaryKey("1");

Map<String, Object> publicMap = new HashMap<String, Object>();

publicMap.put("id", g.getJgDm());

publicMap.put("text", g.getMc());

//获取公共通讯录下的子节点省民政厅

getGgtxlExample();

com.itic.reis.persistence.model.example.zh.txlgl.ZhGgtxlExample.Criteria criteria1 = ggtxlExample.createCriteria();

criteria1.andScbjEqualTo("0");

criteria1.andSjjgDmEqualTo(g.getJgDm());

List<Ggtxl> r1List = ggtxlService.selectByExample(ggtxlExample);//数据库中省级组织机构

if(r1List != null && r1List.size() > 0){

List<Object> sjList = new ArrayList<Object>(); //存放省级map数据

for (Ggtxl ggtxl1 : r1List) {

Map<String, Object> map1 = new HashMap<String, Object>();

map1.put("id", ggtxl1.getJgDm());

map1.put("text", ggtxl1.getMc());

//获取省下的州市级节点

ggtxlExample.clear();

com.itic.reis.persistence.model.example.zh.txlgl.ZhGgtxlExample.Criteria criteria2 = ggtxlExample.createCriteria();

criteria2.andScbjEqualTo("0");

criteria2.andSjjgDmEqualTo(ggtxl1.getJgDm());

List<Ggtxl> r2List = ggtxlService.selectByExample(ggtxlExample);//数据库中的州市级

if(r2List != null && r2List.size() > 0){

List<Object> zsList = new ArrayList<Object>(); //存放州市map数据

for (Ggtxl ggtxl2 : r2List) {

Map<String, Object> map2 = new HashMap<String, Object>();

map2.put("id", ggtxl2.getJgDm());

map2.put("text", ggtxl2.getMc());

//获取区县级节点

ggtxlExample.clear();

com.itic.reis.persistence.model.example.zh.txlgl.ZhGgtxlExample.Criteria criteria3 = ggtxlExample.createCriteria();

criteria3.andScbjEqualTo("0");

criteria3.andSjjgDmEqualTo(ggtxl2.getJgDm());

List<Ggtxl> r3List = ggtxlService.selectByExample(ggtxlExample);//数据库中的区县级

if(r3List != null && r3List.size() > 0){

List<Object> qxList = new ArrayList<Object>();

for (Ggtxl ggtxl3 : r3List) {

Map<String, Object> map3 = new HashMap<String, Object>();

map3.put("id", ggtxl3.getJgDm());

map3.put("text", ggtxl3.getMc());

qxList.add(map3);

}

map2.put("children", qxList);

map2.put("state", "closed");

}

zsList.add(map2);

}

map1.put("children", zsList);

}

sjList.add(map1);

}

publicMap.put("children", sjList);

}

 

//获取个人通讯录根节点

Grtxl gr = grtxlService.selectByPrimaryKey("1");

Map<String, Object> grMap = new HashMap<String, Object>();

grMap.put("id", gr.getJgDm());

grMap.put("text", gr.getMc());

//获取个人通讯录下的一级节点

getGrtxlExample();

com.itic.reis.persistence.model.example.zh.txlgl.ZhGrtxlExample.Criteria criteria4 = grtxlExample.createCriteria();

criteria4.andScbjEqualTo("0");

criteria4.andSjjgDmEqualTo(gr.getJgDm());

List<Grtxl> gr1List = grtxlService.selectByExample(grtxlExample);//数据库中个人通讯录下的一级子节点

if(gr1List != null && gr1List.size() > 0){

List<Object> firstList = new ArrayList<Object>(); //存放一级map数据

for (Grtxl grtxl1 : gr1List) {

Map<String, Object> grMap1 = new HashMap<String, Object>();

grMap1.put("id", grtxl1.getJgDm());

grMap1.put("text", grtxl1.getMc());

//获取个人通讯录下的二级节点

grtxlExample.clear();

com.itic.reis.persistence.model.example.zh.txlgl.ZhGrtxlExample.Criteria criteria5 = grtxlExample.createCriteria();

criteria5.andScbjEqualTo("0");

   criteria5.andSjjgDmEqualTo(grtxl1.getJgDm());

List<Grtxl> gr2List = grtxlService.selectByExample(grtxlExample);

if(gr2List != null && gr2List.size() > 0){

List<Object> secondList = new ArrayList<Object>(); //存放二级map数据

for (Grtxl grtxl2 : gr2List) {

Map<String, Object> gr2Map = new HashMap<String, Object>();

gr2Map.put("id", grtxl2.getJgDm());

gr2Map.put("text", grtxl2.getMc());

secondList.add(gr2Map);

}

grMap1.put("children", secondList);

grMap1.put("state", "closed");

}

 

firstList.add(grMap1);

}

grMap.put("children", firstList);

}

 

//创建总List用于存放个人和公共通讯录

List<Object> totalList = new ArrayList<Object>();

totalList.add(publicMap);

totalList.add(grMap);

 

log.info("总通讯录:"+totalList);

responseJSONObject(totalList);

 

 

} catch (Exception e) {

log.info("获取功能树异常",e);

}

}

分享到：
| Disabled和Readonly的区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    easyui tree 例子

    在这个“easyui tree 例子”中，我们可以探讨几个关键的知识点，包括EasyUI Tree的基本使用、数据绑定、事件处理以及如何与后端数据交互。 1. **EasyUI Tree的基本结构** EasyUI Tree的基本HTML结构通常包含`&lt;ul&gt;`...

    easyui-tree-diasbleCheckbox

    在这个例子中，`onBeforeSelect`事件监听器用于阻止用户尝试选择disabled的节点。`onLoadSuccess`函数则在数据加载完成后，遍历并处理那些需要被禁用的节点。 需要注意的是，`data.json`应当返回一个JSON数组，每个...

    Easyui tree 测试demo

    描述中提到的 "简单的 easyui tree 例子" 暗示我们将会看到一个基础的 Tree 实现，可能包括加载数据、节点操作、节点展开与折叠等功能。 标签 "easyui tr" 可能是为了简化关键词，代表 EasyUI 和 Tree 相关内容。 ...

    easyui tree

    在 EasyUI 中，"Tree" 是一个重要的组件，常用于展示层级结构的数据，如组织架构、文件目录等。本例子是关于如何使用 EasyUI 来生成一个简单的树形结构，非常适合初学者学习。 首先，我们需要理解 EasyUI Tree 的...

    easyui-tree-demo

    描述中提到，“不是异步树”，意味着在这个例子中，树的数据是预先加载好的，一次性全部加载到页面中，而不是在用户展开节点时动态加载。这种同步加载的方式适用于数据量较小或者对实时性要求不高的场景。 首先，...

    easyui页面的例子

    在这个例子中，`url` 属性指定了数据源，`toolbar` 用于添加工具栏，而 `pagination` 和 `rownumbers` 分别开启分页和行号显示。 此外，EasyUI 还提供了丰富的其他组件，如菜单（menu）、下拉选择框（combobox）、...

    jquery-easyui 插件及例子

    在"jquery-easyui 插件及例子"中，我们可以期待学习到关于如何利用jQuery EasyUI进行高效开发的知识。 首先，`jquery-easyui-tree`标签指向的是EasyUI中的树形控件。树形控件常用于展现层次结构的数据，如目录结构...

    jquery-easyui 例子

    这个"jquery-easyui 例子"压缩包包含了完整的示例，旨在确保你能直观地看到各种功能的实际效果。 EasyUI 提供了诸如对话框（Dialog）、表格（Grid）、表单（Form）、菜单（Menu）、树形结构（Tree）、下拉选择器...

    解析jquery easyui tree异步加载子节点问题

    本文主要介绍了如何使用jQuery EasyUI框架中的Tree组件实现异步加载子节点功能，同时解析了在实现过程中可能会遇到的问题及其解决方案。jQuery EasyUI是一个基于jQuery的前端UI库，它提供了一整套基于AJAX的用户界面...

    easyui 各种控件的例子

    在这个名为 "easyui 各种控件的例子" 的压缩包中，你将找到一系列预构建的页面，展示了EasyUI 控件的用法和功能。下面我们将详细探讨EasyUI 中常见的控件及其应用场景。 1. **数据网格（DataGrid）** EasyUI 的 ...

    jquery.easyui例子(Demo)含有许多easyui库以及css样式

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一套丰富的 UI 组件，可以快速构建出...在实际开发中，结合这些例子和 CSS 样式，你能够快速构建出美观且功能丰富的 Web 应用。

    EasyUI中文api手册和EasyUI中文api.pdf文档

    8. **API 示例**：手册中的每个知识点通常都会搭配实际的代码示例，方便开发者快速上手和调试，通过这些例子，你可以直观地看到如何在实际项目中应用 API。 9. **问题排查与优化**：手册可能还会涵盖一些常见问题的...

    jquery easyUI 全方面例子与文档

    EasyUI 的强大之处还在于其丰富的插件库，如对话框（Dialog）、树形控件（Tree）、日历（Calendar）等，这些插件进一步扩展了框架的功能。 6. **事件处理** EasyUI 中每个组件都有一系列的事件，如打开、关闭、...

    Easyui中文文档.chm

    2. **组件库**：Easyui提供了大量的UI组件，如数据表格（datagrid）、下拉菜单（combobox）、对话框（dialog）、树形结构（tree）、表单（form）等。每个组件都有丰富的配置选项和API接口，可以根据需求定制功能。 ...

    easyui tree带checkbox实现单选的简单实例

    在这个例子中，创建了一个ID为"regionTree"的无序列表元素，这将作为EasyUI Tree的容器： ```html &lt;ul id="regionTree"&gt;&lt;/ul&gt; ``` 接着，通过JavaScript初始化这个树形控件，设置相关属性： ```javascript $('#...

    中文版easyUI-1.36 API+Demo例子

    这个压缩包“中文版easyUI-1.36 API+Demo例子”包含了一个中文版的EasyUI 1.3.6 API 文档以及相关的示例代码，旨在帮助开发者更好地理解和使用 EasyUI。 首先，让我们详细了解 EasyUI 的核心概念和功能： 1. **...

    jQuery easyUI中英文api

    同时，理解API文档中的例子和示例，可以帮助您快速上手并解决开发过程中遇到的问题。 总的来说，"jQuery easyUI中英文api"为开发者提供了一份全面且易用的参考资料，无论您是初学者还是经验丰富的开发者，都能从中...

    使用jQuery+EasyUI实现CheckBoxTree的级联选中特效

    在这个例子中，我们有两个顶级节点：“系统”和“其他”，每个节点都有各自的子节点。 在页面加载完成后，使用jQuery的`$(function(){...})`匿名函数来初始化Tree组件。我们调用`$("#tt").tree({...})`来配置和初始...

    easyui 树形结构样例

    在这个例子中，`tree_data.json`是一个返回树形结构数据的JSON文件，`method:'get'`表示通过GET请求加载数据。 此外，还需要注意的是，由于`tree`组件默认不支持在下拉框中展示，所以可能需要对CSS样式进行调整，以...

    tree相关例子

    在本案例中，“tree相关例子”可能包含了如何使用EasyUI Tree进行数据展示和交互的一些示例代码或文档。 “新建 Microsoft Word 文档.docx”可能是一个包含详细步骤和解释的文档，指导用户如何利用EasyUI Tree实现...

Magicbox
Global site tag (gtag.js) - Google Analytics