javascript - 在 Bootstrap 中使表格列可拖动(排序)

Question

我在 Bootstrap 中设计了一个表和一个列名列表。我希望当我拖动列表或表格列中的任何列名称时，它会同时拖动两者。(表格列和列表李)

检查此链接表列是否可拖动。当您拖动表格列时，它会运行。

转到鼠标表列名称并拖动。

$(document).ready(function() {

  $('.table').dragtable();
  $('.list').dragtable();
});


(function($) {
  $.widget("akottr.dragtable", {
    options: {
      revert: false, // smooth revert
      dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
      maxMovingRows: 40, // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport
      excludeFooter: false, // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
      onlyHeaderThreshold: 100, // TODO:  not implemented yet, switch automatically between entire col moving / only header moving
      dragaccept: null, // draggable cols -> default all
      persistState: null, // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable)
      restoreState: null, // JSON-Object or function:  some kind of experimental aka Quick-Hack TODO: do it better
      exact: true, // removes pixels, so that the overlay table width fits exactly the original table width
      clickDelay: 10, // ms to wait before rendering sortable list and delegating click event
      containment: null, // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
      cursor: 'move', // @see http://api.jqueryui.com/sortable/#option-cursor
      cursorAt: false, // @see http://api.jqueryui.com/sortable/#option-cursorAt
      distance: 0, // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
      tolerance: 'pointer', // @see http://api.jqueryui.com/sortable/#option-tolerance
      axis: 'x', // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
      beforeStart: $.noop, // returning FALSE will stop the execution chain.
      beforeMoving: $.noop,
      beforeReorganize: $.noop,
      beforeStop: $.noop
    },
    originalTable: {
      el: null,
      selectedHandle: null,
      sortOrder: null,
      startIndex: 0,
      endIndex: 0
    },
    sortableTable: {
      el: $(),
      selectedHandle: $(),
      movingRow: $()
    },
    persistState: function() {
      var _this = this;
      this.originalTable.el.find('th').each(function(i) {
        if (this.id !== '') {
          _this.originalTable.sortOrder[this.id] = i;
        }
      });
      $.ajax({
        url: this.options.persistState,
        data: this.originalTable.sortOrder
      });
    },
    /*
     * persistObj looks like
     * {'id1':'2','id3':'3','id2':'1'}
     * table looks like
     * |   id2  |   id1   |   id3   |
     */
    _restoreState: function(persistObj) {
      for (var n in persistObj) {
        this.originalTable.startIndex = $('#' + n).closest('th').prevAll().size() + 1;
        this.originalTable.endIndex = parseInt(persistObj[n] + 1, 10);
        this._bubbleCols();
      }
    },
    // bubble the moved col left or right
    _bubbleCols: function() {
      var i, j, col1, col2;
      var from = this.originalTable.startIndex;
      var to = this.originalTable.endIndex;
      /* Find children thead and tbody.
       * Only to process the immediate tr-children. Bugfix for inner tables
       */
      var thtb = this.originalTable.el.children();
      if (this.options.excludeFooter) {
        thtb = thtb.not('tfoot');
      }
      if (from < to) {
        for (i = from; i < to; i++) {
          col1 = thtb.find('> tr > td:nth-child(' + i + ')')
            .add(thtb.find('> tr > th:nth-child(' + i + ')'));
          col2 = thtb.find('> tr > td:nth-child(' + (i + 1) + ')')
            .add(thtb.find('> tr > th:nth-child(' + (i + 1) + ')'));
          for (j = 0; j < col1.length; j++) {
            swapNodes(col1[j], col2[j]);
          }
        }
      } else {
        for (i = from; i > to; i--) {
          col1 = thtb.find('> tr > td:nth-child(' + i + ')')
            .add(thtb.find('> tr > th:nth-child(' + i + ')'));
          col2 = thtb.find('> tr > td:nth-child(' + (i - 1) + ')')
            .add(thtb.find('> tr > th:nth-child(' + (i - 1) + ')'));
          for (j = 0; j < col1.length; j++) {
            swapNodes(col1[j], col2[j]);
          }
        }
      }
    },
    _rearrangeTableBackroundProcessing: function() {
      var _this = this;
      return function() {
        _this._bubbleCols();
        _this.options.beforeStop(this.originalTable);
        _this.sortableTable.el.remove();
        restoreTextSelection();
        // persist state if necessary
        if (_this.options.persistState !== null) {
          $.isFunction(_this.options.persistState) ? _this.options.persistState(_this.originalTable) : _this.persistState();
        }
      };
    },
    _rearrangeTable: function() {
      var _this = this;
      return function() {
        // remove handler-class -> handler is now finished
        _this.originalTable.selectedHandle.removeClass('dragtable-handle-selected');
        // add disabled class -> reorgorganisation starts soon
        _this.sortableTable.el.sortable("disable");
        _this.sortableTable.el.addClass('dragtable-disabled');
        _this.options.beforeReorganize(_this.originalTable, _this.sortableTable);
        // do reorganisation asynchronous
        // for chrome a little bit more than 1 ms because we want to force a rerender
        _this.originalTable.endIndex = _this.sortableTable.movingRow.prevAll().size() + 1;
        setTimeout(_this._rearrangeTableBackroundProcessing(), 50);
      };
    },
    /*
     * Disrupts the table. The original table stays the same.
     * But on a layer above the original table we are constructing a list (ul > li)
     * each li with a separate table representig a single col of the original table.
     */
    _generateSortable: function(e) {
      !e.cancelBubble && (e.cancelBubble = true);
      var _this = this;
      // table attributes
      var attrs = this.originalTable.el[0].attributes;
      var attrsString = '';
      for (var i = 0; i < attrs.length; i++) {
        if (attrs[i].nodeValue && attrs[i].nodeName != 'id' && attrs[i].nodeName != 'width') {
          attrsString += attrs[i].nodeName + '="' + attrs[i].nodeValue + '" ';
        }
      }

      // row attributes
      var rowAttrsArr = [];
      //compute height, special handling for ie needed :-(
      var heightArr = [];
      this.originalTable.el.find('tr').slice(0, this.options.maxMovingRows).each(function(i, v) {
        // row attributes
        var attrs = this.attributes;
        var attrsString = "";
        for (var j = 0; j < attrs.length; j++) {
          if (attrs[j].nodeValue && attrs[j].nodeName != 'id') {
            attrsString += " " + attrs[j].nodeName + '="' + attrs[j].nodeValue + '"';
          }
        }
        rowAttrsArr.push(attrsString);
        heightArr.push($(this).height());
      });

      // compute width, no special handling for ie needed :-)
      var widthArr = [];
      // compute total width, needed for not wrapping around after the screen ends (floating)
      var totalWidth = 0;
      /* Find children thead and tbody.
       * Only to process the immediate tr-children. Bugfix for inner tables
       */
      var thtb = _this.originalTable.el.children();
      if (this.options.excludeFooter) {
        thtb = thtb.not('tfoot');
      }
      thtb.find('> tr > th').each(function(i, v) {
        var w = $(this).outerWidth();
        widthArr.push(w);
        totalWidth += w;
      });
      if (_this.options.exact) {
        var difference = totalWidth - _this.originalTable.el.outerWidth();
        widthArr[0] -= difference;
      }
      // one extra px on right and left side
      totalWidth += 2

      var sortableHtml = '<ul class="dragtable-sortable" style="position:absolute; width:' + totalWidth + 'px;">';
      // assemble the needed html
      thtb.find('> tr > th').each(function(i, v) {
        sortableHtml += '<li>';
        sortableHtml += '<table ' + attrsString + '>';
        var row = thtb.find('> tr > th:nth-child(' + (i + 1) + ')');
        if (_this.options.maxMovingRows > 1) {
          row = row.add(thtb.find('> tr > td:nth-child(' + (i + 1) + ')').slice(0, _this.options.maxMovingRows - 1));
        }
        row.each(function(j) {
          // TODO: May cause duplicate style-Attribute
          var row_content = $(this).clone().wrap('<div></div>').parent().html();
          if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "<thead>";
          sortableHtml += '<tr ' + rowAttrsArr[j] + '" style="height:' + heightArr[j] + 'px;">';
          sortableHtml += row_content;
          if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "</thead>";
          sortableHtml += '</tr>';
        });
        sortableHtml += '</table>';
        sortableHtml += '</li>';
      });
      sortableHtml += '</ul>';
      this.sortableTable.el = this.originalTable.el.before(sortableHtml).prev();
      // set width if necessary
      this.sortableTable.el.find('> li > table').each(function(i, v) {
        $(this).css('width', widthArr[i] + 'px');
      });

      // assign this.sortableTable.selectedHandle
      this.sortableTable.selectedHandle = this.sortableTable.el.find('th .dragtable-handle-selected');

      var items = !this.options.dragaccept ? 'li' : 'li:has(' + this.options.dragaccept + ')';
      this.sortableTable.el.sortable({
        items: items,
        stop: this._rearrangeTable(),
        // pass thru options for sortable widget
        revert: this.options.revert,
        tolerance: this.options.tolerance,
        containment: this.options.containment,
        cursor: this.options.cursor,
        cursorAt: this.options.cursorAt,
        distance: this.options.distance,
        axis: this.options.axis
      });

      // assign start index
      this.originalTable.startIndex = $(e.target).closest('th').prevAll().size() + 1;

      this.options.beforeMoving(this.originalTable, this.sortableTable);
      // Start moving by delegating the original event to the new sortable table
      this.sortableTable.movingRow = this.sortableTable.el.find('> li:nth-child(' + this.originalTable.startIndex + ')');

      // prevent the user from drag selecting "highlighting" surrounding page elements
      disableTextSelection();
      // clone the initial event and trigger the sort with it
      this.sortableTable.movingRow.trigger($.extend($.Event(e.type), {
        which: 1,
        clientX: e.clientX,
        clientY: e.clientY,
        pageX: e.pageX,
        pageY: e.pageY,
        screenX: e.screenX,
        screenY: e.screenY
      }));

      // Some inner divs to deliver the posibillity to style the placeholder more sophisticated
      var placeholder = this.sortableTable.el.find('.ui-sortable-placeholder');
      if (!placeholder.height() <= 0) {
        placeholder.css('height', this.sortableTable.el.find('.ui-sortable-helper').height());
      }

      placeholder.html('<div class="outer" style="height:100%;"><div class="inner" style="height:100%;"></div></div>');
    },
    bindTo: {},
    _create: function() {
      this.originalTable = {
        el: this.element,
        selectedHandle: $(),
        sortOrder: {},
        startIndex: 0,
        endIndex: 0
      };
      // bind draggable to 'th' by default
      this.bindTo = this.originalTable.el.find('th');
      // filter only the cols that are accepted
      if (this.options.dragaccept) {
        this.bindTo = this.bindTo.filter(this.options.dragaccept);
      }
      // bind draggable to handle if exists
      if (this.bindTo.find(this.options.dragHandle).size() > 0) {
        this.bindTo = this.bindTo.find(this.options.dragHandle);
      }
      // restore state if necessary
      if (this.options.restoreState !== null) {
        $.isFunction(this.options.restoreState) ? this.options.restoreState(this.originalTable) : this._restoreState(this.options.restoreState);
      }
      var _this = this;
      this.bindTo.mousedown(function(evt) {
        if (_this.options.beforeStart(this.originalTable) === false) {
          return;
        }
        clearTimeout(this.downTimer);
        this.downTimer = setTimeout(function() {
          _this.originalTable.selectedHandle = $(this);
          _this.originalTable.selectedHandle.addClass('dragtable-handle-selected');
          _this._generateSortable(evt);
        }, _this.options.clickDelay);
      }).mouseup(function(evt) {
        clearTimeout(this.downTimer);
      });
    },
    redraw: function() {
      this.destroy();
      this._create();
    },
    destroy: function() {
      this.bindTo.unbind('mousedown');
      $.Widget.prototype.destroy.apply(this, arguments); // default destroy
      // now do other stuff particular to this widget
    }
  });

  /** closure-scoped "private" functions **/

  var body_onselectstart_save = $(document.body).attr('onselectstart'),
    body_unselectable_save = $(document.body).attr('unselectable');

  // css properties to disable user-select on the body tag by appending a <style> tag to the <head>
  // remove any current document selections

  function disableTextSelection() {
    // jQuery doesn't support the element.text attribute in MSIE 8
    // http://stackoverflow.com/questions/2692770/style-style-textcss-appendtohead-does-not-work-in-ie
    var $style = $('<style id="__dragtable_disable_text_selection__" type="text/css">body { -ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none; }</style>');
    $(document.head).append($style);
    $(document.body).attr('onselectstart', 'return false;').attr('unselectable', 'on');
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
    } else {
      document.selection.empty(); // MSIE http://msdn.microsoft.com/en-us/library/ms535869%28v=VS.85%29.aspx
    }
  }

  // remove the <style> tag, and restore the original <body> onselectstart attribute

  function restoreTextSelection() {
    $('#__dragtable_disable_text_selection__').remove();
    if (body_onselectstart_save) {
      $(document.body).attr('onselectstart', body_onselectstart_save);
    } else {
      $(document.body).removeAttr('onselectstart');
    }
    if (body_unselectable_save) {
      $(document.body).attr('unselectable', body_unselectable_save);
    } else {
      $(document.body).removeAttr('unselectable');
    }
  }

  function swapNodes(a, b) {
    var aparent = a.parentNode;
    var asibling = a.nextSibling === b ? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
  }
})(jQuery);

    .dragtable-sortable {

      list-style-type: none;

      margin: 0;

      padding: 0;

      -moz-user-select: none;

    }

    .dragtable-sortable li {

      margin: 0;

      padding: 0;

      float: left;

      font-size: 1em;

      background: white;

    }

    .dragtable-sortable th,

    .dragtable-sortable td {

      border-left: 0px;

    }

    .dragtable-sortable li:first-child th,

    .dragtable-sortable li:first-child td {

      border-left: 1px solid #CCC;

    }

    .ui-sortable-helper {

      opacity: 0.7;

      filter: alpha(opacity=70);

    }

    .ui-sortable-placeholder {

      -moz-box-shadow: 4px 5px 4px #C6C6C6 inset;

      -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;

      box-shadow: 4px 5px 4px #C6C6C6 inset;

      border-bottom: 1px solid #CCCCCC;

      border-top: 1px solid #CCCCCC;

      visibility: visible !important;

      background: #EFEFEF !important;

      visibility: visible !important;

    }

    .ui-sortable-placeholder * {

      opacity: 0.0;

      visibility: hidden;

    }

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" type="text/css" href="dragtable.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://github.com/akottr/dragtable/blob/master/jquery.dragtable.js"></script>
  <title>jquery.dragtable.js</title>
