treeGrid插件
他是数据呈现的一个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插件相关推荐
- TreeGrid插件简练了解使用
这是TreeGrid插件的简单实用不足之处,请各位大佬指正. TreeGrid插件是生成带层级列表的,可折叠的菜单列表,columns是插件指定的配置每一列展示格式,及使用的数据字段名称的配置项,以j ...
- DataTables TreeGrid 插件 可以快速实现树形表格
dataTables.treeGrid 插件介绍 更新日志 真实系统展现效果 DEMO参考 使用方法 DataTable 渲染JSON数据格式 HTML数据格式(以DEMO截图代码为例) 插件介绍 针 ...
- treegrid 的使用介绍
最近在项目开发中使用easyuide treegrid插件,下面将结合项目来介绍下自己的使用心得. 使用到treegrid插件的是权限管理模块,主要功能还是crud,首先在使用easyui时要引入相应 ...
- jQuery TreeGrid
树形表格插件jQuery TreeGrid 借助树形表格插件jQuery TreeGrid,我们可以以表格的形式来展现那些带有层级关系的数据,比如部门上下级,菜单表等.jQuery TreeGrid的 ...
- java菜单管理模块_后台管理系统-菜单管理模块
1 菜单管理页面设计 1.1 业务设计 菜单管理又称为资源管理,是系统资源对外的表现形式.本模块主要是实现对菜单进行添加.修改.查询.删除等操作.CREATE TABLE `sys_menus` ( ...
- 旅游管理项目JAVA
旅游管理项目 一.项目解析 1.1 概述 1.2 原型分析 二.技术架构 2.1 项目分层架构 2.2 API应用架构 3 技术整合 3.1 环境准备 3.1.1 数据库初始化 3.1.2 IDE配置 ...
- 第三阶段实战(三)——菜单管理功能设计与实现
1 菜单管理设计说明 1.1 业务设计说明 菜单管理又称为资源管理,是系统资源对外的表现形式.本模块主要是实现对菜 单进行添加.修改.查询.删除等操作.其表设计语句如下: DROP TABLE IF ...
- 四、菜单管理(1)---菜单页面、列表呈现,数据管理和删除
文章目录 一.菜单管理设计说明 1.1 业务设计说明 1.2 原型设计说明 1.3 API设计说明 二.菜单管理列表页面呈现 2.1 业务时序分析 2.2 服务端实现 2.2.1 Controller ...
- 阅读分析程序源代码的一些方法(转载整理)
前言 最近项目组中有较多新成员需要阅读熟悉项目中已有的程序代码,好多成员一时间对项目代码摸不清头绪,这里在网络上收集了相关源代码阅读分析的一些方法,整理于此. 正文 摘自(繁体中文Traditiona ...
最新文章
- 磐创AI - 专注机器学习技术分享
- GitHub实战系列~1.环境部署+创建第一个文件 2015-12-9
- 最简单实现多线程的方法(Thread)
- Python(2.7.6) copy - 浅拷贝与深拷贝
- log4j 日志配置
- pwn环境搭建_pwndbg、pwntools环境搭建(Unix系统)
- ConcurrentHashMap深度分析(JDK 1.8版本)
- 天天在用消息队列,却还不知道为啥要用 MQ ,这就尴尬了
- 根据实例详解Java中的反射机制
- python 安装包查询_Linux系统下查找安装包所在目录
- 货物贸易外汇监测系统 企业版_能源在线监测系统对用能企业的优势
- 你了解HTTPS,但你可能不了解X.509
- Memcache集群安装与配置
- 洛谷P1880 石子合并 区间动归
- 1.13 Linux创建与删除用户
- 关于qt+vs2019报错的奇葩问题,无法定位程序输入点
- 使用字典暴力破解练习
- PLSQL官方下载、安装和使用完全指南
- Redis expire
- Java实现第十届蓝桥杯最大降雨量