首页 > 其他 > 详细

treegrid 表格树

时间:2019-10-22 20:06:24      阅读:82      评论:0      收藏:0      [点我收藏+]

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省略  
}

数据库:

技术分享图片

 

treegrid 表格树

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!