前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是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 实现树形表格结构的更多相关文章

  1. Bootstrap table 实现树形表格,实现联动选中,联动取消

    公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...

  2. Jquery easyui treegrid实现树形表格的行拖拽

    前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...

  3. TreeGrid分页树形表格

    先展示效果图: 加载treegrid的json数据格式有两种: (1)基本的数据结构 [{ , "name":"C", "size":&qu ...

  4. easyUI中treegrid组件构造树形表格(简单数据类型)+ssm后台

    这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...

  5. TreeGrid( 树形表格)

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

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

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

  7. 【整理】treeGrid 树形表格

    treeGrid 树形表格 https://fly.layui.com/extend/treeGrid/

  8. treegrid树形表格的完美运用

    一 问题描述: 树形表格TreeGrid在日常项目中还是运用的比较多的,哪我们在项目中,应该怎么引入和使用 TreeGrid呢? 二 使用步骤 1.首先我们需要在项目中,引入TreeGrid组件  需 ...

  9. ELement-UI之树形表格(treeTable&&treeGrid)

    先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...

随机推荐

  1. 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 ...

  2. Cloudera Manager 概念

    cloudera公司发布的CDH集群,使用Cloudera Manager来管理整个集群,使用过程中主要涉及到几个关键概念:cluster.service.role.host.直接上图,直观理解几个概 ...

  3. 利用官方的ucosiii包中测试板的工程移植到属于自己的开发板(stmf103ZE)上

    ucosIII官方下载地址:https://www.micrium.com 第一:是不是ucosIII:第二,工具链是不是keil(我用的是keil,如何用的是IAR就选有IAR的):第三MCU是不是 ...

  4. Nginx-windows

    1.下载 http://nginx.org/ 选择最新稳定版本,例如nginx-1.15.5 mainline version has been released. 点击后,跳转页面,选择Stable ...

  5. onethink多图上传

    模板处理, 可以参考 checkbox 的. 注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的cal ...

  6. 01.02 linux命令(1

    =================常用的Linux命令============================Ls 查看当前文件夹下或者其他文件夹的文件列表或者文件夹列表Ls  -l 详细信息的列表L ...

  7. 【VS开发】IPicture在指定窗口绘制图

    1.利用IPicture接口加载.显示图片 IPicture接口管理一个图片对象和它的属性.图片对象提供对Bitmap Icon Metafile的语言不相关的抽象支持.图像对象的主要接口是IPict ...

  8. Guava源码阅读-base-Charsets

    package com.google.common.base; 今天在找base包下的源码阅读时,看到了Charsets,肯定是定义字符集的类,本来就想简单的看一下.(部分内容摘抄自:http://b ...

  9. tesseract 3.04在centos6上安装

    tesseract是一个开源的OCR文字识别工具 查找相关文章:tesseract   tesseract 4.0一直安装失败,后来参照网上的方法,成功安装3.04 1 2 3 4 5 6 7 8 9 ...

  10. 用java转换文件的字符集

    中文乱码真的是让人很头疼问题,有了这个方法应该能缓解这种头疼,用的是递归方式查找文件,直接在原文件中修改,小心使用(在本地测试效果有点诡异呀,没有达到预期效果). package com.hy.uti ...