treegrid 表格树

treegrid  实现表格树的结构

效果图：

第一步：页面布局

   <div class="col-sm-12 select-table table-striped" style="padding: 30px">
      <table id="norm_table"></table>
    </div>

第二步：引入JS/CSS

//js 一般CDN 上都有
 <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>

　　

第三步：初始化JS(静态数据）

<script type="text/javascript">
  var $table = $(‘#norm_table‘);
        $table.bootstrapTable({
          idField: ‘tid‘,//主键         dataType: ‘jsonp‘,
          columns: [{
            field: ‘name‘,
            title: ‘代码名称‘,
            width: 140
          }, {
            field: ‘code‘,
            title: ‘代码‘,
          }, {
            field: ‘mnemonode‘,
            title: ‘助记码‘
          }, {
            field: ‘remark‘,
            title: ‘备注‘
          },
            {
              field: ‘createTime‘,
              title: ‘时间‘,
            }
          ],
　　　　　　

data:[{"tid":1,"parentId":0,"tlevel":0,"computeInfoGatherId":null,"tcode":"yz","tname":"研r","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":2,"parentId":0,"tlevel":null,"computeInfoGatherId":null,"tcode":"sc","tname":"生产","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":3,"parentId":0,"tlevel":null,"computeInfoGatherId":null,"tcode":"zy","tname":"在役","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":4,"parentId":1,"tlevel":null,"computeInfoGatherId":null,"tcode":"yz-zy","tname":"正样阶段","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":5,"parentId":1,"tlevel":null,"computeInfoGatherId":null,"tcode":"yz-sj","tname":"设计阶段","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":6,"parentId":4,"tlevel":null,"computeInfoGatherId":null,"tcode":"yz-zy-01","tname":"功能性tre况","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":7,"parentId":4,"tlevel":null,"computeInfoGatherId":null,"tcode":"yz-zy-02","tname":"可靠性况","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":8,"parentId":5,"tlevel":null,"computeInfoGatherId":null,"tcode":"yz-sj-01","tname":"设计tr况","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":9,"parentId":5,"tlevel":null,"computeInfoGatherId":null,"tcode":"yz-sj-02","tname":"功能性能况","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":10,"parentId":2,"tlevel":null,"computeInfoGatherId":null,"tcode":"sc-sc","tname":"生产阶段","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":11,"parentId":2,"tlevel":null,"computeInfoGatherId":null,"tcode":"sc-sy","tname":"使用阶段","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":12,"parentId":10,"tlevel":null,"computeInfoGatherId":null,"tcode":"sc-sc-01","tname":"一次通过产品数","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":13,"parentId":10,"tlevel":null,"computeInfoGatherId":null,"tcode":"sc-sc-02","tname":"提交产品数","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":14,"parentId":11,"tlevel":null,"computeInfoGatherId":null,"tcode":"sc-sy-01","tname":"使用阶9品数","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null},{"tid":15,"parentId":11,"tlevel":null,"computeInfoGatherId":null,"tcode":"sc-sy-02","tname":"使用阶段8数","dictionariesLineId":null,"lineNumbers":null,"mnemonicCode":null,"remark":null,"intDefault1":null,"intDefault2":null,"intDefault3":null,"intDefault4":null,"intDefault5":null,"strDefault1":null,"strDefault2":null,"strDefault3":null,"strDefault4":null,"strDefault5":null,"timeDefault1":null,"timeDefault2":null,"timeDefault3":null,"enabled":1,"createBy":"admin","createTime":"2019-10-21 17:14:12","modifiedBy":null,"modifyTime":null}]

          //在哪一列展开树形
          treeShowField: ‘tname‘,
          //指定父id列
          parentIdField: ‘parentId‘,
          onResetView: function (data) {
            //console.log(‘load‘);
            $table.treegrid({
              initialState: ‘collapsed‘, // 所有节点都折叠
              initialState: ‘expanded‘,// 所有节点都展开，默认展开
              treeColumn: 0,
              // expanderExpandedClass: ‘glyphicon glyphicon-minus‘,  //图标样式
              // expanderCollapsedClass: ‘glyphicon glyphicon-plus‘,
              onChange: function () {
                $table.bootstrapTable(‘resetWidth‘);
              }
            });
            //只展开树形的第一级节点
            //$table.treegrid(‘getRootNodes‘).treegrid(‘expand‘);

          },
        });

<script>

　　

　　　　　　　　　　　　　　<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<----------------------.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

动态获取后台数据：

第一步：页面和JS/CSS不动，需要修改js初始化文件，修改后为

<script type="text/javascript">

  $.ajax({
    type: "POST",//请求方式 　　url: ctx + "norm/data/后台数据路径   data: {},//参数　　 async: false,//AJAX异步   success: function (resp) {
      if (resp.success) {
        $table.bootstrapTable({
          data: resp.data,
          idField: ‘tid‘,
          dataType: ‘jsonp‘,
          columns: [{
            field: ‘name‘,
            title: ‘名称‘,
            width: 140
          }, {
            field: ‘code‘,
            title: ‘代码‘,
          }, {
            field: ‘mnemonode‘,
            title: ‘助记码‘
          }, {
            field: ‘remark‘,
            title: ‘备注‘
          },
            {
              field: ‘createTime‘,
              title: ‘时间‘,
            }
          ],

          //在哪一列展开树形
          treeShowField: ‘tname‘,
          //指定父id列
          parentIdField: ‘parentId‘,
          onResetView: function (data) {
            //console.log(‘load‘);
            $table.treegrid({
              initialState: ‘collapsed‘, // 所有节点都折叠
              initialState: ‘expanded‘,// 所有节点都展开，默认展开
              treeColumn: 0,
              // expanderExpandedClass: ‘glyphicon glyphicon-minus‘,  //图标样式
              // expanderCollapsedClass: ‘glyphicon glyphicon-plus‘,
              onChange: function () {
                $table.bootstrapTable(‘resetWidth‘);
              }
            });
            //只展开树形的第一级节点
            //$table.treegrid(‘getRootNodes‘).treegrid(‘expand‘);

          },
        });
      }
    }
  });
<script>　

第二步：Controller 层数据

  @ResponseBody
  @PostMapping("/data)
  public AjaxResultDto normData(Norm norm) {
    List<Norm> list = normService.selectNormList(norm);　　//返回ajax 数据   return AjaxResultDto.success(list);
  }

　　

题外：

实体类至少要有的的字段：id,parentId

public class Norm implements Serializable {

  private static final long serialVersionUID = 1L;

  /**
   * 主键
   */
  private BigDecimal tid;

  /**
   * 上级指标id
   */
  private BigDecimal parentId;

  private String code;

  private String name;

  private String remark;

  //setter/getter省略
}
数据库：

原文地址：https://www.cnblogs.com/zhukaixin/p/11721995.html

时间： 2024-08-26 06:32:16

treegrid 表格树的相关文章

ligerUI---ligerGrid中treegrid(表格树)的使用

写在前面: 表格树是在普通ligerGrid的基础上,做了一点改变,使数据以表格树的形式显示出来,适用于有级别的数据比如菜单(有父菜单,父菜单下面有子菜单).表格树的显示有两种方法,可以根据自己的项目来选择. 方法1: 前台页面: funcGrid = $("#funcGrid").ligerGrid({ columns : [ {display: '功能编号', name: 'functionId',hide:'true'} , {id:'functionName',display:

treegrid -表格树异步加载

问题: 机构维护时,前端框架用的是easyui,如果同步全加载会出现页面延迟严重,影响用户体验 解决: 机构逐层加载,点击后加载 逐层加载会出现一个问题:子节点只有点击后才能加载子集 所以开始为叶子节点图标,点击后变成枝节点,不点就误以为到最后一层 目前的解决办法是加载是提供状态属性,默认关闭,加载不到子集时展开状态为叶子节点图标 实现: function initOrgMaintainDetail(versionId){ var tree = $("#orgMaintainDetail&quo

vue 表格树 固定表头

参考网上黄龙的表格树进行完善,并添加固定表头等的功能,目前是在iview的项目中实现,如果想在element中实现的话修改对应的元素标签及相关写法即可. <template> <div ref="table" :style="{width:treeGridWidth}" class='autoTable tree-grid'> <div ref="header" class="tree-grid-heade

spread表格树实现

先上图看下效果图: 玩表格的朋友应该对Component和C1Flexgrid并不陌生吧.其实我也有用C1和DGV扩展了一个表格树,占有内存小,效率也可以,但是UI是硬伤,中规中矩,不美观.我上面是基于spread扩展实现的,站在可扩展的角度,C1不错,spread我可以说完全没有扩展性可言么?小日本写的代码感觉很不规范(反编译看的). 实现思路: 首列是重写BaseCellType基类,重绘了UI,主要是线.自定义图标.节点层级的绘制,主要是用rang确定绘制坐标,整个树层级的维护是基于链表实

表格树控件QtTreePropertyBrowser编译成动态库(设计师插件)

目录 一.回顾 二.动态库编译 1.命令行编译动态库和测试程序 2.vs工具编译动态库和测试程序 3.安装文档 4.测试文档 三.设计师插件编译 1.重写QDesignerCustomWidgetInterface 2.添加到插件列表 3.拷贝生成的dll 4.重启Qt Designer 四.多说一句 五.相关文章 一.回顾 上一篇文章超级实用的表格树控件--QtTreePropertyBrowser讲了怎么去编译QtTreePropertyBrowser库,并且可以简单实用.由于我下载的库是基

ElementUI的表格树（树型结构表格），很简单方式，el-table只需要小小改动几个地方

效果: 在el-table中,支持树类型的数据的显示.当 row 中包含 children 字段时,被视为树形数据.渲染树形数据时,必须要指定 row-key.支持子节点数据异步加载. 设置 Table 的 lazy 属性为 true 与加载函数 load .通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点.children 与 hasChildren 都可以通过 tree-props 配置. default-expand-all属性表示默认展开,不需要展开可以删除.

关于SWT中的表格(TableViewer类)

JFace是SWT的扩展.它提供了一组功能强大的界面组件.其中包含表格,树,列表.对话框,向导对话框等. 表格是一种在软件系统中很常用的数据表现形式.特别是基于数据库的应用系统.表格更是不可缺少的界面组件. SWT的表格组件(Table类)还是不怎么使用的,开发中一般还是使用JFace的表格组件TableViewer. TableViewer是在SWT的Table类的基础上扩展而来的.但是Table类并非TableViewer的父类. 附上两个类的继承关系图:

Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 一.概述 最近在研究QTableView支持多级表头的事情,百度了下网上资料还是挺多的.实现的方式总的来说有2种,效果都还不错,最主要是搞懂其中的原理,做到以不变应万变. 实现多级表头的方式有以下两种方案 行表头和列表头都是用一个表格去模拟 重写QHeadView 以上两种方式都可以实现多级表头,各

分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)

阅读目录 简介 系统特色 系统介绍 - 首页 系统介绍 - 列表页 系统介绍 - 明细页(表单) 系统介绍 - 菜单/按钮 系统介绍 - 权限中心 系统介绍 - 数据权限 系统介绍 - 字段权限 系统介绍 - 下拉框应用细节 结语 简介 ligerRM V2是基于 ligerui的web应用系统.以权限管理作为设计重点,引入Northwind作为主要的数据演示模块.权限方面,在上一个版本的基础上面加多了数据权限控制.后台方面采用dot net 3.5框架开发. 系统演示:http://case.