这几天做的项目要求用树形表格的形式展示一部分数据，于是就想到了使用easyUI的treegrid组件，但几经翻查各种资料，发现数据类型大多采取标准数据类型，即包含children元素的数据类型，小编查遍各种资料，几经实验，找到了一种使用简单数据类型的展示树形表格的方法。在这里介绍给大家，仅供参考：

　　框架使用的是ssm框架，数据库用的是oracle，其中数据库中要展示的表设计成大致如下的样子：

　　
　　参考了一下easyUI的demo中给出的数据类型，如下格式：
　　

　　打开里面显示如下：

　　

　　这是一个json串，里面用于展示的是rows,total用于分页，footer我就不是很了解了，到这里我就想到后台controller层应该返回一个这样的json串给前台，让他去组装数据。但有一点要注意，在上面的数据结构中有一个_parentId,几经测试它的值就是我们的pid的值，那么现在问题就来了，是不是需要增加一个相应的字段呢，但是表结构是不能动的。我是这样做的，在相应的实体类里做了如下操作：

　　

　　而且前台识别的结构在后台可以用map集合来实现，所以后台是酱紫的：

　　

　　至于demo数据结构中的total和footer可以根据需要选择。

　　看到easyUI的API文档中treegrid是这样写的：

　　

　　所以前台如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dept_list.jsp</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyUI/jquery-easyui-1.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyUI/jquery-easyui-1.4/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/ztree/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyUI/jquery-easyui-1.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/ztree/js/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyUI/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
    //treegrid
    $('#tt').treegrid({    
        url:'${pageContext.request.contextPath }/user/getdeptMap.action',   //访问后台的地址
        idField:'id',    
        treeField:'name',     
        columns:[[    
            {field:'xxx',title:'xxx',width:100,checkbox:true},     
            {field:'id',title:'ID',width:60,align:'center'},    
            {field:'name',title:'NAME',width:60,align:'center'},   
            {field:'pid',title:'PID',width:60,align:'center'},
            {field:'xx',title:'操作',width:100,
                formatter: function(value,row,index){
                    return "<a href='javascript:void(0)' onclick='update(\""+index+"\")'>修改</a>"+
                    "-"+
                    "<a href='javascript:void(0)' onclick='del(\""+row.id+"\")'>删除</a>";
                }
            }
        ]]
    });
    })
 
</script>
</head>
<body>
<table id="tt" data-options="fit:true,toolbar: '#tb'" style="width:600px;height:400px" fitColumns="true"></table>  
</body>
</html>

　　　这样就完成了，效果图附上：

　　　　

　　第一次发博，谢谢大家光顾了！

easyUI中treegrid组件构造树形表格（简单数据类型）+ssm后台的更多相关文章

  1. Jquery EasyUI中treegrid

    Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲   最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...

  2. EasyUI的treegrid组件动态加载数据问题的解决办法

    http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...

  3. 谈一谈EasyUI中TreeGrid的过滤功能

    写在最前面 这个星期一直在纠结easyui的treegrid的过滤功能,原因呢,自然是项目中一个莫名奇妙的需求. easyui虽说是后端程序员的前端框架,但是说句实话,除去api,让我直接写里面的节点 ...

  4. Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件

    做个项目使用jquery  easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...

  5. Easyui中tree组件实现搜索定位功能及展开节点定位

    这几天遇到个input + tree  实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果     小二 上图  : 需要的部件知识: easyui ...

  6. python---django中form组件（1）简单使用和字段了解

    Django中的Form组件功能: 1.对用户请求的验证 2.生成html代码 Form使用:对用户请求进行验证 前端代码: <form action="/f1.html" ...

  7. EasyUI中Treegrid节点的删除

    // 删除function removes() {    var rows = ruletreegrid.treegrid('getSelections');    if (rows &&am ...

  8. 第二百二十八节，jQuery EasyUI，TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

  9. TreeGrid( 树形表格)

    本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于DataGrid(数据表格)组件 一． 加载方式//建立一个 JSON 文件[{"id" ...

随机推荐

  1. js和jquery的DOM事件大全

  2. nodejs的mysql模块学习(八)关闭连接池

    关闭连接池 可以用pool.end()关闭连接池 pool.end(function (err) { // 所有的连接都已经被关闭 }); 当关闭之后pool将不可以getconnection()

  3. 【Android 界面效果38】android:inputType常用取值

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content&q ...

  4. django 用imagefiled访问图片

    使用FileField和ImageField时,我们有几个步骤: 在settings.py中设置MEDIA_ROOT和MEDIA_URL MEDIA_ROOT:一个绝对路径,Django根据它知道文件 ...

  5. Unity封装dll教程整理

    ///作者Unity3d师兄---LeroyYang 通过网上大神们的资料以及自己的整理,学习一下用vs2013简单的封装dll文件,方便接口模式下开发,使得逻辑层更为清晰. 操作步骤 1.打开vs2 ...

  6. C++中模板函数或模板类中关键词class和typename

    ##区别 基本上来说,class和typename几乎没有区别.在可以使用class的地方都可以使用typename,在使用typename的地方也几乎可以使用class. 可以看出我加黑了两个子:几 ...

  7. mysql-DDL-创建数据库

    创建一个数据库 • 建立数据库操作: 语法: create database 数据库名 叙述:创建一个具有指定名称的数据库.如果要创建的 数据库已经存在,或者没有创建它的适当权限,则此 语句失败. 例 ...

  8. 理论制作 Windows 开机动画

    第一次接触 Windows 开机动画是 2012 年,那时候魔方的版本号还是 3.12,魔方里面有个很酷炫狂霸拽的功能就是替换 Windows 7 的开机动画.一开始我是在IT之家论坛里下载开机动画, ...

  9. Backbone.js学习之Router

    官方文档的解释: Web applications often provide linkable, bookmarkable, shareable URLs for important locatio ...

  10. PAT1005—— 继续(3n+1)猜想

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对n=3进行验证的时候, ...