全面解析ptable：從使用到源碼分析

ptable是一個輕量級的DOM操作插件，主要用於表格的操作和功能增強。它的使用非常靈活，支持多種操作方式，包括添加、刪除、修改、排序、篩選等，可以大大提高表格的效率和易用性。

一、使用說明

1、下載及引入：

<script src="ptable.js"></script>

2、基礎使用：

var table = document.getElementById('myTable');
var ptable = new PTable(table);

3、數據加載：

Ptable支持兩種方式的數據加載：手動加載和自動加載。手動加載只需要調用load函數，自動加載需要傳入一個url參數，表示表格請求的後台接口地址。

手動加載示例：

ptable.load([
    {id: 1, name: '張三', age: 23},
    {id: 2, name: '李四', age: 30},
    {id: 3, name: '王五', age: 28}
]);

自動加載示例：

var ptable = new PTable('#myTable', {
    url: 'data.php'
});

二、常用功能

1、添加數據

用addRow函數可以在表格末尾添加一行數據，用insertRow則可以在指定位置插入一行數據。

//在表格末尾添加一行，數據為{id: 4, name: '馬六', age: 25}
ptable.addRow({id: 4, name: '馬六', age: 25});

//在第二行後插入一行數據，數據為{id: 5, name: '小七', age: 20}
ptable.insertRow(2, {id: 5, name: '小七', age: 20});

2、刪除數據

使用removeRow函數可以刪除指定行數據，removeAll函數可以刪除所有數據。

//刪除第一行數據
ptable.removeRow(1);

//刪除所有數據
ptable.removeAll();

3、修改數據

使用updateRow函數可以修改指定行的數據。

//將第二行的數據修改為{id: 2, name: '李四', age: 31}
ptable.updateRow(2, {id: 2, name: '李四', age: 31});

4、排序功能

使用sortBy函數可以按照指定列的值進行排序。

//按照age列升序排序
ptable.sortBy('age', 'asc');

//按照name列降序排序
ptable.sortBy('name', 'desc');

5、篩選功能

使用filterBy函數可以按照指定列的值進行篩選。

//篩選出年齡大於25歲的數據
ptable.filterBy('age', '>', 25);

//篩選出名字以“張”開頭的數據
ptable.filterBy('name', 'like', '張%');

三、源碼分析

Ptable的源碼非常簡單，總共只有200多行，分為兩部分：核心代碼和插件代碼。

核心代碼主要實現了表格操作的基本功能，包括數據加載、數據添加、數據刪除、數據修改、數據排序、數據篩選等。其中load函數和sortBy函數是最核心的代碼，其餘代碼主要是基於這兩個函數的二次封裝。

插件代碼則添加了一些實用的功能，如表格行高亮、單元格編輯、數據分頁等，這些功能都是基於核心代碼實現的。

四、總結

ptable是一個非常實用的表格操作插件，具有輕量、靈活、易用的特點。它不僅可以大大提高表格的效率和易用性，還可以作為表格重構的利器，幫助我們快速處理大量的表格數據。