bootstrapTable+treegrid树形表格

最新推荐文章于 2024-05-30 17:43:11 发布
最新推荐文章于 2024-05-30 17:43:11 发布
阅读量4.1k 收藏 7
点赞数
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40178741/article/details/109863760
版权

bootstrapTable+treegrid树形表格

效果入下：
在这里插入图片描述
data数据：
这里需要有个id和pid,就是下面需要用的idField和treeShowField属性

var data=[{
        "name":"状态",
        "orderBy":1,
        "description":null,
        "id":"297ea48b661ed59101661f8eaf150004",
        "code":"ZT",
        "zid":""
    },
    {
        "name":"服务区域",
        "orderBy":1,
        "description":null,
        "id":"402881a0670bff6401670c160b46007a",
        "code":"FWQY",
        "zid":""
    },
    {
        "name":"基本设置",
        "orderBy":1,
        "description":"基本设置模块",
        "id":"402882ae70ec9c190170eca02c94000b",
        "code":"Base",
        "zid":""
    },
    {
        "name":"生产资料建模",
        "orderBy":5,
        "description":"生产资料建模中的字典",
        "id":"402882ae7134e86b017135256c7000a7",
        "code":"FactoryData",
        "zid":""
    },
    {
        "name":"项目管理设置",
        "orderBy":6,
        "description":null,
        "id":"402882ae715ec26801715ee5428f0015",
        "code":"ProjctManger",
        "zid":""
    },
    {
        "name":"通用状态",
        "orderBy":0,
        "description":null,
        "id":"297ea48b66187b6a01661892133f0001",
        "code":"CommDataStatus",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"单据状态",
        "orderBy":0,
        "description":null,
        "id":"402881e06699ee6801669a8cec940007",
        "code":"OrderStatus",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"确认状态",
        "orderBy":0,
        "description":null,
        "id":"402881e066be9a7e0166be9f35ec0002",
        "code":"ConfirmStatus",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"费用标识",
        "orderBy":0,
        "description":null,
        "id":"402881e066be9a7e0166be9f7e110003",
        "code":"FeeSign",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"城市级别",
        "orderBy":0,
        "description":null,
        "id":"297ea48b661ed59101661f914a330007",
        "code":"CityLevel",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"区域状态",
        "orderBy":1,
        "description":null,
        "id":"297ea48b661ed59101661f95615f000e",
        "code":"status",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"单据类型",
        "orderBy":1,
        "description":null,
        "id":"4028f0816680f302016680fb2bc50001",
        "code":"OrderType",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
	{
        "name":"送货车型",
        "orderBy":0,
        "description":null,
        "id":"402881a0670bff6401670c166fa6007e",
        "code":"zlinterval",
        "zid":"402881a0670bff6401670c160b46007a"
    }
]

引入css和js


<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">


<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

html代码

<!DOCTYPE HTML>
<html lang="zh-cn">

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width,initial-scale=1.0" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>树形表格</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
    </head>

    <body>
        <div class="container">
            <h1>树形表格 ： Table Treegrid</h1>
            <table id="table"></table>
            <br/>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
    <script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
    <script type="text/javascript">
        var $table = $('#table');
        var data =var data=[{
        "name":"状态",
        "orderBy":1,
        "description":null,
        "id":"297ea48b661ed59101661f8eaf150004",
        "code":"ZT",
        "zid":""
    },
    {
        "name":"服务区域",
        "orderBy":1,
        "description":null,
        "id":"402881a0670bff6401670c160b46007a",
        "code":"FWQY",
        "zid":""
    },
    {
        "name":"基本设置",
        "orderBy":1,
        "description":"基本设置模块",
        "id":"402882ae70ec9c190170eca02c94000b",
        "code":"Base",
        "zid":""
    },
    {
        "name":"生产资料建模",
        "orderBy":5,
        "description":"生产资料建模中的字典",
        "id":"402882ae7134e86b017135256c7000a7",
        "code":"FactoryData",
        "zid":""
    },
    {
        "name":"项目管理设置",
        "orderBy":6,
        "description":null,
        "id":"402882ae715ec26801715ee5428f0015",
        "code":"ProjctManger",
        "zid":""
    },
    {
        "name":"通用状态",
        "orderBy":0,
        "description":null,
        "id":"297ea48b66187b6a01661892133f0001",
        "code":"CommDataStatus",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"单据状态",
        "orderBy":0,
        "description":null,
        "id":"402881e06699ee6801669a8cec940007",
        "code":"OrderStatus",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"确认状态",
        "orderBy":0,
        "description":null,
        "id":"402881e066be9a7e0166be9f35ec0002",
        "code":"ConfirmStatus",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"费用标识",
        "orderBy":0,
        "description":null,
        "id":"402881e066be9a7e0166be9f7e110003",
        "code":"FeeSign",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"城市级别",
        "orderBy":0,
        "description":null,
        "id":"297ea48b661ed59101661f914a330007",
        "code":"CityLevel",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"区域状态",
        "orderBy":1,
        "description":null,
        "id":"297ea48b661ed59101661f95615f000e",
        "code":"status",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
    {
        "name":"单据类型",
        "orderBy":1,
        "description":null,
        "id":"4028f0816680f302016680fb2bc50001",
        "code":"OrderType",
        "zid":"297ea48b661ed59101661f8eaf150004"
    },
	{
        "name":"送货车型",
        "orderBy":0,
        "description":null,
        "id":"402881a0670bff6401670c166fa6007e",
        "code":"zlinterval",
        "zid":"402881a0670bff6401670c160b46007a"
    }
];

$(function () {
        var $table = $("#gridTable");
        $table.bootstrapTable({
            data:data
            idField: 'id',
            clickToSelect: true,
            singleSelect: true,
            columns: [
                {
                    field: 'check', checkbox: true, formatter: function (value, row, index) {
                        if (row.check == true) {
                            //设置选中
                            return {checked: true};
                        }
                    }
                },
                {title: '名称', field: 'name', width: 200, align: 'left', sortable: true},
                {title: '编号', field: 'code', width: 200, align: 'center', sortable: true},
                {title: '排序', field: 'orderBy', width: 80, align: 'center', sortable: true},
                {title: "备注", field: "description", width: 200, align: "left", sortable: true}
            ],
            //在哪一列展开树形
            treeShowField: 'name',
            //指定父id列
            parentIdField: 'zid',
            onResetView: function (data) {
                $table.treegrid({
                    // initialState: 'collapsed', // 所有节点都折叠
                    initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 1,  //设置点击树形位置
                     // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                     // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function () {
                        $table.bootstrapTable('resetWidth');
                    }
                });
                 //只展开树形的第一级节点
                //$table.treegrid('getRootNodes').treegrid('expand');
            },
        });
    });
    </script>

注意事项：这里没有使用分页 数据是List对象，
bootstrapTable在使用分页的情况下 数据对象Map : total 总数、rows数据集

碰到的问题：使用bootstrap-table-treegrid插件来展示表格树，未进行treegrid配置的时候，表格正常展示，但配置之后数据就不展示了：一直报错。
在这里插入图片描述

查看数据库里的数据才发现用作指定父id列 parentIdField: 'zid’在数据库中根节点的值设为了root，但是treegrid要求当前记录的 parentIdField为 null 或者空字符串的时候，这个节点就是根节点，然后根据根节点去递归找子节点,不然就会报错。

引用：https://www.cnblogs.com/daniao11417/p/11425146.html

你开枪吧
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstraptable+treegrid实现树状表格
qq_39847344的博客
03-08 2701
1.首先引入相关的文件： &lt;script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"&gt;&lt;/script&gt; &lt;script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/tree...
bootstrap-table + treegrid 实现树形表格
qq_21223653的博客
05-27 783
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的实现：使用bootstrap-table + treegrid 。 引入 jquery.js、bootstrap-table.js、bootstrap-table-treegrid.js、jquery.treegrid.js 以及相应的 css 文件：bootstrap.css、bootstrap-table.css、jquery.treegrid.css； 后台传到前台的
EasyUI TreeGrid 在Django中的使用，构建树形表格
最新发布
qq_44714317的博客
05-30 396
仿照官网给出的数据格式，我们传到前端数据也需要进行格式转换。由于我们在Python后端中常用的数据结构为列表或字典，下面我以列表为源数据进行转换为例。2、一条数据不能对应多条父级，因此要注意每条数据的id最好是唯一的。（这里有些业务场景可能会需要这个功能，后续找到合适的处理方式再来完善）按照官网给的前端源代码，按照JSS和CSS文件路径在官网下载的文件夹中找到对应的资源放到自己的代码中去。首先去EasyUI官网下载免费版，拿到框架基础JS及CSS文件。1、必须要有根节点，且根节点的父节点处应为空。
BootStrap-Table-Treegrid树形表格使用指南
热门推荐
小马同学
12-28 1万+
BootStrap-bable-treegrid Bootstrap是目前很流行的一款前端框架，也有很多第三方基于Bootstrap开发出了很多跟实用性的一些功能，比如BootStrap-bable-treegrid树形表格。树形表格在开发中应该是很常用到的。 引入样式文件 <link rel="stylesheet" href="static/bootstrap/dist/css/...
【EasyUI】基本树形表格TreeGrid踩坑指南
習習君的博客
05-04 2949
最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。其中包含：获取当前树组件层级、树组件的属性、树组件的事件和方法等等。
基于Vue + element制作扁平化树形结构渲染表格（动态行列合并，树结构算法应用）
m0_49083276的博客
09-15 2295
1）扁平转树和树形转扁平，element-ui的表格组件从数组索引0开始渲染一直到最后，如果后端没有按照顺序传数据会导致表格错乱，所以我们需要将数据二次处理（扁平转树再转扁平），达到整理数据的效果//扁平转树if (!} else {});} else {});},//树转扁平// 将当前节点添加到结果数组中// 递归遍历子节点// 从每个根节点开始遍历},//重构数据},
vue-table-with-tree-grid系列之树形表格
老__L的博客
12-24 1109
树形表格
easyui中最新版本的TreeGrid同步树形表格、同步加异步树形表格、树形表格分页且异步查看子节点
那一刻，那一夜，那一月，那一年，那一世
01-13 6348
easyui中最新版本的TreeGrid同步树形表格、同步加异步树形表格、树形表格分页且异步查看子节点
bootstrap-table+treegrid实现树形表格
12-10
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的实现：使用bootstrap-table + treegrid 。 1、引入 jquery.js、bootstrap-table.js、...
bootstrap-treegrid实现树形表格.zip
07-24
Bootstrap Treegrid是一款基于Bootstrap框架和...总之，Bootstrap Treegrid是用于构建具有层级关系的表格的优秀工具，通过简单的配置和丰富的API，可以轻松实现功能丰富的树形表格，提升数据展示的清晰度和用户体验。
bootstrap treegrid
10-21
bootstrap treegrid简单说明以及例子代码 用 visual studio 2010或者以上版本运行 asp.net mvc 3的
JS 组件系列之BootstrapTable的treegrid功能
12-08
上篇给大家介绍了JS 组件系列之 bootstrap treegrid 组件封装过程，下面重点给大家介绍JS 组件系列之BootstrapTable的treegrid功能，需要的的朋友一起学习吧！ 一、效果预览 全部折叠 展开一级 全部展开 二、代码示例 怎么样？效果还行吧。给出js的源码供大家参考。 (function ($) { 'use strict'; var sprintf = function (str) { var args = arguments, flag = true, i = 1; str = str.replace(/%s/g, function
Bootstrap table 实现树形表格联动选中联动取消功能
12-13
公司最近有需求要做树形式table。因为是前后端不分离项目，且之前已经引入了bootstrap table插件，现把实现方式分享一下： <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" ...
基于Bootstrap的树形表格设计源码
04-18
本项目是基于Bootstrap的树形表格设计源码，包含31个文件，其中主要包含7个js脚本文件，5个css样式文件等。系统采用了JavaScript、CSS和HTML技术，实现了基于Bootstrap的树形表格功能。该项目最初出现在guns项目中，...
TreeGrid分页树形表格
weixin_30311605的博客
08-16 1969
先展示效果图： 加载treegrid的json数据格式有两种： （1）基本的数据结构 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"Program Files",...
BootstrapTable本地添加、删除、修改数据
duansamve的博客
04-29 1万+
BootstrapTable本地添加、删除、修改数据
JS组件系列——Bootstrap 树控件使用经验分享
weixin_33755847的博客
01-12 835
前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。 一、JQuery树形控件 Jquery树形控件是一款基...
BootStrap-table-treegrid树形无效，_nodes为空
06-07
如果 BootStrap-table-treegrid 树形无效，_nodes 为空，可能是以下原因： 1. 检查数据格式是否正确。确保您的数据格式正确，并且每个节点都包含一个 _nodes 数组，这个数组包含子节点的数据。请注意，这个数组的值必须是一个数组，即使该节点没有子节点。 2. 确认您已经正确地配置 BootStrap-table-treegrid 插件。您应该按照插件文档中的说明正确地配置插件，并且确保您的 HTML 元素包含正确的类和 ID。 3. 确保您的代码没有错误。请检查您的代码是否有任何语法错误或逻辑错误。您可以使用浏览器的开发者工具来检查代码是否有错误。 4. 确保您的数据不为空。如果您的数据为空，则树形结构将无法显示。 如果您已经检查了上述所有内容，并且仍然无法解决问题，请尝试使用更具体的错误消息来诊断问题。您可以在浏览器控制台中查看错误消息，以了解更多信息。如果您仍然无法解决问题，请提供更多细节，以便我能够为您提供更好的帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值