他是数据呈现的一个bootstrap中的插件(基于jQuery实现),页面加载完成,异步加载数据,以树结构table的形式呈现

1.业务实现:

  (1)引入treeGrid相关js文件

    jquery.treegrid.css

    jquery.treegrid.extension.js

    tree.table.js

    jquery.treegrid.min.js

  (2)定义方法异步加载数据

2.初始化表格

/*** 初始化表格的列*/
var columns = [
{field : 'selectItem',/* //有一个选择 */radio : true/*     //单选 */
},
{title : '菜单ID',/* //标题 */field : 'id',/*     //这个值需要和返回的数据的字段一致 */visible : false,/*     //不可见,false为可见 */align : 'center',/*     //水平居中 */valign : 'middle',/*     //垂直居中 */width : '80px'/*         //    宽度 */
},
{title : '菜单名称',field : 'name',align : 'center',valign : 'middle',sortable : true,/* //排序 */width : '130px'
},
{title : '上级菜单',field : 'parentName',align : 'center',valign : 'middle',sortable : true,width : '100px'
},
{title : '类型',field : 'type',align : 'center',valign : 'middle',sortable : true,width : '70px',formatter : function(item, index) {if (item.type == 1) {return '<span class="label label-success">菜单</span>';}if (item.type == 2) {return '<span class="label label-warning">按钮</span>';}}
},
{title : '排序号',field : 'sort',align : 'center',valign : 'middle',sortable : true,width : '70px'
},
{title : '菜单URL',field : 'url',align : 'center',valign : 'middle',sortable : true,width : '160px'
},
{title : '授权标识',field : 'permission',align : 'center',valign : 'middle',sortable : true
}];

3.方法引用:

    $(function() {doLoadEditPage();})function doLoadEditPage(title) {var url = "menu/doGetMenuMessage.do";//1.构建treeTable对象var tableId = "menuTable";/* tableId:这个treeTable存放的位置 *//* url:数据来源 *//* 上面定义的数组,以什么样的形式展示 */var treeTable = new TreeTable(tableId, url, columns);//2.初始化treeTable//设置可展开的列,默认为1treeTable.setExpandColumn(2);//初始化table对象(底层发起ajax异步请求访问服务端)
        treeTable.init();//展开所有//treeTable.setExpandAll(false);}

3.删除表格中的某一行,而不进行查询数据库再渲染数据

3.1直接移除这一行:

(1)用开发者工具找到这一行所在的 tbody 的class或者id

(2)这个本来是单选框,所以可以如下操作:

function doDeleteRowElement(){    //获取被选中的单选框对象var selected = $(".treegrid-tbody input[type='radio']:checked");     //找到他的祖先元素<tr></tr>var tr = selected.parents("tr");console.log(tr);     //移除这个trtr.remove();}

转载于:https://www.cnblogs.com/gxlaqj/p/11457437.html

treeGrid插件相关推荐

  1. TreeGrid插件简练了解使用

    这是TreeGrid插件的简单实用不足之处,请各位大佬指正. TreeGrid插件是生成带层级列表的,可折叠的菜单列表,columns是插件指定的配置每一列展示格式,及使用的数据字段名称的配置项,以j ...

  2. DataTables TreeGrid 插件 可以快速实现树形表格

    dataTables.treeGrid 插件介绍 更新日志 真实系统展现效果 DEMO参考 使用方法 DataTable 渲染JSON数据格式 HTML数据格式(以DEMO截图代码为例) 插件介绍 针 ...

  3. treegrid 的使用介绍

    最近在项目开发中使用easyuide treegrid插件,下面将结合项目来介绍下自己的使用心得. 使用到treegrid插件的是权限管理模块,主要功能还是crud,首先在使用easyui时要引入相应 ...

  4. jQuery TreeGrid

    树形表格插件jQuery TreeGrid 借助树形表格插件jQuery TreeGrid,我们可以以表格的形式来展现那些带有层级关系的数据,比如部门上下级,菜单表等.jQuery TreeGrid的 ...

  5. java菜单管理模块_后台管理系统-菜单管理模块

    1 菜单管理页面设计 1.1 业务设计 菜单管理又称为资源管理,是系统资源对外的表现形式.本模块主要是实现对菜单进行添加.修改.查询.删除等操作.CREATE TABLE `sys_menus` ( ...

  6. 旅游管理项目JAVA

    旅游管理项目 一.项目解析 1.1 概述 1.2 原型分析 二.技术架构 2.1 项目分层架构 2.2 API应用架构 3 技术整合 3.1 环境准备 3.1.1 数据库初始化 3.1.2 IDE配置 ...

  7. 第三阶段实战(三)——菜单管理功能设计与实现

    1 菜单管理设计说明 1.1 业务设计说明 菜单管理又称为资源管理,是系统资源对外的表现形式.本模块主要是实现对菜 单进行添加.修改.查询.删除等操作.其表设计语句如下: DROP TABLE IF ...

  8. 四、菜单管理(1)---菜单页面、列表呈现,数据管理和删除

    文章目录 一.菜单管理设计说明 1.1 业务设计说明 1.2 原型设计说明 1.3 API设计说明 二.菜单管理列表页面呈现 2.1 业务时序分析 2.2 服务端实现 2.2.1 Controller ...

  9. 阅读分析程序源代码的一些方法(转载整理)

    前言 最近项目组中有较多新成员需要阅读熟悉项目中已有的程序代码,好多成员一时间对项目代码摸不清头绪,这里在网络上收集了相关源代码阅读分析的一些方法,整理于此. 正文 摘自(繁体中文Traditiona ...

最新文章

  1. 磐创AI - 专注机器学习技术分享
  2. GitHub实战系列~1.环境部署+创建第一个文件 2015-12-9
  3. 最简单实现多线程的方法(Thread)
  4. Python(2.7.6) copy - 浅拷贝与深拷贝
  5. log4j 日志配置
  6. pwn环境搭建_pwndbg、pwntools环境搭建(Unix系统)
  7. ConcurrentHashMap深度分析(JDK 1.8版本)
  8. 天天在用消息队列,却还不知道为啥要用 MQ ,这就尴尬了
  9. 根据实例详解Java中的反射机制
  10. python 安装包查询_Linux系统下查找安装包所在目录
  11. 货物贸易外汇监测系统 企业版_能源在线监测系统对用能企业的优势
  12. 你了解HTTPS,但你可能不了解X.509
  13. Memcache集群安装与配置
  14. 洛谷P1880 石子合并 区间动归
  15. 1.13 Linux创建与删除用户
  16. 关于qt+vs2019报错的奇葩问题,无法定位程序输入点
  17. 使用字典暴力破解练习
  18. PLSQL官方下载、安装和使用完全指南
  19. Redis expire
  20. Java实现第十届蓝桥杯最大降雨量

热门文章

  1. 《隐姓亿万富翁》读后感
  2. 【转】我和权威的故事
  3. 英语学习——长难句01
  4. 几行JS代码防止网站在QQ和微信被举报
  5. tilemap 菱形_带高度的isometric tile map 斜45度 2d 地图制作
  6. 企业级BOM项目建设概况
  7. 超好看的情侣纪念日记录单页HTML自适应源码
  8. 智星云平台MatDEM问题集
  9. React基础(伍)———【案例】todoList
  10. android 内存6g 8g 12g,手机多大内存够用,6g和8g要怎么选,有必要上12g运存吗