现在位置首页 / 前端开发 /正文

Jquery 简单实用表格插件--jquery-miniTable

作者: IT小兵 | 2014年4月8日| 热度:℃ | 评论: |参与:

分享一个自主开发的简单实用表格插件--jquery-miniTable。

支持:

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


转发注明:It分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询