使用bootstrap-table(一)

<!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('[{"id":1,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:get"},{"id":2,"pid":0,"status":1,"name":"字典管理","permissionValue":"open:dict:get"},{"id":20,"pid":1,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":21,"pid":1,"status":1,"name":"编辑系统","permissionValue":"open:system:edit"},{"id":22,"pid":1,"status":1,"name":"删除系统","permissionValue":"open:system:delete"},{"id":33,"pid":2,"status":1,"name":"系统环境","permissionValue":"open:env:get"}]')
  $(function() {
    
    console.log(data)
    $table.bootstrapTable({
      data:data, 
      idField: 'id',
      dataType:'jsonp',
      columns: [
        {
          field: 'check',
          checkbox: true,
          formatter: function (value, row, index) {
                        if (row.check == true) {
                            console.log(row.serverName);
                            return {
                                checked: true//设置选中
                            };
                        }
                    }
        },
        {
          field: 'name',
          title: '名称'
        },
        // {field: 'id', title: '编号', sortable: true, align: 'center'},
        // {field: 'pid', title: '所属上级'},
        {
          field: 'status',
          title: '状态',
          sortable: true,
          align: 'center',
          formatter: 'statusFormatter'
        },
        {
          field: 'permissionValue',
          title: '权限值'
        }
      ],
      // bootstrap-table-tree-column.js 插件配置
      // treeShowField: 'name',
      // parentIdField: 'pid'
      // bootstrap-table-tree-column.js 插件配置
      // bootstrap-table-treegrid.js 插件配置
      treeShowField: 'name',
      parentIdField: 'pid',
      singleSelect:true,//单选
      height:150,
      onResetView: function(data) {
        console.log('load');
        // jquery.treegrid.js
        $table.treegrid({
          // initialState: 'collapsed',
          treeColumn: 1,
          // expanderExpandedClass: 'glyphicon glyphicon-minus',
          // expanderCollapsedClass: 'glyphicon glyphicon-plus',
          onChange: function() {
            $table.bootstrapTable('resetWidth');
          }
        });
 
 
      },
      onCheck:function(row){
        var datas = $table.bootstrapTable('getData');
        // 勾选子类
       //  selectChilds(datas,row,"id","pid",true);
        
        // 勾选父类
        // selectParentChecked(datas,row,"id","pid")
 
        // 刷新数据
        $table.bootstrapTable('load', datas);
      },
 
      onUncheck:function(row){
        var datas = $table.bootstrapTable('getData');
        selectChilds(datas,row,"id","pid",false);
        $table.bootstrapTable('load', datas);
      },
      // bootstrap-table-treetreegrid.js 插件配置
    });
  });
  // 格式化类型
  function typeFormatter(value, row, index) {
    if (value === 'menu') {
      return '菜单';
    }
    if (value === 'button') {
      return '按钮';
    }
    if (value === 'api') {
      return '接口';
    }
    return '-';
  }
  // 格式化状态
  function statusFormatter(value, row, index) {
    if (value === 1) {
      return '<span class="label label-success">正常</span>';
    } else {
      return '<span class="label label-default">锁定</span>';
    }
  }
</script>
<script>
        /**
         * 选中父项时，同时选中子项
         * @param datas 所有的数据
         * @param row 当前数据
         * @param id id 字段名
         * @param pid 父id字段名
         */
        function selectChilds(datas,row,id,pid,checked) {
          console.log(row)
            for(var i in datas){
                if(datas[i][pid] == row[id]){
                    datas[i].check=checked;
                    selectChilds(datas,datas[i],id,pid,checked);
                };
            }
        }
 
        function selectParentChecked(datas,row,id,pid){
             for(var i in datas){
                if(datas[i][id] == row[pid]){
                    datas[i].check=true;
                    selectParentChecked(datas,datas[i],id,pid);
                };
            } 
        }
    </script>
 
</html>
使用bootstrap-table(一)

猜你喜欢
