Bootstrap-table實現動態合併相同行

時間 2019-11-20

標籤 bootstrap table 實現動態合併相同欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap-table 表格合併相同名字的列javascript

@編寫function()css

/**
   * 合併行
   * @param data  原始數據（在服務端完成排序）
   * @param fieldName 合併屬性名稱數組
   * @param colspan 列數
   * @param target 目標表格對象
   */
  function mergeCells(data, fieldName, colspan, target) {
    if (data.length == 0) {
      alert("不能傳入空數據");
      return;
    }
    var numArr = [];
    var value = data[0][fieldName];
    var num = 0;
    for (var i = 0; i < data.length; i++) {
      if (value != data[i][fieldName]) {
        numArr.push(num);
        value = data[i][fieldName];
        num = 1;
        continue;
      }
      num++;
    }
    var merIndex = 0;
    for (var i = 0; i < numArr.length; i++) {
      $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })
      merIndex += numArr[i];
    }
  }

完整代碼：html/jshtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link th:href="@{/common/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap/css/bootstrap-combined.min.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap/css/layoutit.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap-table/bootstrap-table.css}" rel="stylesheet"/>
<style>
  .main{
    background: #999999;

  }
  body{margin：0；padding：0；}
</style>
</head>
<body >
<div class="main">
<div style="text-align: center"><h2>table</h2></div>

<table id="example" border="1">
</table>
</div>
<!-- 全局js -->
<script th:src="@{/common/jquery/jquery.min.js}"></script>
<script th:src="@{/common/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/common/bootstrap-table/bootstrap-table.js}"></script>
<script th:src="@{/common/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript">
  init();
  function init(){

    $('#example').bootstrapTable({
      url: '/init/table',
      method: 'get',
      striped: true,
      toolbar: "#toolbar",
      sidePagination: "true",
      striped: true, // 是否顯示行間隔色
      //search : "true",
      uniqueId: "ID",
      pageSize: "25",
      pagination: true, // 是否分頁
      sortable: true, // 是否啓用排序
      search:true,
      showColumns: true,
      showRefresh: true,
      onLoadSuccess: function (data) {
      //  mergeColspan(data,"name" , $('#example'));//列合併
        mergeCells(data, "name", 1, $('#example'));//行合併

      },
      columns: [
        [
          {
            "title": "指 標",
            "halign":"center",
            "align":"center",
            "colspan": 2
          },
          {
            "title": "姓 名",
            "halign":"center",
            "align":"center"
          },
          {
            "title": "別 名",
            "halign":"center",
            "align":"center"

          }
        ],
        [
          {
            field: 'name',
            title: '姓 名'
          },
          {
            field: 'id',
            title: 'id'
          },
        {
          field: 'firstName',
          title: '姓名'
        },
        {
          field: 'lastName',
          title: '別名'
        }
        ]
      ]
    });
    //操做欄的格式化
    function actionFormatter(value, row, index) {
      var id = value;
      var result = "";
      result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
      result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";
      result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>";
      return result;
    }


  }

  /**
   * 合併行
   * @param data  原始數據（在服務端完成排序）
   * @param fieldName 合併屬性名稱數組
   * @param colspan 列數
   * @param target 目標表格對象
   */
  function mergeCells(data, fieldName, colspan, target) {
    if (data.length == 0) {
      alert("不能傳入空數據");
      return;
    }
    var numArr = [];
    var value = data[0][fieldName];
    var num = 0;
    for (var i = 0; i < data.length; i++) {
      if (value != data[i][fieldName]) {
        numArr.push(num);
        value = data[i][fieldName];
        num = 1;
        continue;
      }
      num++;
    }
    var merIndex = 0;
    for (var i = 0; i < numArr.length; i++) {
      $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })
      merIndex += numArr[i];
    }
  }

/*

  /!**
   * 合併列
   * @param data  原始數據（在服務端完成排序）
   * @param fieldName 合併屬性數組
   * @param target    目標表格對象
   *!/
  function mergeColspan(data, fieldNameArr, target) {
    if (data.length == 0) {
      alert("不能傳入空數據");
      return;
    }
    if (fieldNameArr.length == 0) {
      alert("請傳入屬性值");
      return;
    }
    var num = -1;
    var index = 0;
    for (var i = 0; i < data.length; i++) {
      num++;
      for (var v in fieldNameArr) {
        index = 1;
        if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) {
          index = 0;
          break;
        }
      }
      if (index == 0) {
        continue;
      }
      $(target).bootstrapTable('mergeCells', { index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1 });
    }
  }
*/


</script>
</body>
</html>

！！！！！！！！！！！！上面的這個合併行的方法有點問題：下面這個方法是能夠的！！！！！！！！！java

/*
合併行
 @param data  原始數據（在服務端完成排序）
 @param fieldName 合併屬性名稱數組
 @param colspan 列數
 @param target 目標表格對象
*/
function mergeCells(data, fieldName, colspan, target) {
  if (data.length == 0) {
    alert("不能傳入空數據");
    return;
  }
  var numArr = [];
  var value = data[0][fieldName];
  var num = 0;
  for (var i = 0; i < data.length; i++) {
    if (value != data[i][fieldName]) {
      numArr.push(num);
      value = data[i][fieldName];
      num = 1;
      continue;
    }
    num++;
  }
  if (typeof (value) != "undefined" && value != "") {
    numArr.push(num);
  }
  var merIndex = 0;
  for (var i = 0; i < numArr.length; i++) {
    $(target).bootstrapTable('mergeCells',
        {
          index: merIndex,
          field: fieldName,
          colspan: colspan,
          rowspan: numArr[i]
        })
    merIndex += numArr[i];
  }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。