前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是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. LeetCode_13. Roman to Integer

    13. Roman to Integer Easy Roman numerals are represented by seven different symbols: I, V, X, L, C,  ...

  2. kubernetes 之kubelet客户端证书过期问题处理 KubeClientCertificateExpiration apiserver (monitoring/k8s warning) Kubernetes API certificate is expiring in less than 7 days.

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4gAAAKMCAYAAAAZj+XuAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYG ...

  3. QFramework 使用指南 2020(八):Res Kit(2)模拟模式与非模拟模式

    在上一篇,介绍了 Res Kit 的基本使用,相信大家已经体会到了 Res Kit 的简便之处了. 在这一篇,我们试着探讨一下 Res Kit 的设计背后原理. AssetBundle 的不便之处 在 ...

  4. vue-cli 3.x搭建项目以及其中vue.config.js文件的配置

    参考链接:https://www.cnblogs.com/wxh0929/p/11271551.html vue-cli3全面配置详解:https://www.jb51.net/article/150 ...

  5. Vue父子组件传值$parent , ref,$refs,props大总结

    子组件: <template> <div class="child"> <slot name='meiyong'></slot> & ...

  6. Django之会话机制cookie、session使用

    login视图函数: def login(request): if request.method == 'POST': username = request.POST.get('username') ...

  7. mui mui-control-item获得选中的标签

    function getActiveControl() { var segmentedControl = document.getElementById("top-scroll") ...

  8. vue中可以自定义动画的前缀

    vue中可以自定义动画的前缀1.只需在中加入name属性即可 <transition name="my"> <h6 v-if="flag2"& ...

  9. 小菜鸟之liunx

    目录 第一章:Linux简介 1 Linux特点 1 CentOS 1 第二章:Linux安装 2 Linux目录结构 2 第三章:Linux常用命令 2 Linux命令的分类 3 操作文件或目录常用 ...

  10. Spark Scala当中reduceByKey(_+_) reduceByKey((x,y) => x+y)的用法

    [学习笔记] reduceByKey(_+_)是reduceByKey((x,y) => x+y)的一个 简洁的形式*/ val rdd08 = sc.parallelize(List((1, ...