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;
}