首页
前端开发

分类

当前位置: 云海天教程网 > 技术新闻 > 前端开发 >正文

Bootstrap使用父子表

更新时间:2021-07-20  作者:佚名   来源: 网络转载

Bootstrap使用父子表

 Bootstrap使用父子表:

 

css(可忽略):

table, td, th {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: left;
font-size: 12px;
border-color: #f2ecec !important;
}

#table thead th {//父表表頭
font-size: 14px;
font-weight: bold;
line-height: 19px;
padding: 0 8px 2px;
text-align: center;
background: #375A7F !important;
color: white;
}
 #child_table thead th {//子表表頭
      font-size: 14px;
      font-weight: bold;
      line-height: 19px;
      padding: 0 8px 2px;
      text-align: center;
      background: #375A7F !important;
      color: white;
    }

  

  

html:

white-space:nowrap;所有文本顯示在這一行
text-overflow:ellipsis;多餘文本省略號顯示
<div id="page-content-wrapper">

  <table id="tableList"  style="white-space:nowrap;text-overflow:ellipsis"></table>

</div>

  

JS:$("#table").bootstrapTable({

  data: [],//Data
  striped: true, //是否显示行间隔色
  cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  sortable: true, //是否启用排序
  sortOrder: "asc", //排序方式
  pagination: true, //是否显示分页(*)
  sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
  pageNumber: 1, //初始化加载第一页,默认第一页
  pageSize: 10, //每页的记录行数(*)
  pageList: [10, 20, 50], //可供选择的每页的行数(*)
  showColumns: true, //是否显示 内容列下拉框
  showRefresh: true, //是否显示刷新按钮
  minimumCountColumns: 2, //最少允许的列数
  clickToSelect: true, //是否启用点击选中行
  singleSelect: true, //单选checkbox
  showToggle: false, //是否显示详细视图和列表视图的切换按钮
  cardView: false, //是否显示详细视图
  detailView: true, //是否显示父子表
  search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,
  strictSearch: false, //设置为 true启用 全匹配搜索,否则为模糊搜索
  searchOnEnterKey: true, //回车搜索
  searchTimeOut: 500, //设置搜索超时时间
  trimOnSearch: true, //设置为 true 将允许空字符搜索
  searchAlign: "right", //查询框对齐方式
  toolbar: "#tableToolbar", //指定工具栏
  showExport: true, //是否显示导出按钮
  Icons: "glyphicon-export",//這一行是幹嘛來著
  exportOptions: {
  ignoreColumn: [0], //忽略某一列的索引
  fileName: "name list", //文件名称设置
  worksheetName: "sheet1", //表格工作区名称
  },
  locale: tableLocale,
  columns: [
    {
      checkbox: true
    }, {
      field: "ID",
      title: "<label set-lan="html:">ID</label>",//不能加 rowspan: 1, JSON倒出錯誤
      align: "center",
      valign: "middle",
      sortable: true, //是否排序
      visible: false, //是否顯示
    },{
      field: "filed",
      title: "<label set-lan="html:">filed</label>",//不能加 rowspan: 1, JSON倒出錯誤
      align: "center",
      valign: "middle",
      sortable: true, //是否排序
      visible: false, //是否顯示
    },
  ],   
  onExpandRow: function (index, row, $detail) {         
    ShowChildTable(row.ID, $detail);//子表顯示的是重新查詢到的數據.

    //ShowChildTable(tableView, [row]);子表顯示的是父表數據的一部分.
  } });

//顯示子表(目前是顯示父表的部分內容,也可通過變更data傳入其他內容)
    //顯示子表
    function SearchChildTable(id, tableView) {
     
      if (data != "") {     
        var Data = {ID:id};
        var strData = JSON.stringify(Data);       
        $.ajax({
          type: "POST",
          async: true,        
          url: url,
          contentType: "application/json;charset="utf-8" ",
          data: strData,
          success: function (e) {           
            if (e.Status == "0") {
              if (e.Data.length > 0) {
                ShowChildTable(tableView,e.Data);
              }
              else {                
                ShowChildTable(tableView, []);
              }
            }
          },
          statusCode: {
            403: function (response) {
              swal({
                title: "",
                text: e.Message,
                type: "warning",
                timer: 2000,
                showConfirmButton: false
              });
            }
          }
        });
      }

      
    }
    function ShowChildTable(tableView, data) {
      var child_table = tableView.html("<table id="child_table" ></table>").find("table");
      $(child_table).bootstrapTable({
        data: data,
        striped: false,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存,默认为true
        pagination: false,                   //是否显示分页(*)
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "client",
        pageNumber: 1,                       //初始化加载第一页,默认第一页
        pageSize: 10,                       //每页的记录行数(*)
        pageList: [5, 10, 50],        //可供选择的每页的行数(*)
        search: false,
        strictSearch: false,
        searchOnEnterKey: true,            //回车搜索
        showColumns: false,
        showRefresh: false,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        singleSelect: false,
        showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,
        dataType: "json",//期待返回数据类型
        buttonsAlign: "left",//按钮对齐方式
        toolbarAlign: "left",//工具栏对齐方式        
        columns: [
          {
            field: "filed",
            title: "<label>name</label>",
            align: "center",
            valign: "middle",
          }
        ]
      });
    }

  

子表有沒有其他顯示方法或者形式?

上一篇:如何搭建一个简易的 Web Terminal(一) 下一篇:kingbaseES R6集群创建流复制只读副本库案例
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

陕ICP备14013131号-3