使用bootstrap-table(二)格式化类型自适应高度

最新推荐文章于 2024-08-17 01:00:00 发布

Kaleldo

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量3.6k

点赞数

分类专栏：前端文章标签：格式化类型自适应高度

本文链接：https://blog.csdn.net/weixin_43647224/article/details/84230191

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>
  </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.11.1/bootstrap-table.min.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!--<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.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 = JSON.parse('[{"menu_id":1,"parent_id":0,"name":"系统管理","icon":"icon","type":0,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":2,"parent_id":0,"name":"字典管理","icon":"icon","type":1,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":20,"parent_id":1,"name":"新增系统","icon":"icon","type":3,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":21,"parent_id":1,"name":"编辑系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":22,"parent_id":1,"name":"删除系统","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"},{"menu_id":33,"parent_id":2,"name":"系统环境","icon":"icon","type":3,"order_num":1,"url":"modules/sys/user.html","perms":"sys:menu:list,sys:menu:info"}]')
  $(function() {
    $table.bootstrapTable({
      data:data, 
     
      dataType:'jsonp',
      columns: [
        {
          field: 'check',
          checkbox: true,
          radio:true
        },
        {
          field:'menu_id',
          title:'菜单ID'
        },
        {
          field: 'name',
          title: '菜单名称'
        },
        {
          field:'icon',
          title:'图标',
          formatter:'iconFormatter'
        },
        {
          field:'type',
          title:'类型',
          formatter:'typeFormatter'
        },
        {
          sortable: true,
          field:'order_num',
          title:'排序号'
        },
        {
          field:'url',
          title:'菜单URL'
        },
        {
          field:'perms',
          title:'授权标识'
        },
      ],
      idField: 'menu_id',//排序id 如不设默认不显示父子级
      treeShowField: 'name',
      parentIdField: 'parent_id',
      singleSelect:true,//单选
       height: $(window).height()/2,//自定义高度
      onResetView: function(data) {
        // jquery.treegrid.js
        $table.treegrid({
           initialState: 'collapsed',//设置开闭
          treeColumn: 1,//指明第几列数据改为树形
          onChange: function() {
            $table.bootstrapTable('resetWidth');
          }
        });
      },
    });
  });
  // 格式化状态
  // function statusFormatter(value, row, index) {
  //   if (value === 1) {
  //     return '<span class="label label-success">正常</span>';
  //   } else {
  //     return '<span class="label label-default">锁定</span>';
  //   }
  // }
  //格式化类型 0：目录   1：菜单   2：按钮'
  function typeFormatter(value,row,index){
    if (value===0) {
      return '<span class="label label-primary">目录</span>';
    }else if(value===1){
      return'<span class="label label-success">菜单</span>';
    }else{
      return'<span class="label label-warning">按钮</span>';
    }
  }
  //格式化图标
  function iconFormatter(value,row,index){
    return '<i class="glyphicon glyphicon-user"></i>';
  }
  
</script>
</html>