Bootstrap treegrid 实现树形表格结构
前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是bootstrap,但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组件贴出来 大家共同讨论进步。
1 效果图
2 组件下载地址
链接: https://pan.baidu.com/s/1R8jIGXimeJwUcL7WyqZjDA 密码: 请加本人的QQ (2353806846)提取
链接: https://pan.baidu.com/s/1zSo0lewyxMcCaIVf3JLCmQ 提取码: yryy
3 组件的使用
3.1 在页面中引入如下的文件
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/jquery-treegrid-master/css/jquery.treegrid.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.min.js"></script>
<script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.bootstrap3.js"></script>
<script src="~/Content/jquery-treegrid-master/extension/jquery.treegrid.extension.js"></script>
3.2 然后定义一个空的table标签
<table id="tb" ></table>
3.3 初始化 js
$('#tb').treegridData({
id: 'shopId',
parentColumn: 'parentId',
type: "POST", //请求数据的ajax类型
url: baseURL + "sys/shop/shopTreeList", //请求数据的ajax的url
ajaxParams: {}, //请求数据的ajax的data属性
expandColumn: 'shopId',//在哪一列上面显示展开按钮
striped: true, //是否各行渐变色
bordered: true, //是否显示边框
//expandAll: false, //是否全部展开
columns: [
{title: '商户名称',field:'name',index:'title', width:100,sortable:false},
{title: '省份',field:'province',index:'province', width:80,sortable:false},*/
{title: '城市',field:'city',index:'city', width:80,sortable:false},
{title: '地区',field:'area',index:'area', width:80,sortable:false},
{title: '操作',field:'shopId',index:'shopId',widt:30,formatter: function(row, index){
return "<a class='label label-success' onclick='query(\""+row.shopId+"\")'>详情</a> " +
"<a class='label label-success' onclick='updateShop(\""+row.shopId+"\")'>修改</a>";
}}
]
});
4 细节
4.1 该组件支持无限级树形结构; 4.2 节点数据必须有 id和父id 字段; 4.3 单元列 中formatter:function(row,index)的row 代表当前行的数据,index 代表当前行的索引;
5 相关函数
待续 .....
6 Bootstrap Table API 中文版(完整翻译文档)连接
https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1
Bootstrap treegrid 实现树形表格结构的更多相关文章
- Bootstrap table 实现树形表格,实现联动选中,联动取消
公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...
- Jquery easyui treegrid实现树形表格的行拖拽
前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
- TreeGrid分页树形表格
先展示效果图: 加载treegrid的json数据格式有两种: (1)基本的数据结构 [{ , "name":"C", "size":&qu ...
- easyUI中treegrid组件构造树形表格(简单数据类型)+ssm后台
这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...
- TreeGrid( 树形表格)
本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于DataGrid(数据表格)组件 一. 加载方式//建立一个 JSON 文件[{"id" ...
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
- 【整理】treeGrid 树形表格
treeGrid 树形表格 https://fly.layui.com/extend/treeGrid/
- treegrid树形表格的完美运用
一 问题描述: 树形表格TreeGrid在日常项目中还是运用的比较多的,哪我们在项目中,应该怎么引入和使用 TreeGrid呢? 二 使用步骤 1.首先我们需要在项目中,引入TreeGrid组件 需 ...
- ELement-UI之树形表格(treeTable&&treeGrid)
先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...
随机推荐
- JAVA 基础编程练习题33 【程序 33 杨辉三角】
33 [程序 33 杨辉三角] 题目:打印出杨辉三角形(要求打印出 10 行如下图) 程序分析: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 package ...
- Cloudera Manager 概念
cloudera公司发布的CDH集群,使用Cloudera Manager来管理整个集群,使用过程中主要涉及到几个关键概念:cluster.service.role.host.直接上图,直观理解几个概 ...
- 利用官方的ucosiii包中测试板的工程移植到属于自己的开发板(stmf103ZE)上
ucosIII官方下载地址:https://www.micrium.com 第一:是不是ucosIII:第二,工具链是不是keil(我用的是keil,如何用的是IAR就选有IAR的):第三MCU是不是 ...
- Nginx-windows
1.下载 http://nginx.org/ 选择最新稳定版本,例如nginx-1.15.5 mainline version has been released. 点击后,跳转页面,选择Stable ...
- onethink多图上传
模板处理, 可以参考 checkbox 的. 注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的cal ...
- 01.02 linux命令(1
=================常用的Linux命令============================Ls 查看当前文件夹下或者其他文件夹的文件列表或者文件夹列表Ls -l 详细信息的列表L ...
- 【VS开发】IPicture在指定窗口绘制图
1.利用IPicture接口加载.显示图片 IPicture接口管理一个图片对象和它的属性.图片对象提供对Bitmap Icon Metafile的语言不相关的抽象支持.图像对象的主要接口是IPict ...
- Guava源码阅读-base-Charsets
package com.google.common.base; 今天在找base包下的源码阅读时,看到了Charsets,肯定是定义字符集的类,本来就想简单的看一下.(部分内容摘抄自:http://b ...
- tesseract 3.04在centos6上安装
tesseract是一个开源的OCR文字识别工具 查找相关文章:tesseract tesseract 4.0一直安装失败,后来参照网上的方法,成功安装3.04 1 2 3 4 5 6 7 8 9 ...
- 用java转换文件的字符集
中文乱码真的是让人很头疼问题,有了这个方法应该能缓解这种头疼,用的是递归方式查找文件,直接在原文件中修改,小心使用(在本地测试效果有点诡异呀,没有达到预期效果). package com.hy.uti ...