JS 插件文檔庫(kù)邀你一起協(xié)同創(chuàng)作 - 簡(jiǎn)書
Tabledit
這是個(gè)輕量級(jí)环形、快速實(shí)現(xiàn)編輯以及刪除功能的表格框架，應(yīng)用場(chǎng)景更多在簡(jiǎn)單表格的快速處理上谤草，輕量是它的優(yōu)點(diǎn)也是它的缺點(diǎn)跟束，功能比較單一莺奸，但貴在神速。
1. 準(zhǔn)備
Tabledit 應(yīng)用場(chǎng)景限于一些簡(jiǎn)單的配置表修改冀宴，主要功能是表格的快速處理灭贷，要在現(xiàn)有的表格上才能發(fā)揮作用，不支持生成表格數(shù)據(jù)略贮。但是甚疟，通常情況下，我們的表格數(shù)據(jù)都是來(lái)源于后臺(tái)刨肃，為了更貼近實(shí)際情況古拴，我簡(jiǎn)單模擬了一下，在后臺(tái)路由端生成表格數(shù)據(jù)真友，然后傳到前臺(tái)黄痪，HTML 部分代碼如下：
...
<table class="table table-bordered table-striped">
<tr>
<th>#</th>
<th>公司</th>
<th>地點(diǎn)</th>
<th>負(fù)責(zé)人</th>
<th>人員數(shù)</th>
<th>備注</th>
</tr>
<% for(var i = 0 ; i < dataList.length; i++){ %>
<tr>
<td class="hidden"><%= dataList[i].id %></td>
<td><%= i+1 %></td>
<td><%= dataList[i].plant %></td>
<td><%= dataList[i].place %></td>
<td><%= dataList[i].owner %></td>
<td><%= dataList[i].preparation %></td>
<td><%= dataList[i].bz %></td>
</tr>
<% } %>
</table>
...
簡(jiǎn)單的一段 ejs 模版代碼，其中 dataList 是后臺(tái)傳到前臺(tái)的數(shù)據(jù)對(duì)象盔然，經(jīng)過(guò)前臺(tái)渲染達(dá)到如下圖所示效果：
簡(jiǎn)單看下后臺(tái)路由實(shí)現(xiàn)方法：
由于采用不同語(yǔ)言桅打，甚至是不同的框架，獲取數(shù)據(jù)的方式會(huì)有所不同愈案，這里你只需要關(guān)注兩點(diǎn)：
- 數(shù)據(jù)是通過(guò)后臺(tái)傳到前臺(tái)挺尾，并在前臺(tái)渲染出來(lái)的；
- 數(shù)據(jù)的格式是一個(gè)包含 N 個(gè) JSON 對(duì)象的數(shù)組站绪；
2. 使用
在前臺(tái)頁(yè)面中遭铺，引入庫(kù)文件，除了 jQuery 和 Bootstrap恢准，加上 tabledit 的 js 庫(kù)即可魂挂。
<!-- jQuery 3 -->
<script src="/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- tabledit -->
<script src="/javascripts/libs/jquery.tabledit.js"></script>
接下來(lái)，編寫具體實(shí)現(xiàn)代碼馁筐，下面一段代碼基本包括了 tabledit 的所有功能要點(diǎn)涂召。
$(function(){
$('.table').Tabledit({
url: '/tabledit/ajax',
autoFocus: false,
// hideIdentifier: true, // 手動(dòng)設(shè)置hidden 取代 hideIndentifier
buttons: {
edit:{
action: 'edit'
},
delete: {
action: 'delete'
},
confirm: {
html: '確定?'
},
restore: {
html: '取消',
},
save: {
html: '保存?'
}
},
columns: {
identifier: [0, 'table_id'], // 列從0開始，id是table的第0列
editable: [[2, 'table_plant'],[3, 'table_place'], [4, 'table_owner'],[5, 'table_preparation'],[6, 'table_bz']]
},
});
});
樣式方面的參數(shù)不多介紹敏沉，相信大家試一下基本就知道了果正，關(guān)鍵在傳參。
-
url定義的是訪問(wèn)路徑 -
buttons定義了 2 個(gè)動(dòng)作盟迟，編輯和刪除秋泳，action是其中一個(gè)參數(shù)，當(dāng)action=='edit'代表的是編輯操作攒菠，當(dāng)action=='delete'代表的是刪除操作 -
columns定義了參數(shù)轮锥，一個(gè)是 id，一個(gè)編輯的表單參數(shù)要尔，前面數(shù)字代表表格第幾列（從 0 開始數(shù)）舍杜，后面字符串代表參數(shù)名稱，參數(shù)值自然為 value 值赵辕。
知道了這些既绩，接下就好理解，當(dāng)我們點(diǎn)擊前臺(tái)編輯按鈕的時(shí)候还惠，會(huì)顯示編輯框饲握，如下圖：
修改完后，當(dāng)我們點(diǎn)擊保存時(shí)蚕键，觸發(fā) ajax 請(qǐng)求救欧，請(qǐng)求地址為 url 中定義的路徑，傳的參數(shù)包含 id锣光、action 以及所有的可編輯表格的參數(shù)笆怠。例如這里的參數(shù)列表為：
后臺(tái)根據(jù)接收到的指令，直接處理請(qǐng)求即可誊爹。有一點(diǎn)需要注意的是蹬刷，返回?cái)?shù)據(jù)需是 JSON 格式。例如频丘，我這里的代碼如下：
// tabledit ajax operator
router.post('/ajax' , function(req,res,next){
var action = req.body.action;
var id = req.body.table_id;
if(action == 'delete'){
console.log('--------- you need do something to delete your data');
res.send(JSON.stringify({message: 'delete ok'}));
}else if(action == 'edit'){
console.log('--------- you need do something to update your data');
res.send(JSON.stringify({message: 'edit ok'}));
}else if(action == 'restore'){
console.log('--------- you need do something to restore your data');
res.send(JSON.stringify({message: 'restore ok'}));
}
});
好了办成，tabledit 的介紹就到這里，它的重點(diǎn)功能是搂漠，對(duì)已經(jīng)存在的表格迂卢，快速進(jìn)行編輯以及刪除操作，需要注意的就是 id 參數(shù)以及 action 參數(shù)桐汤。
