关于Bootstrap Table使用生成冻结窗格的表格

<table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-detail-view="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="server" data-url="/examples/bootstrap_table/data" data-response-handler="responseHandler"> </table>

<table id="table" data-height="400" data-show-columns="true"></table>

var $table = $('#table'); $(function () { buildTable($table, 20, 20); $('#fixedNumber').change(function () { buildTable($table, 20, 20); }); }); function buildTable($el, cells, rows) { var i, j, row, columns = [], data = []; for (i = 0; i < cells; i++) { columns.push({ field: 'field' + i, title: 'Cell' + i, sortable: true }); } for (i = 0; i < rows; i++) { row = {}; for (j = 0; j < cells; j++) { row['field' + j] = 'Row-' + i + '-' + j; } data.push(row); } $el.bootstrapTable('destroy').bootstrapTable({ columns: columns, data: data, search: true, toolbar: '.toolbar', fixedColumns: true, fixedNumber: +$('#fixedNumber').val() }); }

<table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-detail-view="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="server" data-url="/examples/bootstrap_table/data" data-response-handler="responseHandler"> </table>

var $table = $('#table'), $remove = $('#remove'), selections = []; function initTable() { $table.bootstrapTable({ height: getHeight(), columns: [ [ { field: 'state', checkbox: true, rowspan: 2, align: 'center', valign: 'middle' }, { title: 'Item ID', field: 'id', rowspan: 2, align: 'center', valign: 'middle', sortable: true, footerFormatter: totalTextFormatter }, { title: 'Item Detail', colspan: 3, align: 'center' } ], [ { field: 'name', title: 'Item Name', sortable: true, editable: true, footerFormatter: totalNameFormatter, align: 'center' }, { field: 'price', title: 'Item Price', sortable: true, align: 'center', editable: { type: 'text', title: 'Item Price', validate: function (value) { value = $.trim(value); if (!value) { return 'This field is required'; } if (!/^\$/.test(value)) { return 'This field needs to start width $.' } var data = $table.bootstrapTable('getData'), index = $(this).parents('tr').data('index'); console.log(data[index]); return ''; } }, footerFormatter: totalPriceFormatter }, { field: 'operate', title: 'Item Operate', align: 'center', events: operateEvents, formatter: operateFormatter } ] ] }); // sometimes footer render error. setTimeout(function () { $table.bootstrapTable('resetView'); }, 200); $table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $remove.prop('disabled', !$table.bootstrapTable('getSelections').length); // save your data, here just save the current page selections = getIdSelections(); // push or splice the selections if you want to save all data selections }); $table.on('expand-row.bs.table', function (e, index, row, $detail) { if (index % 2 == 1) { $detail.html('Loading from ajax request...'); $.get('LICENSE', function (res) { $detail.html(res.replace(/\n/g, '<br>')); }); } }); $table.on('all.bs.table', function (e, name, args) { console.log(name, args); }); $remove.click(function () { var ids = getIdSelections(); $table.bootstrapTable('remove', { field: 'id', values: ids }); $remove.prop('disabled', true); }); $(window).resize(function () { $table.bootstrapTable('resetView', { height: getHeight() }); }); } function getIdSelections() { return $.map($table.bootstrapTable('getSelections'), function (row) { return row.id }); } function responseHandler(res) { $.each(res.rows, function (i, row) { row.state = $.inArray(row.id, selections) !== -1; }); return res; } function detailFormatter(index, row) { var html = []; $.each(row, function (key, value) { html.push('<p><b>' + key + ':</b> ' + value + '</p>'); }); return html.join(''); } function operateFormatter(value, row, index) { return [ '<a class="like" href="javascript:void(0)" title="Like">', '<i class="glyphicon glyphicon-heart"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join(''); } window.operateEvents = { 'click .like': function (e, value, row, index) { alert('You click like action, row: ' + JSON.stringify(row)); }, 'click .remove': function (e, value, row, index) { $table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } }; function totalTextFormatter(data) { return 'Total'; } function totalNameFormatter(data) { return data.length; } function totalPriceFormatter(data) { var total = 0; $.each(data, function (i, row) { total += +(row.price.substring(1)); }); return '$' + total; } function getHeight() { return $(window).height() - $('h1').outerHeight(true); } $(function () { var scripts = [ location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js', 'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js', 'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js', 'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js', 'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js' ], eachSeries = function (arr, iterator, callback) { callback = callback || function () {}; if (!arr.length) { return callback(); } var completed = 0; var iterate = function () { iterator(arr[completed], function (err) { if (err) { callback(err); callback = function () {}; } else { completed += 1; if (completed >= arr.length) { callback(null); } else { iterate(); } } }); }; iterate(); }; eachSeries(scripts, getScript, initTable); }); function getScript(url, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = url; var done = false; // Attach handlers for all browsers script.onload = script.onreadystatechange = function() { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { done = true; if (callback) callback(); // Handle memory leak in IE script.onload = script.onreadystatechange = null; } }; head.appendChild(script); // We handle everything using the script element injection return undefined; }