bootstrap-table 列拖動

1.頁面js/css

 <!-- bootstrap 插件樣式 -->
  <link th:href="@{/common/bootstrap-3.3.6/css/bootstrap.min.css}" rel="stylesheet"/>
  <link th:href="@{/common/bootstrap-3.3.6/css/bootstrap-theme.min.css}" rel="stylesheet"/>
  <!-- bootstrap-table 表格插件樣式 -->
  <link th:href="@{/common/bootstrap-table-1.12.2/bootstrap-table.min.css}" rel="stylesheet"/>
<!-- bootstarp table 行拖動-->
  <link th:href="@{/common/bootstrap-table-1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.css}" rel="stylesheet"/>

 <!-- bootstrap 插件 -->
  <script th:src="@{/common/bootstrap-3.3.6/js/bootstrap.min.js}"></script>
  <!-- bootstrap-table 表格插件 -->
  <script th:src="@{/common/bootstrap-table-1.12.2/bootstrap-table.min.js}"></script>
  <script th:src="@{/common/bootstrap-table-1.12.2/locale/bootstrap-table-zh-CN.min.js}"></script>
<!-- bootstarp table 行拖動-->
<script th:src="@{/common/TableDnD-1.0.3/dist/jquery.tablednd.1.0.3.min.js}"></script>
  <script th:src="@{/common/bootstrap-table-1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.js}"></script>

2.頁面定義table

<div class="container-div ui-layout-center">
  <div class="col-sm-12 search-collapse" style="margin-top: 20px">
    <table id="table_sortShowNorm" data-mobile-responsive="true"></table>
  </div>
</div>

3.自定義js

$(function () {
  initTable();
});

/* 初始table */
function initTable() {
  // 初始化Table
  var oTable = new tableInit();
  oTable.init();
}

/* bootstrapTable組件初始化方法 */
var tableInit = function () {
  var Obj = CommonJS.getUrlParamObject();
  $("#input_reportFormId").val(Obj["reportFormId"]);
  // $("#input_reportFormName").val(Obj["reportFormName"]);
  var tableVal = {};
  // 初始化表單數據
  tableVal.init = function () {
    var obj = CommonJS.getUrlParamObject();
    var tid = obj.tid;
    $('#table_sortShowNorm').bootstrapTable({
      url: ctx + "report/issueReport/customColumnsConf", // 請求后台的URL（*）
      undefinedText: '',// 當數據為undefined時顯示的字符，默認是'-'
      toolbar: 'false', // 工具按鈕用哪個容器
      toolbarAlign: 'false', // 工具按鈕的位置
      striped: false, // 是否顯示行間隔色
      queryParams: {reportFormId: $("#input_reportFormId").val()}, // 傳遞參數（*）
      pagination: false,//是否分頁
      uniqueId: "tid", // 每一行的唯一標識，一般為主鍵列
      field: 'checked',
      checkbox: true,
      formatter: stateFormatter,
      showColumns: false,// 是否顯示列的按鈕
      reorderableRows: true, //設置拖動排序
      useRowAttrFunc: true, //設置拖動排序
      columns: [{
        field: 'checked',
        checkbox: true,
        formatter: stateFormatter
      }, {
        title: '序號',
        formatter: function (value, row, index) {
          return index + 1;
        },
        align: 'center'
      }, {
        field: 'name',
        title: '名稱',
        align: 'center',
        cellStyle: {
          css: {
            "text-align": "center !important"
          }
        }
      }],
        
      responseHandler: function (res) {
        if (res.success) {
          $('#input_cacheId').val(res.data.tid);
          $('#input_modifyTime').val(res.data.modifyTime);
          var data = res.data.treeDto;
          return data;
        } else {
          CommonJS.modal.alertError(res.message);
        }
        return res;
      }
    });

    //判斷是否是選中的
    function stateFormatter(value, row, index) {
      if (row.checked == "true") {
        return {
          disabled: false,//設置是否可用
          checked: true//設置選中
        };
      }
      return value;
    }
  };
  return tableVal;
};

4.點擊保存傳遞的id

  
  $("#a_custom").on("click", function () {
    var name = $("#input_reportFormName").val().split("---")[0];
    var index1 = layer.open({
      type: 2, // 2|iframe層
      title: '【' + name + '】  可顯示列',
      area: ["580px", "500px"],
      //maxmin: true, // 最大化，最小化
      content: encodeURI(ctx + "report/issueReport/customColumnsView?reportFormId=" + $("#input_reportFormId").val()),
      btn: ['保存', '取消'],
      yes: function (index, layero) {
        var iframe = layero.find('iframe')[0].contentWindow;//獲取彈框頁
        reportFormId = iframe.$('#input_reportFormId').val();
        tid = iframe.$('#input_cacheId').val();
        modifyTime = iframe.$('#input_modifyTime').val();
        var ids = "";
        var allReportxIds = "";
        //獲取選中的id
        var rows = iframe.$("#table_sortShowNorm").bootstrapTable('getSelections');
       //獲取所有的id
        var rowsAll = iframe.$("#table_sortShowNorm").bootstrapTable('getData');
        for (var i = 0; i < rows.length; i++) {
          ids += rows[i]['id'] + ",";
        }
        ids = ids.substring(0, ids.length - 1);
        for (var i = 0; i < rowsAll.length; i++) {
          allReportxIds += rowsAll[i]['id'] + ",";
        }
        allReportxIds = allReportxIds.substring(0, allReportxIds.length - 1);
        $.ajax({
          type: "post",//方法類型
          dataType: "json",//預期服務器返回的數據類型
          url: encodeURI(ctx + "report/issueReport/doEditCustomColumnsConf"),//url
          data: {reportFormId: reportFormId, tid: tid, modifyTime: modifyTime, allReportxIds: allReportxIds, showReportxIds: ids},
          success: function (result) {
            //按鈕【按鈕一】的回調
            if (result.success) {
              resetScheduleLists();
              //layer.alert("操作成功");
              layer.close(index);
            } else {
              CommonJS.modal.alertError(result.message);
            }
          }
        });
      },
      cancel: function (index, layero) {
        layer.close(index);
      }
    });
  });

5.后台接受傳遞的參數

public class R implements Serializable {

  private static final long serialVersionUID = 1L;

  /**
   * 主鍵
   */
  private BigDecimal tid;

  /**
   * 表格所有id
   */
  private String allReportxIds;


  private String showReportxIds;

  /**
   * 選中的
   */
  private BigDecimal reportFormId;

}

 

6.后台傳前台的數據封裝成List

 

注意問題：

列拖動需要設置的一些屬性和方法：

field: 'checked',//選中字段
      checkbox: true,//復選
      formatter: stateFormatter,
      reorderableRows: true, //設置拖動排序
      useRowAttrFunc: true, //設置拖動排序

columns: [{
  field: 'checked',
  checkbox: true,
  formatter: stateFormatter
}]

//判斷是否是選中的
function stateFormatter(value, row, index) {
  if (row.checked == "true") {
    return {
      disabled: false,//設置是否可用
      checked: true//設置選中
    };
  }
  return value;
}