可編輯的jquery表格外掛程式

/*可編輯的表格外掛程式v1.0*//*author:塵絮緣 xcl  date:2011-12-02*//*update:2011-12-05*//*qq:80213876          *//*說明：雙擊行編輯，再雙擊則儲存更多參數，請參照最下方的：defaults*/var tableListInfo = {    init: function(options) {        options = $.extend(tableListInfo.defaults, options); //這裡其實就是合并多個對象為一個。這裡就是，如果你在調用的時候寫了新的參數，就用你新的參數，如果沒有寫，就用預設的參數。        //滑過變色        $(options.tableClass).hover(function() {            $(this).addClass(options.trHoverClass);        }, function() {            $(this).removeClass(options.trHoverClass);        });        //設定奇數行和偶數行的樣式        $(options.tableClass + ":odd").addClass(options.trOddClass);        $(options.tableClass + ":even").addClass(options.trEvenClass);        //單擊選中        $(options.tableClass).live("click", function() {            $(this).hasClass(options.trSelectedClass) ? $(this).removeClass(options.trSelectedClass) : $(this).addClass(options.trSelectedClass);            return false;        });        //全選        $(options.selectAllClass).live("click", function() {            $(options.tableClass).addClass(options.trSelectedClass);            return false;        });        //全不選        $(options.selectNothingClass).live("click", function() {            $(options.tableClass).removeClass(options.trSelectedClass);            return false;        });        //反選        $(options.selectOtherClass).live("click", function() {            $(options.tableClass).each(function() {                $(this).hasClass(options.trSelectedClass) ? $(this).removeClass(options.trSelectedClass) : $(this).addClass(options.trSelectedClass);            });            return false;        });        //刪除        $(options.delClass).live("click", function() {            var ids = [];            var trObjs = [];            $(options.tableClass).each(function() {                if ($(this).hasClass(options.trSelectedClass)) {                    ids.push($(this).attr(options.idAttr));                    trObjs.push($(this));                }            });            if (ids.length > 0) {                if (options.delCallBack != null) {                        var str=options.delCallBack(ids, trObjs).split(",");//刪除失敗的ID數組for (var i = 0; i < trObjs.length; i++) {var flag=1;                            for(var m=0;m<str.length;m++){if(trObjs[i].attr(options.idAttr)==str[m])//刪除失敗的行{flag=0;break;}}if(flag==1){trObjs[i].fadeTo("normal", 0.6, function() {$(this).remove();});}}                }            }            return false;        });        //編輯        $(options.editClass).live("click", function() {            var ids = [];            var trObjs = [];            $(options.tableClass).each(function() {                if ($(this).hasClass(options.trSelectedClass)) {                    ids.push($(this).attr(options.idAttr));                    trObjs.push($(this));                }            });            if (ids.length > 1) {                alert(options.trEditMsg);                return false;            }            else if (ids.length == 1) {                if (options.editCallBack != null) {                    options.editCallBack(ids, trObjs);                }            }            return false;        });        //單擊“全部取消編輯”按鈕        $(options.cancleAllClass).live("click", function() {            $(options.tableClass + " .cancleEditCurrentTr").click();            return false;        });        //單擊行後面的"取消編輯"        $("a.cancleEditCurrentTr").live("dblclick", function(event) {            event.stopPropagation();            return false;        }).live("click", function(event) {            $parnetTr = $(this).closest("tr");            $parnetTr.html(unescape($parnetTr.attr("oldInfo"))).removeAttr("oldInfo");            event.stopPropagation();            return false;        });        //雙擊tr（事件切換，雙擊編輯，再雙擊則儲存）        $(options.tableClass).live("dblclick", function(event) {            if ($(this).attr("oldInfo") == undefined) {//當前tr不在編輯狀態                $(this).attr("oldInfo", escape($(this).html())); //儲存未編輯時的tr的html                //產生可編輯的tr                if (options.trSaveCallBack != null) {                    if(options.tdEnableEditClass=="") return false;$currentTds=$(this).find("td"+options.tdEnableEditClass)$currentTrLineTr = $(this);                    $currentTds.each(function(i) {                        var v = $.trim($(this).text());                        $(this).html("<input type=\"text\" " + options.tdEditInputAttr + " class=\"" + options.tdEditInputClass + "\" value=\"" + v + "\"/>");                        if (i == $currentTds.length - 1)//如果是最後一個td，則在後面產生一個按鈕“取消編輯”                        {                            $($currentTds[i]).find("." + options.tdEditInputClass).after("<a href=\"javascript:void(0);\" class=\"cancleEditCurrentTr\">" + options.cancleBtnText + "</a>");                        }                    });                }            }            else { //儲存tr回調資料                //提取當前行的每列資料，並存到數組中。                var trValue = [];                $(this).find("td").each(function() {                    if ($(this).find(":input").length > 0)//如果該列中有input，則提取出來                    {                        trValue.push($.trim(escape($($(this).find(":input")[0]).val())));                    }                    else {                        trValue.push($.trim(escape($(this).text())));                    }                });                if (options.trSaveCallBack($(this).attr(options.idAttr), trValue) == 1) {                    //儲存成功                    $(this).removeAttr("oldInfo");                    $(this).find("td").each(function(i) {                        $(this).html(unescape(trValue[i]));                    });                }                else {//儲存失敗                    //$(this).html(unescape($(this).attr("oldInfo"))).removeAttr("oldInfo");                }            }            event.stopPropagation();            return false;        });        //單擊全部儲存        $(options.saveAllClass).live("click", function() {            if (options.trSaveAllCallBack != null) {                var currentEditObjs = [];                var ids = [];                for (var i = 0; i < $(options.tableClass).length; i++) {                    if ($($(options.tableClass)[i]).attr("oldInfo") != undefined) {                        currentEditObjs.push($($(options.tableClass)[i]));                        ids.push($($(options.tableClass)[i]).attr(options.idAttr));                    }                }if(currentEditObjs.length==0)return false;                var failIds = (options.trSaveAllCallBack(ids, currentEditObjs)).split(","); //返回的是儲存失敗的id集合（用|分隔的字串）                for (var m = 0; m < currentEditObjs.length; m++) {                    var flag = 0;                    for (var f = 0; f < failIds.length; f++) {                        //失敗                        if (failIds[f] == currentEditObjs[m].attr(options.idAttr)) {                            //currentEditObjs[m].html(unescape(currentEditObjs[m].attr("oldInfo"))).removeAttr("oldInfo");                            flag = 1;                            break;                        }                    }                    if (flag == 1) continue;                    //提取當前行的每列資料，並存到數組中。                    var trValue = [];                    currentEditObjs[m].find("td").each(function() {                        if ($(this).find(":input").length > 0)//如果該列中有input，則提取出來                        {                            trValue.push($.trim(escape($($(this).find(":input")[0]).val())));                        }                        else {                            trValue.push($.trim(escape($(this).text())));                        }                    });                    currentEditObjs[m].removeAttr("oldInfo");                    currentEditObjs[m].find("td").each(function(i) {                        $(this).html(unescape(trValue[i]));                    });                }            }            return false;        });    },    defaults: {//注意樣式和選取器        tableClass: ".tableList tr:gt(0)", //表格容器class        trHoverClass: "trHover", //滑過的樣式        trSelectedClass: "trSelected", //選中的樣式        delClass: ".delSelected", //刪除按鈕class        editClass: ".editSelected", //編輯按鈕class        selectAllClass: ".selectAll", //全選按鈕class        selectNothingClass: ".selectNothing", //全不選按鈕class        selectOtherClass: ".selectOther", //反選按鈕class        idAttr: "ref", //存放ID的行屬性        delCallBack: null, //刪除回呼函數(ids:ref的屬性值集合；trObjs:要刪除的行jq對象數組)        editCallBack: null, //編輯回呼函數(ids:ref的屬性值集合；trObjs:要編輯的行jq對象數組)        trSaveCallBack: null, //雙擊正在編輯的tr儲存回呼函數(id:當前行的ref的屬性值；trObj:要編輯的tr的jq對象)        trSaveAllCallBack: null, //全部儲存回呼函數(ids:當前行的ref的屬性值；trObjs:要編輯的tr的jq對象)        tdEnableEditClass: ".enableEdit", //為""則每個td都不可以編輯，如果不為空白，則指定class的td能編輯        tdEditInputClass: "EditInput", //正在編輯列中的Input的樣式        tdEditInputAttr: "", //正在編輯列中的Input的其它屬性，格式："name='xxx'  id='xx'"        trOddClass: "trOdd", //奇數行樣式        trEvenClass: "trEven", //偶數行樣式        trEditMsg: "只能選一項進行編輯！", //如果選了多條記錄進行編輯時的提醒語        cancleBtnText: "取消編輯", //當編輯tr時,後面的取消按鈕的文字        cancleAllClass: ".cancleEditAll", //全部取消按鈕class        saveAllClass: ".saveEditAll"//全部儲存按鈕class    }}

/*css hack by xcl  2011-12-01*/.trHover{background:#eee!important;color:#f00;}.trSelected{background:#9f6!important;color:#f00;}.tableList{border:solid 1px #95b3d7;border-collapse:collapse;}.tableList td{border:solid 1px #95b3d7;}.trOdd{background:#F2FFFF;}.trEven{background:#F0F5FF;}.EditInput{width:80px;}

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> table</title>  <script type="text/javascript" src="jquery-1.5.1.min.js"></script>  <script type="text/javascript" src="table.min.js"></script>  <link href="table.css" rel="stylesheet" type="text/css"/>  <script type="text/javascript">      $(function() {          tableListInfo.init({ tableObj: ".tableList tr:gt(0)", tdEnableEditClass: ".enableEdit",              delCallBack: function(ids, trObjs) {alert("1,3,4刪除失敗！");return "1,3,4";//刪除失敗的id號  },              editCallBack: function(ids, trObjs) {                  alert(ids +"\n"+trObjs[0].html());              },              trSaveCallBack: function(id, trVlaue) {  return 1;//儲存成功則返回1              },  trSaveAllCallBack:function(ids,trObjs){ alert("10,11,13更新失敗！"); return "10,11,13";//儲存失敗的ID號  }          });      })  </script> </head> <body><div><table class="tableList" style="width:100%;text-align:center;"><tr>    <td width="25%">標題</td>    <td width="25%">標題</td>    <td width="25%">標題</td>    <td width="25%">標題</td></tr><tr ref="1">    <td>ASP.NET</td>    <td class="enableEdit">C#</td>    <td class="enableEdit">vb.net</td>    <td>mvc</td></tr><tr ref="2">    <td class="enableEdit">.NET</td>    <td class="enableEdit">C#</td>    <td class="enableEdit">vb.net</td>    <td class="enableEdit">mvc</td></tr><tr ref="3">    <td class="enableEdit">JAVA</td>    <td class="enableEdit">C#</td>    <td class="enableEdit">vb.net</td>    <td class="enableEdit">mvc</td></tr><tr ref="4">    <td class="enableEdit">C#</td>    <td class="enableEdit">C#</td>    <td class="enableEdit">vb.net</td>    <td class="enableEdit">mvc</td></tr><tr ref="5">    <td class="enableEdit">RUBY</td>    <td class="enableEdit">C#</td>    <td class="enableEdit">vb.net</td>    <td class="enableEdit">mvc</td></tr><tr ref="6"><td class="enableEdit">C++</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr><tr ref="6"><td class="enableEdit">MS</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr><tr ref="8"><td class="enableEdit">C</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr><tr ref="9"><td class="enableEdit">LOGO</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr><tr ref="10"><td class="enableEdit">JAVA EE</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr><tr ref="11"><td  class="dis">OBJECT C</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td  class="dis">mvc</td></tr><tr ref="12"><td class="enableEdit">WM</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr><tr ref="13"><td class="enableEdit">WPPP</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr><tr ref="14"><td class="enableEdit">TTTT</td><td class="enableEdit">C#</td><td class="enableEdit">vb.net</td><td class="enableEdit">mvc</td></tr></table><div style="width:100%"><a href="javascript:void(0);" class="selectAll">全選</a>   <a href="javascript:void(0);" class="selectNothing">全不選</a>   <a href="javascript:void(0);" class="selectOther">反選</a>   <a href="javascript:void(0);" class="editSelected">編輯已選項</a>   <a href="javascript:void(0);" class="delSelected">刪除已選項</a>   <a href="javascript:void(0);" class="cancleEditAll">全部取消編輯</a>   <a href="javascript:void(0);" class="saveEditAll">全部儲存編輯</a>   </div></div> </body></html>

 

 

 

 

：http://ishare.iask.sina.com.cn/f/22778265.html