Editable jquery table plugin

Source: Internet
Author: User
/* Editable table plug-in V1.0 * // * Author: Dust margin xcl Date: 2011-12-02 * // * update: 2011-12-05 * // * QQ: 80213876 * // * description: double-click Edit and double-click to save more parameters. See defaults */var tablelistinfo = {init: function (options) {Options = $. extend (tablelistinfo. defaults, options); // here, multiple objects are merged into one. Here, if you write a new parameter during the call, you will use your new parameter. If not, you will use the default parameter. // Slide color $ (options. tableclass ). hover (function () {$ (this ). addclass (options. trhoverclass);}, function () {$ (this ). removeclass (options. trhoverclass) ;}); // set the style of the odd and even rows $ (options. tableclass + ": odd "). addclass (options. troddclass); $ (options. tableclass + ": Even "). addclass (options. trevenclass); // click to select $ (options. tableclass ). live ("click", function () {$ (this ). hasclass (options. trselectedclass )? $ (This ). removeclass (options. trselectedclass): $ (this ). addclass (options. trselectedclass); Return false;}); // select all $ (options. selectallclass ). live ("click", function () {$ (options. tableclass ). addclass (options. trselectedclass); Return false;}); // do not select all $ (options. selectnothingclass ). live ("click", function () {$ (options. tableclass ). removeclass (options. trselectedclass); Return false;}); // select $ (options. sel Ectotherclass). Live ("click", function () {$ (options. tableclass). Each (function () {$ (this). hasclass (options. trselectedclass )? $ (This ). removeclass (options. trselectedclass): $ (this ). addclass (options. trselectedclass) ;}); return false ;}); // Delete $ (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 array 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]) // Delete the failed row {flag = 0; break;} If (flag = 1) {trobjs [I]. fadeto ("normal", 0.6, function () {$ (this ). remove () ;}}}return false ;}); // edit $ (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 ;}); // click the "cancel edit all" button $ (options. cancleallclass ). live ("click", function () {$ (options. tableclass + ". cancleeditcurrenttr "). click (); Return false ;}); // click "unedit" behind the row $ (". cancleeditcurrenttr "). live ("dblclick", function (event) {event. stoppropagation (); Return false ;}). live ("click", function (event) {$ parnettr = $ (this ). closest ("TR"); $ Parn Ettr.html (Unescape ($ parnettr. ATTR ("oldinfo "))). removeattr ("oldinfo"); event. stoppropagation (); Return false ;}); // double-click tr (event switchover, double-click Edit, and then double-click Edit to save) $ (options. tableclass ). live ("dblclick", function (event) {if ($ (this ). ATTR ("oldinfo") = undefined) {// The current TR is not in the editing Status $ (this ). ATTR ("oldinfo", escape(%(this%.html (); // Save the HTML of Tr when it is not edited // generate editable 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 (); plaintext (this).html ("<input type = \" text \ "" + options. tdeditinputattr + "class = \" "+ options. tdeditinputclass + "\" value = \ "" + V + "\"/> "); if (I = $ currenttds. length-1) // if it is the last TD, a button "unedit" is generated later "{ $ ($ Currenttds [I]). find (". "+ options. tdeditinputclass ). after ("<a href = \" javascript: void (0); \ "class = \" cancleeditcurrenttr \ ">" + options. canclebtntext + "</a>") ;}}}else {// Save the tr callback data // extract the data in each column of the current row and coexist in the array. VaR trvalue = []; $ (this ). find ("TD "). each (function () {if ($ (this ). find (": Input "). length> 0) // If the column contains input, {trvalue is extracted. push ($. trim (escape ($ (this ). find (": Input") [0]). val ();} else {trvalue. push ($. trim (escape ($ (this ). text () ;}}); If (options. trsavecallback ($ (this ). ATTR (options. idattr), trvalue) = 1) {// saved successfully $ (this ). removeattr ("oldinfo"); $ (this ). find ("TD "). each (function (I) {$ (this ). HTML (Unescape (trvalue [I]);} else {// save failed // failed (this).html (Unescape ($ (this ). ATTR ("oldinfo "))). removeattr ("oldinfo") ;}} event. stoppropagation (); Return false ;}); // click Save all $ (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 (","); // The returned result is a failed Id set (string separated by |) for (VAR m = 0; m <currenteditobjs. length; m ++) {var flag = 0; For (VAR f = 0; F <failids. length; F ++) {// failure 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; // extracts data from each column of the current row and saves it to the array. VaR trvalue = []; currenteditobjs [M]. find ("TD "). each (function () {if ($ (this ). find (": Input "). length> 0) // If the column contains input, {trvalue is extracted. 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) {detail (this).html (Unescape (trvalue [I]) ;}} return false ;}) ;}, Defaults: {// note the style and Selector tableclass :". tablelist TR: GT (0) ", // table container class trhoverclass:" trhover ", // slide-over style trselectedclass:" trselected ", // The selected style delclass :". delselected ", // Delete the button class editclass :". editselected ", // edit button class selectallclass :". selectall ", // select all button class selectnothingclass :". selectnothing ", // all do not select the button class selectotherclass :". selectother ", // The deselected button class idattr:" Ref ", // The row attribute delcall that stores the ID Back: NULL, // Delete the callback function (IDs: ref attribute value set; trobjs: JQ object array of the row to be deleted) editcallback: NULL, // edit the callback function (IDs: set of ref attribute values; trobjs: the JQ object array of the row to be edited) trsavecallback: NULL, // double-click the edited tr to save the callback function (ID: the ref attribute value of the current row; trobj: JQ object of the tr to be edited) trsaveallcallback: NULL, // save all the callback functions (IDs: the ref attribute value of the current row; trobjs: JQ object of the tr to be edited) tdenableeditclass :". enableedit ", //" "indicates that every TD cannot be edited. If it is not empty, the TD of the specified class can edit tdeditinputclass:" editinput ", // The style tdeditinputattr of the input in the column being edited: "", // Other attributes of the input in the editing column. Format: "name = 'xxx' id = 'xx'" troddclass: "Trodd ", // odd row style trevenclass: "treven", // even row style treditmsg: "You can only select one to edit! ", // If you have selected multiple records for editing, the reminder canclebtntext:" unedit ", // The text cancleallclass :". cancleeditall ", // cancel all the buttons class saveallclass :". saveeditall "// save all button 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> 

 

 

 

 

: Http://ishare.iask.sina.com.cn/f/22778265.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.