首页 > PHP资讯 > HTML5培训技术 > 基于Bootstrap使用jQuery实现简单可编辑表格_javascript技巧

基于Bootstrap使用jQuery实现简单可编辑表格_javascript技巧

HTML5培训技术
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

/**  * Created by DreamBoy on 2016/4/19.  */ $(function() {  $.fn.handleTable = function (options) {   //1.Settings 初始化设置   var c = $.extend({    "operatePos" : -1, //-1表示默认操作列为最后一列    "handleFirst" : false, //第一行是否作为操作的对象    "edit" : "编辑",    "save" : "保存",    "cancel" : "取消",    "add" : "添加",    "confirm" : "确认",    "del" : "删除",    "editableCols" : "all", //可编辑的列,从0开始    //"pos" : 0, //位置位于该列开头,还是结尾(左侧或右侧)    "order" : ["edit", "add", "del"], //指定三个功能的顺序    "saveCallback" : function(data, isSuccess) { //这里可以写ajax内容,用于保存编辑后的内容     //data: 返回的数据     //isSuccess: 方法,用于保存数据成功后,将可编辑状态变为不可编辑状态     //ajax请求成功(保存数据成功),才回调isSuccess函数(修改保存状态为编辑状态)    },    "addCallback" : function(data, isSuccess) {     //isSuccess: 方法,用于添加数据成功后,将可编辑状态变为不可编辑状态    },    "delCallback" : function(isSuccess) {     //isSuccess: 方法,用于删除数据成功后,将对应行删除    }   }, options);    //表格的列数   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 <= allTd.size(); i += colsNum) {    if(c.handleFirst) { //如果操作第一行,就把放置操作的列内容置为空     allTd.eq(i).html("");    }    rowsTd.push(allTd.eq(i)[0]);   }    //6.修改设置 order 为空时的默认值   if(c.order.length == 0) {    c.order = ["edit"];   }    //7.保存可编辑的列   var cols = getEditableCols();    //8.初始化链接的构建   var saveLink = "", cancelLink = "", editLink = "", addLink = "", confirmLink = "", delLink = "";   initLink();    //9.初始化操作   initFunc(c.order, rowsTd);    /**    * 创建操作链接    */   function createLink(str) {    return "
-->                 

<script src="js/jquery-1.11.1.min.js?1.1.9">《script》 <script src="js/bootstrap.min.js?1.1.9">《script》 <script src="editTable.js?1.1.9">《script》 《script》 $(function() { //$('.edit').handleTable({"cancel" : ""}); $('.editable').handleTable({ "handleFirst" : true, "cancel" : " ", "edit" : " ", "add" : " ", "save" : " ", "confirm" : " ", "operatePos" : -1, "editableCols" : [2,3,4], "order": ["add","edit"], "saveCallback" : function(data, isSuccess) { //这里可以写ajax内容,用于保存编辑后的内容 //data: 返回的数据 //isSucess: 方法,用于保存数据成功后,将可编辑状态变为不可编辑状态 var flag = true; //ajax请求成功(保存数据成功),才回调isSuccess函数(修改保存状态为编辑状态) if(flag) { isSuccess(); alert(data + " 保存成功"); } else { alert(data + " 保存失败"); } return true; }, "addCallback" : function(data,isSuccess) { var flag = true; if(flag) { isSuccess(); alert(data + " 增加成功"); } else { alert(data + " 增加失败"); } }, "delCallback" : function(isSuccess) { var flag = true; if(flag) { isSuccess(); alert("删除成功"); } else { alert("删除失败"); } } }); }); 《script》

运行结果如下


使用编辑操作:

进行修改:


点击保存:


添加多行:


在其中添加一些数据:


点击“确定”:



可以取消其他多余要添加的行:


以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持43不支持0