jQuery eTable Plugin

最新地址請訪問：http://leeyee.github.io/blog/2012/05/05/jquery-etable-plugin

GitHub地址：https://github.com/oxcow/eTable

 下載地址：https://github.com/oxcow/eTable/tags

jQuery eTable Plugin

jQuery eTable Plugin 提供對錶格操作的一些基本方法.其實質是通過$(table).eTable()獲取封裝了表格元素的ETable對象.

ETable對象封裝了一些列針對表格行列進行操作的方法。使用這些方法可以對錶格進行行列的插入與刪除。

ETable對象的獲取

---

var $eTable = $("#table1").eTable();
var $eTable = $(document.getElementById('table1')).eTable();

ETable API

---

.getRows()

獲取表格行數.

var rows = $eTable.getRows();

.getCols()

獲取表格的列數.

var cols = $eTable.getCols();

.appendRow()

在尾行後追加一行.

var cells = ['cell1','cell2','cell3'];
var cells1 = [
    $("<input type='text'/>").blur(function() {
        alert(this.value);
    }),
    "<input type='radio' />"
];
$eTable.appendRow(cells);
$eTable.appendRow(cells1);

.insertToFirstRow()

在首行前插入一行.

var cells = ['cell1','cell2','cell3'];
$eTable.insertToFristRow();

.insertToLastRow()

在尾行後插入一行.同.appendRow()方法

var cells = ['cell1','cell2','cell3'];
$eTable.insertToLastRow(cells);

.insertBeforeRow()

在指定行前插入一行.

var cells = ['cell1','cell2','cell3'];
$eTable.insertBeforeRow(3,cells); // 在第3行前插入

.insertAfterRow()

在指定行後插入一行.

var cells = ['cell1','cell2','cell3'];
$eTable.insertAfterRow(3,cells); // 在第3行後插入

.deleteFirstRow()

刪除首行.

$eTable.deleteFirstRow();

.deleteLastRow()

刪除尾行.

$eTable.deleteLastRow();

.deleteRow()

刪除指定行.刪除第一行爲deleteRow(0);.

var ches = $("table :checked");
var iLen = ches.length;
if (iLen === 0) {
    alert("Please select Delete Rows");
    return;
}
for (var i = 0; i < iLen; i++) {
    var index = ches[i].parentNode.parentNode.rowIndex;
    $eTable.deleteRow(index);
}

.deleteRows()

批量刪除行.

var rowIndexs = [0, 2, 3];
$eTable.deleteRows(rowIndexs); //刪除第1、3、4行

.appendCol()

在尾列後追加一列.

var cells = ['cell1','cell2','cell3'];
$eTable.appendCol(cells);

.insertToFirstCol()

在首列前插入一列.

var cells = ['cell1','cell2','cell3'];
$eTable.insertToFirstCol(cells);  

.insertToLastCol()

在尾列後插入一列.同.appendCol()方法.

var cells = ['cell1','cell2','cell3'];
$eTable.insertToLastCol(cells);    

.insertBeforeCol()

在指定列前插入一列.

var cells = ['cell1','cell2','cell3'];
$eTable.insertBeforeCol(2,cells); //在第2列前插入

.insertAfterCol()

在指定列後插入一列.

var cells = ['cell1','cell2','cell3'];
$eTable.insertAfterCol(2,cells); //在第2列後插入

.deleteFirstCol()

刪除首列.

$eTable.deleteFirstCol();

.deleteLastCol()

刪除尾列

$eTable.deleteLastCol();

.deleteCol()

刪除指定列.刪除第一列爲deleteCol(0);.

$eTable.deleteCol(3); //刪除第4列

.deleteCols()

批量刪除列.

var colIndexs = [0,2,3];
$eTable.deleteCols(colIndexs); //刪除第1,3,4行