editTable.js
提供编辑表格当前行、添加一行、删除当前行的操作,其中可以设置参数,如:operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列;(这里的操作包括 编辑当前行、在当前行下添加一行、删除当前行)
handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假;
edit、save、cancel、add、confirm、del 分别设置显示操作的操作名,默认显示“编辑”、“保存”、“取消”、“添加”、“确认”、“删除”字样;
editableCols 设置可被编辑的列,从0开始,以数组形式进行设置,如 [ 1,2] ,表示第2、3列进行编辑操作时,可以被编辑;可以传入 "all" ,表示选中所有列可被编辑;当然程序中会自动排除 已经设置要放置操作的列;
order 设置表格需要的操作,同时可以设置操作排放的顺序;参数为数组形式,数组中的值可以为edit、add、del;传入空数组的话,默认提供edit编辑操作,相当于设置 [ "edit" ] 参数;此外默认提供所有功能,即编辑、添加、删除,相当于设置 [ "edit","add","del"] 参数,且顺序为编辑-》添加-》删除;可以修改三者的顺序,如 [ "add","edit","del" ];
saveCallback 当提供编辑功能后,在编辑当前行的过程中,点击保存后的回调函数;需要用户在使用编辑功能的同时,设置该参数,当进行保存过中,该函数可以使用ajax传递编辑后的数据data(保存在data数组中),当ajax保存数据成功后应该还需要调用函数 参数中的 isSuccess 方法,以修改界面中的可编辑状态为不可编辑状态;
addCallback和delCallback与saveCallback同理,只是分别应用在不同的操作上——添加和删除。
editTable.js
//表格的列数
var colsNum = $(this).find('tr').last().children().size();
//2.初始化操作列,默认为最后一列,从1算起
if(c.operatePos == -1) {
c.operatePos = colsNum - 1;
}
//3.获取所有需要被操作的行
var rows = $(this).find('tr');
if(!c.handleFirst) {
rows = rows.not(":eq(0)");
}
//4.获取放置“操作”的列,通过operatePos获取
var rowsTd = [];
var allTd = rows.children();
for(var i = c.operatePos; i @H_403_22@</td>
</tr>
<tr>
<th scope="row">2
<td></td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td></td>
</tr>
<tr>
<th scope="row">3
<td></td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td></td>
</tr>
<script src="js/jquery-1.11.1.min.js">
<script src="js/bootstrap.min.js">
<script src="editTable.js">