</head>

<body>
  <ul class="list">

    <li>FUNCTIONAL GROUP</li>
    <li>CALLS IN QUEUE</li>
    <li>LONG CALL WAITING</li>
    <li>SERVICE LEVEL</li>
    <li>AGENTS STAFFED</li>
    <li>Forecasted staff</li>
    <li>Longest Agent Available</li>
    <li>AGENTS AVAL</li>
    <li>AGENTS ON CALL</li>
    <li>Cumulative CALLS OFFERED</li>
    <li>Cumulative CALLS HANDLED</li>
    <li>Cumulative SERVICE LEVEL</li>
    <li>Cumulative CALLS ABND %</li>

  </ul>
  <table class="table dataTable tree" id="table-first" data-role="table" data-mode="columntoggle">
    <colgroup>
      <col id="col0">
        <col id="col1">
          <col id="col2">
            <col id="col3">
              <col id="col4">
                <col id="col5">
                  <col id="col6">
                    <col id="col7">
                      <col id="col8">
                        <col id="col9">
                          <col id="col10">
                            <col id="col11">
                              <col id="col12">
                                <col id="col13">
                                  <col id="col14">
    </colgroup>
    <thead>
      <tr>
        <th width="18%">FUNCTIONAL GROUP</th>
        <th width="5%">CALLS IN QUEUE</th>
        <th width="7%">LONG CALL WAITING</th>
        <th width="6%">SERVICE LEVEL</th>
        <th width="6%">AGENTS STAFFED</th>
        <th width="7%">Forecasted staff</th>
        <th width="8%">Longest Agent Available</th>
        <th width="5%">AGENTS AVAL</th>
        <th width="6%">AGENTS ON CALL</th>
        <th width="8%">Cumulative CALLS OFFERED</th>
        <th width="8%">Cumulative CALLS HANDLED</th>
        <th width="8%">Cumulative SERVICE LEVEL</th>
        <th width="8%">Cumulative CALLS ABND %</th>
      </tr>
    </thead>
    <tbody>
      <!--START BILLING TABLE SECTION-->
      <tr class="treegrid-1 drill-parent">
        <td>BILLING</td>
        <td>7</td>
        <td>:57:12</td>
        <td>&nbsp;</td>
        <td>100</td>
        <td>120</td>
        <td>0:00:27</td>
        <td>50</td>
        <td>50</td>
        <td>984</td>
        <td>835</td>
        <td>86.79%</td>
        <td>15.14%</td>
      </tr>
      <tr class="treegrid-2 treegrid-parent-1">
        <td>BILLING-COX</td>
        <td>2</td>
        <td>:50:10</td>
        <td>80.50%</td>
        <td>50</td>
        <td>55</td>
        <td>0:00:27</td>
        <td>20</td>
        <td>20</td>
        <td>60</td>
        <td>230</td>
        <td>79.23%</td>
        <td>2.80%</td>
      </tr>
      <tr class="treegrid-3 treegrid-parent-2">
        <td>Payment</td>
        <td>2</td>
        <td>:50</td>
        <td>90.00%</td>
        <td>10</td>
        <td>12</td>
        <td>0:00:27</td>
        <td>6</td>
        <td>6</td>
        <td>60</td>
        <td>230</td>
        <td>54</td>
        <td>1.00%</td>
      </tr>

      <tr class="treegrid-66 treegrid-parent-62">
        <td>COLLECTIONS-SITEL</td>
        <td>3</td>
        <td>20</td>
        <td>60</td>
        <td>14</td>
        <td>7</td>
        <td>0:00:27</td>
        <td>12</td>
        <td>12</td>
        <td>45</td>
        <td>200</td>
        <td>89.00%</td>
        <td>2</td>
      </tr>
      <tr class="treegrid-67 treegrid-parent-66">
        <td>SAINT CATH</td>
        <td>3</td>
        <td>20</td>
        <td>60</td>
        <td>14</td>
        <td>7</td>
        <td>0:00:27</td>
        <td>12</td>
        <td>12</td>
        <td>45</td>
        <td>200</td>
        <td>89.00%</td>
        <td>2</td>
      </tr>
      <tr class="treegrid-68 treegrid-parent-67">
        <td>COLLECTIONS OPERATION</td>
        <td>3</td>
        <td>20</td>
        <td>60</td>
        <td>14</td>
        <td>7</td>
        <td>0:00:27</td>
        <td>12</td>
        <td>12</td>
        <td>45</td>
        <td>200</td>
        <td>89.00%</td>
        <td>2</td>
      </tr>
      <tr class="treegrid-69 treegrid-parent-67">
        <td>COLLECTIONS</td>
        <td>3</td>
        <td>20</td>
        <td>60</td>
        <td>14</td>
        <td>7</td>
        <td>0:00:27</td>
        <td>12</td>
        <td>12</td>
        <td>45</td>
        <td>200</td>
        <td>89.00%</td>
        <td>2</td>
      </tr>
      <tr class="treegrid-70 treegrid-parent-67">
        <td>TELEPHONE</td>
        <td>3</td>
        <td>20</td>
        <td>60</td>
        <td>14</td>
        <td>7</td>
        <td>0:00:27</td>
        <td>12</td>
        <td>12</td>
        <td>45</td>
        <td>200</td>
        <td>89.00%</td>
        <td>2</td>
      </tr>
      <tr class="treegrid-71 treegrid-parent-66">
        <td>PANAMA</td>
        <td>3</td>
        <td>20</td>
        <td>60</td>
        <td>14</td>
        <td>7</td>
        <td>0:00:27</td>
        <td>12</td>
        <td>12</td>
        <td>45</td>
        <td>200</td>
        <td>89.00%</td>
        <td>2</td>
      </tr>
      <tr class="treegrid-72 treegrid-parent-71">
        <td>COLLECTIONS</td>
        <td>3</td>
        <td>20</td>
        <td>60</td>
        <td>14</td>
        <td>7</td>
        <td>0:00:27</td>
        <td>12</td>
        <td>12</td>
        <td>45</td>
        <td>200</td>
        <td>89.00%</td>
        <td>2</td>
      </tr>
      <!--END COLLECTIONS TABLE SECTION-->

    </tbody>
  </table>
</body>

</html>

Answer 1

<div class="table-responsive container">
    <table class="table table-bordered">
        <thead>
            <tr class="dnd-moved">
                <th>Column #1</th>
                <th>Column #2</th>
                <th>Column #3</th>
                <th>Column #4</th>
                <th>Column #5</th>
            </tr>
        </thead>
        <tbody>
            <tr class="dnd-moved">
                <td>Row #1-1</td>
                <td>Row #1-2</td>
                <td>Row #1-3</td>
                <td>Row #1-4</td>
                <td>Row #1-5</td>
            </tr>
            <tr class="dnd-moved">
                <td>Row #2-1</td>
                <td>Row #2-2</td>
                <td>Row #2-3</td>
                <td>Row #2-4</td>
                <td>Row #2-5</td>
            </tr>
            <tr class="dnd-moved">
                <td>Row #3-1</td>
                <td>Row #3-2</td>
                <td>Row #3-3</td>
                <td>Row #3-4</td>
                <td>Row #3-5</td>
            </tr>
        </tbody>
    </table>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/dragndrop.table.columns.js" type="text/javascript"></script>
<script>
    $('.table').dragableColumns();
</script>

演示页面http://alexshnur.github.io/drag-n-drop-table-columns/