Einführung in die Paginierung des Bootstrap-Tabellen-Plug-Ins

Dieser Artikel stellt hauptsächlich die Paging- und Kontrollkästchenverwendung des Bootstrap-Tabellen-Plug-Ins im Detail vor. Interessierte Freunde können sich heute darauf beziehen Implementieren Sie eine solche Funktion. Es gibt eine Kontrollkästchenliste zur Auswahl. Sie müssen die Zeilen zwischen den Seiten auswählen und speichern.

Die endgültige Funktion ist wie in der Abbildung dargestellt: (Bild aus dem Internet)

Spezifische Implementierung

Schauen wir uns zunächst den spezifischen Code an. Hier fangen wir nur den für die Implementierung erforderlichen Code ab die Funktion

Vergleiche

  var selectionIds =[],selectionNames=[];
  var curd = {
    init:function(){
      this._getCheckParam();
    },

    /**
     * 初始化
     * @private
     */

  /**
   * 表格操作
   */
  //表格分页之前处理多选框数据
  _responseHandler:function()(res) {
    $.each(res.rows, function (i, row) {
      row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
    });
    return res;
  },
    _list:function(){
      var _this = this
      var settings = {
        url:Path.searchUrl,
        method:'GET',
        responseHandler:_this.responseHandler, //在渲染页面数据     之前执行的方法
        height:Path.tbheight
      };
      bsTable.initTable("#boostrapTable",settings);
      // 其它的boostrapTable参数已经封装在bsTable里面了，这里就不贴出来了
    },
    /**
     * 获取选中ID
     * @returns {*}
     * @private
     */
    _getIdSelections:function() {
        // 用map进行过滤
        return $.map($('#bootstrapTable').bootstrapTable('getSelections'), function (row) {
          return row.id
        });
      },
    /**
     * 获取选中对象并显示
     * @private
     */
    _getCheckParam:function(){
      var union = function(array,ids){
        $.each(ids, function (i, id) {
          if($.inArray(id,array)==-1){
            array[array.length] = id;
          }
        });
        return array;
      };
      //取消选中事件操作数组
      var difference = function(array,ids){
        $.each(ids, function (i, id) {
          var index = $.inArray(id,array);
          if(index!=-1){
            array.splice(index, 1);
          }
        });
        return array;
      };
      var _ = {"union":union,"difference":difference};
      var $table=$('#bootstrapTable');
      //绑定选中事件、取消事件、全部选中、全部取消
      $table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
        var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
          return row.id;
        });
        var names = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
          return row.name;
        });
        func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
        selectionIds = _[func](selectionIds, ids);
        selectionNames =_[func](selectionNames,names);
      });
    }
  };
      return curd;

});

Häufig verwendete Techniken

Wählen Sie bei Verwendung von boostrapTable die Zeilen der Tabelle aus, und es werden viele Zeilen zurückgegeben Wenn wir die benötigten Felder herausfiltern müssen, können wir

verwenden. Wenn Sie die ausgewählten Daten einschränken müssen, ist es natürlich auch gut, den Filter

function getIdSelections() {
   return $.map($table.bootstrapTable('getSelections'), function (row) {
     return row.id
     // 想返回什么字段就换成什么
   });
 }

zu verwenden

Das obige ist der detaillierte Inhalt vonEinführung in die Paginierung des Bootstrap-Tabellen-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!