`
kaixinmao
  • 浏览: 48647 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类

jquery easyUI tree 后台实现代码

 
阅读更多

根据demo

jquery easyUI tree的树形格式的json形式为

[{
 "id":1,
 "text":"Folder1",
 "iconCls":"icon-ok",
 "children":[{
  "id":2,
  "text":"File1",
  "checked":true
 },{
  "id":3,
  "text":"Folder2",
  "state":"open",
  "children":[{
   "id":4,
   "text":"File3",
   "attributes":{
    "p1":"value1",
    "p2":"value2"
   },
   "checked":true,
   "iconCls":"icon-reload"
  },{
   "id": 8,
   "text":"Async Folder",
   "state":"closed"
  }]
 }]
},{
 "text":"Languages",
 "state":"closed",
 "children":[{
  "id":"j1",
  "text":"Java"
 },{
  "id":"j2",
  "text":"C#"
 }]
}]

前台调用代码:

<%@ page language="java" contentType="text/html;charset=UTF-8"
 errorPage=""%>
 <%@ include file="/admin/CommonFiles/struts.jsp" %>
<html>
 <head>
  <title>信息发布平台</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="${ctx}/admin/css/easyui.css"></link>
  <script type="text/javascript" src="${ctx}/admin/js/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="${ctx}/admin/js/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="${ctx}/admin/style.css" type="text/css">
  <script type="text/javascript">
  
  $(function(){
   $('#tt2').tree({
    checkbox: true,
    url: '${ctx}/ItemTree.do?method=createTree',
    onClick:function(node){
     $(this).tree('toggle', node.target);
     var ss=node.attributes.cas.toString();//p1
     alert('you click '+ss);
    },
    onContextMenu: function(e, node){
     e.preventDefault();
     $('#tt2').tree('select', node.target);
     $('#mm').menu('show', {
      left: e.pageX,
      top: e.pageY
     });
    }
   });
  });
  
  </script>
 </head>
 <body bgcolor="#EBF1FA" leftmargin="5" topmargin="5" marginwidth="0"
  marginheight="0">
   <ul id="tt2"></ul>
 </body>
</html>

后台服务端的递归代码(遍历每一个节点):

/**
  * @param mapping
  * @param form
  * @param request
  * @param response
  * @return
  * @throws Exception
  */
 public ActionForward createTree(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  m_objsa = (SessionAdmin) request.getSession().getAttribute("amUser");
  int parentid=NumberUtils.stringToInt(request.getParameter("xxxx"));
  String state="";
  String sel="";
  
  List<TreeDto> list = new ArrayList<TreeDto>();
  
  createTree(parentid,state,sel,list);
  
  
  String str =JSONArray.fromObject(list).toString();
  

  //返回结果到前台
  response.getWriter().write(str);
  response.getWriter().flush();
  response.getWriter().close();
  
  return null;
  
 }
 //显示树型主函数,递归,选择所属栏目用,sel已选中的ID,curitem当前栏目ID
 //添加内容的时候,选择所属栏目
 public List<TreeDto> createTree(int parentid,String state,String sel,List<TreeDto> list2) throws SQLException
 {
  
//  list2=new ArrayList<TreeDto>();
  ArrayList<TreeDto> al = getPrivateSubItem(parentid);
  if(al != null && !al.isEmpty())
  {
   int n = al.size();
   for(int i = 0; i < n;i++)
   {
    TreeDto o = (TreeDto)al.get(i);
    
    //不包含子菜单
    if(!isHaveSubItem(o.getId()))
    {
    }else{
     List<TreeDto> list333=new ArrayList<TreeDto>();
     o.setChildren(createTree(o.getId(), state, sel,list333));
    }
    
    list2.add(o);
    
   }
  }
  
  return al;
 }

//检索

private ArrayList<TreeDto> getPrivateSubItem(int parentid) throws SQLException
 {
  m_strSql = new StringBuffer();
  m_strSql.append("Select ID,Name From Item Where IsAuditing = 1");
  m_strSql.append("And WebID = " + m_objsa.getWebID());
//  if(!m_objsa.isWebSuperAdmin())
//   m_strSql.append(" And '" + m_objsa.getItemPower() + "' Like '%' + CONVERT(varchar,ID) + '_0%'");
  m_strSql.append(" And ParentID = " + parentid);
  
  
  Connection conn = null;
  PreparedStatement stmt = null;
  ResultSet rs = null; 
  ArrayList<TreeDto> al = new ArrayList<TreeDto>();
  try {
   conn = this.getSqlSession().getConnection();
   stmt = conn.prepareStatement(m_strSql.toString());
   rs = stmt.executeQuery();
   
   if(rs!=null){
    while(rs.next())
    {
     TreeDto o = new TreeDto();
     o.setId(rs.getInt("ID"));
     o.setText(rs.getString("Name"));
     al.add(o);
    }
   }
   

  }catch(Exception se){
   se.printStackTrace();
  }finally{
   DBUtils.close(rs, stmt, conn);
  }
  
  return al;
 }

//判断是否具有子节点

private boolean isHaveSubItem(int parentid) throws SQLException
 {
  m_strSql = new StringBuffer();
  m_strSql.append("Select Count(ID) as C From Item Where IsAuditing = 1 And WebID = " + m_objsa.getWebID());
  m_strSql.append(" And ParentID = " + parentid);
  
  Connection conn = null;
  PreparedStatement stmt = null;
  ResultSet rs = null; 
  
  try {
   conn = this.getSqlSession().getConnection();
   stmt = conn.prepareStatement(m_strSql.toString());
   rs = stmt.executeQuery();
   
   if(rs.next() && rs != null)
   {
    int i = rs.getInt("C");
    rs.close();
    return i > 0;
   }

  }catch(Exception se){
   se.printStackTrace();
  }finally{
   DBUtils.close(rs, stmt, conn);
  }
  
  return false;  
 }

分享到:
评论
1 楼 di1984HIT 2014-11-18  
写的很好啊。学习了~~

相关推荐

    jquery-easyui-tree学习

    jQuery EasyUI Tree常用于网站的导航菜单,例如在后台管理系统中,可以展示多级的权限菜单;在数据管理界面,可以展示分层的类别信息,如文件夹结构等。 总的来说,jQuery EasyUI Tree组件以其简洁的API和丰富的...

    jquery easyui tree 树形列表节点异步加载

    综上所述,jQuery EasyUI Tree组件的异步加载通过设置`async`和`loader`属性实现,配合后台接口,能有效地优化大数据量场景下的用户体验。在`easyui_demo`这个压缩包中,你可以找到一个完整的示例,帮助理解并实践这...

    jquery Easyui 后台 系统

    在后台系统开发中,jQuery EasyUI 可以与各种后端框架(如Spring MVC、Django、Express等)结合,实现前后端分离。通过Ajax请求,EasyUI 可以与后端API进行通信,获取和更新数据。 1. **数据交互**:使用 `$.ajax` ...

    jqueryEasyUI

    jQuery EasyUI 适用于企业级后台管理系统、数据展示界面、Web 应用的前端开发。它的组件丰富,样式统一,可以快速构建出具有专业外观的管理界面。 ### 5. 注意事项 - 考虑到性能,不要在不需要的地方过度使用组件...

    Java Spring4集成MyBatis SpringMVC JQuery EasyUI 后台框架

    1. 该框架的开发环境为EclipseJEE集成开发工具。... 前台展示页面使用了JQuery EasyUI的布局、列表和消息组件。 6. 系统实现了较为完善的用户模块,对用户数据实现了增、删、改、查、分页等的功能。

    jQueryEasyUI1.3.6版本

    2. **数据绑定**:jQuery EasyUI 支持与后台数据源进行数据绑定,通过Ajax或JSONP实现异步加载,使页面内容动态更新,提高用户体验。例如,表格组件Grid可以直接与服务器端的数据接口进行交互,实现分页、排序、过滤...

    jQuery EasyUI tree 使用拖拽时遇到的错误小结

    ### jQuery EasyUI tree 使用拖拽功能知识点 #### jQuery EasyUI介绍 jQuery EasyUI是一个基于jQuery的前端框架,它提供了一系列用户界面组件,例如对话框、表格、菜单、树形控件等,以帮助开发者更快地构建Web界面...

    jquery-easyui资料和文档

    此外,jQuery EasyUI的文档通常包含了详细的API说明、示例代码以及常见问题解答,使得学习和使用变得更为容易。在项目中引入jQuery EasyUI,不仅可以提升开发效率,还能确保UI的统一性和专业性,从而提高用户体验。...

    jquery-easyui-1.7.0.zip官方文档

    1. 数据绑定:EasyUI 提供了数据绑定功能,可以轻松地将后台数据与前端UI组件关联,实现数据的动态展示和更新。 2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)...

    jQuery easyui 的经典应用,后台框架首选

    jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了丰富的组件和样式,使得开发者可以快速创建功能丰富的管理界面或者后台框架。这个框架深受开发者喜爱,尤其对于那些希望快速构建...

    jquery-easyui-1.4.5_easyuiapi_

    《jQuery EasyUI 1.4.5 API详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者可以快速构建出美观且功能强大的Web应用。在本文中,我们将深入探讨jQuery EasyUI 1.4.5...

    jQuery EasyUI v1.3.5官方API中文版

    总之,jQuery EasyUI v1.3.5官方API中文版是开发人员的重要参考资料,它不仅包含了所有组件的详细说明,还有丰富的示例代码,有助于快速上手并熟练掌握这个框架,从而提升开发效率,打造高质量的Web应用界面。

    Jquery easyUI 离线包

    JQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的UI组件,使得开发者能够快速构建功能丰富的Web应用。这个离线包包含了JQuery EasyUI的完整版本,具体为1.3.0,这是一个相对较旧但仍然广泛使用的版本...

    EasyUI 网站后台模板

    在"漂亮的jquery easyui后台框架代码"这个项目中,我们可以看到几个关键的文件和目录,它们构成了EasyUI后台模板的基础: 1. **index.html**:这是网站的入口文件,通常包含HTML结构和必要的JavaScript引用,用于...

    漂亮的jquery easyui后台框架

    jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它提供了一系列的组件和插件,使得开发者可以轻松构建功能丰富且美观的后台管理界面。这个“漂亮的jquery easyui后台框架”正是利用了EasyUI的优势,为用户提供了...

    jQuery EasyUI 1.4.3 API

    - **EasyUI**:基于 jQuery 的轻量级框架,通过简单的 API 实现复杂的 UI 效果,提高开发效率。 2. **核心组件** - **对话框(dialog)**:用于创建弹出式窗口,可设置大小、位置、可拖动和关闭等功能,常用于...

    easyui tree 改进版

    EasyUI Tree是一款基于jQuery的轻量级用户界面库,它为开发者提供了丰富的树形结构组件。在标准的EasyUI Tree基础上,“easyui tree 改进版”进行了优化和增强,特别是加入了复选框选择功能,这使得用户在操作树形...

    EasyUI管理后台模板源码

    EasyUI是一款基于jQuery的UI库,它为开发者提供了丰富的组件和精美的界面设计,使得构建管理后台变得更加便捷。"EasyUI管理后台模板源码"是一个包含EasyUI框架用于创建后台管理系统的完整源代码包,可以帮助开发者...

    jQuery EasyUI 3.1中文帮助手册

    jQuery EasyUI 包含了一系列预定义的CSS样式和JavaScript插件,这些插件主要基于jQuery库,实现了如对话框(dialog)、表单(form)、表格(datagrid)、菜单(menu)等常见的用户界面元素。通过简单的HTML标记和...

    Jquery EasyUI的基础权限管理

    在这个“Jquery EasyUI的基础权限管理”主题中,我们将深入探讨如何利用EasyUI来实现后台权限控制,同时结合C#后端技术和SQL Server 2008数据库来构建一个完整的权限管理系统。 首先,EasyUI中的权限管理主要涉及...

Global site tag (gtag.js) - Google Analytics