支持：
1、表头自定义
2、动态删除 添加 获取行数据
3、设置自定义样式
4、支持事件回调
| 代码如下 | 复制代码 |
|
var phone_column = ["编号", "手机号码", "IMSI", "添加时间", "操作"], var phone_option = { tColumns: phone_column } var row = []; row.push(data.Id); row.push(msisdn); row.push(imsi); row.push(Date.parse(data.CreateTime).toString("yyyy-MM-dd")); row.push(data_link); _data.SuspectMsisdnList.push(row); $("#property_phone").miniTable('addNewRow',row); |
|
插件代码：
| 代码如下 | 复制代码 |
| (function ($) { var instances = []; var methods = { init: function (opts) { var $self = $(this); _clear($self); var defaults = $self.miniTable.settings; var settings = $.extend({}, defaults, opts); _init($self, settings); instances.push(settings); return $self.miniTable; }, getRow: function (row_num) { var $self = $(this); var num = Number(row_num); return _getRow($self, num); }, getTdData: function (row_num, col_num) { }, deleteRow: function (row_num) { var $self = $(this); var num = Number(row_num); _deleteRow($self, num); }, addNewRow: function (row) { var $self = $(this); _addNewRow($self, row); } }; function _init(self, settings) { _buildTable(self, settings); _applyStyle(self, settings); _renderTable(self, settings); _save(self, settings); } function _clear(self) { var settings = self.miniTable.settings; for (var attr in settings) { settings[attr] = []; } } function _save(self, settings) { var oldS = self.data('miniTable'); if (typeof (oldS) == 'undefined') { self.data('miniTable', settings); return; } var newS = $.extend({}, oldS, settings); self.data('miniTable', newS); var s = self.data('miniTable'); console.log(s); } function _addNewRow(self, row) { var settings = self.data('miniTable'); if (typeof (settings) != 'undefined') { var lastId = settings.oRows.slice(-1); _buildRow(self, row, lastId[0].Id + 1, settings); _applyColumnDef(settings); var lastRow = settings.oRows.slice(-1); _applyRowStyle(lastRow[0]); settings.oTbody.appendChild(lastRow[0].tElement[0]); _save(self, settings); return lastRow[0].tTds; } } function _deleteRow(self, row_num) { var settings = self.data('miniTable'); //根据ID查找表格行数 for (var i = 0; i < settings.oRows.length; i++) { if (settings.oRows[i].Id == row_num) { settings.oRows[i].tElement.remove(); settings.oRows.splice(i, 1); break; } }; _save(self, settings); } function _getRow(self, row_num) { var settings = self.data('miniTable'); for (var i = 0; i < settings.oRows.length; i++) { if (settings.oRows[i].Id == row_num) { return settings.oRows[i]; } }; } function _applyStyle(self, settings) { self.attr('class', 'miniTable'); for (var i = 0; i < settings.oColumns.length; i++) { if (!settings.oColumns[i].visible) { settings.oColumns[i].tElement.css('display', 'none'); } }; for (var i = 0; i < settings.oRows.length; i++) { for (var j = 0; j < settings.oRows[i].tTds.length; j++) { if (!settings.oRows[i].tTds[j].visible) { settings.oRows[i].tTds[j].tElement.css('display', 'none'); } }; }; } function _applyRowStyle(row) { for (var i = 0; i < row.tTds.length; i++) { if (!row.tTds[i].visible) { row.tTds[i].tElement.css('display', 'none'); } }; } function _renderTable(self, settings) { var thead = settings.oThead, tbody = settings.oTbody; for (var i = 0; i < settings.oColumns.length; i++) { thead.appendChild(settings.oColumns[i].tElement[0]); }; for (var i = 0; i < settings.oRows.length; i++) { tbody.appendChild(settings.oRows[i].tElement[0]); }; self.append(thead); self.append(tbody); } function _buildTable(self, settings) { _buildHead(self, settings); _buildData(self, settings); _applyColumnDef(settings); } function _buildColumn(self, column, loopId, settings) { var iCol = { tTitle: column.tTitle ? column.tTitle : column || "标题_" + loopId, tElement: $("<th>"), tColId: self.attr("id") + "_th_" + loopId, visible: true } iCol.tElement.attr('class', iCol.tClass); iCol.tElement.attr('id', iCol.tColId); iCol.tElement.text(iCol.tTitle); settings.oColumns.push(iCol); } function _buildRow(self, row, loopId, settings) { var iRow = { Id: loopId, tRowId: self.attr("id") + "_tr_" + loopId, tElement: $("<tr>"), tClass: row.tClass || loopId % 2 == 0 ? 'even' : 'odd', tTds: [] }; iRow.tElement.attr('id', iRow.tRowId); iRow.tElement.attr('class', iRow.tClass); for (var i = 0; i < row.length; i++) { var iTd = { tTdId: iRow.tRowId + "_td_" + i, tElement: $("<td>"), tText: row[i], visible: true }; iTd.tElement.attr('id', iTd.tTdId); iTd.tElement.html(iTd.tText); iRow.tTds.push(iTd); iRow.tElement.append(iTd.tElement); }; settings.oRows.push(iRow); } function _buildHead(self, settings) { settings.oThead = document.createElement("thead"); for (var i = 0; i <= settings.tColumns.length - 1; i++) { _buildColumn(self, settings.tColumns[i], i, settings); }; } function _buildData(self, settings) { settings.oTbody = document.createElement("tbody"); for (var i = 0; i <= settings.tData.length - 1; i++) { _buildRow(self, settings.tData[i], i, settings); } } function _applyColumnDef(settings) { for (var i = settings.tColumnDefs.length - 1; i >= 0; i--) { var tar = settings.tColumnDefs[i].target; var visible = settings.tColumnDefs[i].visible; if (!$.isArray(tar)) { $.error('_applyColumnDef' + tar + ' tColumnDefs must be Array'); continue; } for (var j = tar.length - 1; j >= 0; j--) { settings.oColumns[tar[j]].visible = visible; for (var k = settings.oRows.length - 1; k >= 0; k--) { settings.oRows[k].tTds[tar[j]].visible = visible; }; //可以增加其他设置 例如 callback }; } } var miniTable = function (opts) { var method = arguments[0]; if (methods[method]) { method = methods[method]; arguments = Array.prototype.slice.call(arguments, 1); } else if (typeof (method) == 'object' || !method) { method = methods.init; } else { $.error('Method ' + method + ' does not exist on jQuery.miniTable'); return this; } return method.apply(this, arguments); } $.fn.miniTable = miniTable; $.fn.miniTable.settings = { tData: [], tColumns: [], oColumns: [], oRows: [], oThead: [], oTbody: [], tColumnDefs: [], fnRowCallback: null }; })(jQuery); |
|
原文来自:http://www.suchso.com/UIweb/jquery-miniTable.html
时间： 2024-08-29 17:12:49