Simple editable table _ javascript skills using jQuery Based on Bootstrap

Source: Internet
Author: User
This article describes how to use jQuery to easily edit a table based on Bootstrap. For more information, see EditTable. jsAllows you to edit the current row of a table, add a row, and delete the current row. You can set parameters, such:

OperatePos is used to set the placement operation column, starting from 0.-1 indicates that the last column is used as the placement operation column; (operations include editing the current row, adding a row under the current row, and deleting the current row)

HandleFirst sets whether the first row of the table is used as the operation object. true is true, false is false;

Edit, save, cancel, add, confirm, and del respectively set the operation name for the displayed operation, by default, the words "edit", "save", "cancel", "add", "Confirm", and "delete" are displayed;

EditableCols sets the Editable columns starting from 0 and using arrays, for example, [1, 2]. This indicates that columns 2nd and 3 can be edited; you can pass in "all" to indicate that all selected columns can be edited. Of course, columns that have been set for operation are automatically excluded from the program;

Order sets the operation required for the table and the sequence of Operation emissions. The parameters are in the array format. The values in the array can be edit, add, or del. If an empty array is input, by default, the edit operation is provided, which is equivalent to setting the ["edit"] parameter. By default, all functions are provided, namely, editing, adding, and deleting, which is equivalent to setting ["edit", "add ", "del"] parameter, and the order is edit-add-Delete; you can modify the order of the three, such as ["add", "edit", "del"];

SaveCallback: When the editing function is provided, click the Save callback function when editing the current row. You must set this parameter while using the editing function, when it is saved, this function can use ajax to pass the edited data (stored in the data array ), after ajax successfully saves the data, you must call the isSuccess method in the function parameters to change the Editable status on the interface to uneditable;

AddCallback and delCallback are the same as saveCallback, but they are applied to different operations-add and delete.

EditTable. js

/*** Created by DreamBoy on 2016/4/19. */$ (function () {$. fn. handleTable = function (options) {// 1. settings initialization Settings var c =$. extend ({"operatePos":-1, //-1 indicates that the default operation column is the last column "handleFirst": false, // whether the first row is used as the operation object "edit": "edit", "save": "save", "cancel": "cancel", "add ": "Add", "confirm": "OK", "del": "delete", "editableCols": "all", // Editable column, start from 0 // "pos": 0, // The position is at the beginning of the column, or end (left or right) "order": ["edit", "add ", "Del"], // specify the order of the three functions "saveCallback": function (data, isSuccess) {// ajax content can be written here, used to save the edited content/data: returned data // isSuccess: method, used to save the data successfully, change the Editable status to the Editable status. // callback to the isSuccess function (change the Save status to edit status)}, "addCallback": function (data, isSuccess) {// isSuccess: method, used to change the Editable status to uneditable status after data is added successfully}, "delCallback": function (isSuccess) {// isSuccess: method, after the data is successfully deleted, delete the corresponding row }}, options); // The number of columns in the table var colsNum =$ (this ). Find ('tr '). last (). children (). size (); // 2. initialize the operation column. The default value is the last column. if (c. operatePos =-1) {c. operatePos = colsNum-1;} // 3. obtain all rows to be operated var rows =$ (this ). find ('tr '); if (! C. handleFirst) {rows = rows. not (": eq (0)");} // 4. obtain the column where the "operation" is placed and use operatePos to obtain var rowsTd = []; var allTd = rows. children (); for (var I = c. operatePos; I <= allTd. size (); I + = colsNum) {if (c. handleFirst) {// if the first row of the operation is performed, set the content of the column to null alltd.eq(i2.16.html ("");} rowsTd. push (allTd. eq (I) [0]);} // 6. modify the default value if (c. order. length = 0) {c. order = ["edit"];} // 7. save the Editable column var cols = getEditableCols (); // 8. initial Var saveLink = "", cancelLink = "", editLink = ", addLink =" ", confirmLink =" ", delLink =" "; initLink (); // 9. initialization operation initFunc (c. order, rowsTd);/*** create operation link */function createLink (str) {return "" + str + "";} /*** initial links to various operations */function initLink () {for (var I = 0; I <c. order. length; I ++) {switch (c. order [I]) {case "edit": // "edit" link editLink = createLink (c. edit); saveLink = createLink (C. save); cancelLink = createLink (c. cancel); break; case "add": // "add" link addLink = createLink (c. add); // "OK" link confirmLink = createLink (c. confirm); // "cancel" link cancelLink = createLink (c. cancel); break; case "del": // "delete" link delLink = createLink (c. del); break ;}}/ *** get the columns that can be edited */function getEditableCols () {var cols = c. editableCols; if ($. type (c. editableCols )! = "Array" & cols = "all") {// if all columns can be edited, cols = []; for (var I = 0; I <colsNum; I ++) {if (I! = C. operatePos) {// exclude the column cols for the placement operation. push (I) ;}} else if ($. type (c. editableCols) = "array") {// if you have specified columns to be edited, sort the columns with the "edit" function var copyCols = []; for (var I = 0; I <cols. length; I ++) {if (cols [I]! = C. operatePos) {copyCols. push (cols [I]) ;}} cols = copyCols;} return cols ;}/ *** according to c. operation provided by the order parameter setting * @ param func operation to be set * @ param cols placement operation column */function initFunc (func, cols) {for (var I = 0; I <func. length; I ++) {var o = func [I]; switch (o) {case "edit": createEdit (cols); break; case "add ": createAdd (cols); break; case "del": createDel (cols); break ;}}} /*** create the "edit a row" function * @ param operateCol place the edit column */function createEdit (operateCol) {$ (editLink ). appendTo (operateCol ). on ("click", function () {if(replacequote(+(this%.html () = replaceQuote (c. edit) {// if this is the editing status toSave (this); // Changes the editing status to the saved status} else if(replacequote(metadata (this).html () = replaceQuote (c. save) {// If the saved status is var p = $ (this ). parents ('tr '); // obtain the currently clicked row var data = []; // Save the modified data to the data for (var I = 0; I <cols. length; I ++) {var tr = p. children (). eq (cols [I]); var inputValue = tr. children ('input '). val (); data. push (inputValue) ;}$ this = this; // this indicates the clicked edit link c. saveCallback (data, function () {toEdit ($ this, true) ;}}); var afterSave = []; // Save the information before modification, return the value after the user clicks the cancel Operation // modify it to the "save" status function toSave (ele) {detail (elew..html (c. save); // modify it to save $ (ele ). after (cancelLink); // Add the corresponding "cancel link" for canceling the save $ (ele ). next (). on ('click', function () {// if(+(this+.html () = c. cancel. replace (eval ("/\ '/gi"), "\" ") {toEdit (ele, false );//}}); // obtain the tr jQuery object var p = $ (ele) of the row being clicked and edited ). parents ('tr '); afterSave = []; // clear the original data for (var I = 0; I <cols. length; I ++) {var tr = p. children (). eq (cols [I]); var editTr =""; AfterSave.push(tr.html (); // Save the data tr.html (editTr) before modification; }}// modify it to the" edit "status (at this time, you need to use the isSave flag to determine whether it is // because you click "save" (saved successfully) to change to "edit" or because you click "cancel" to "edit) function toEdit (ele, isSave) {detail (eleapps.html (c. edit); if(replacequote()(ele%.next().html () = replaceQuote (c. cancel) {$ (ele ). next (). remove ();} var p = $ (ele ). parents ('tr '); for (var I = 0; I <cols. length; I ++) {var tr = p. children (). eq (cols [I]); var value; if (isSave) {value = tr. children ('input '). val () ;}else {value = afterSave [I] ;}tr.html (value );}}} /*** create the "add a row" function * @ param operateCol */function createAdd (operateCol) {$ (addLink ). appendTo (operateCol ). on ("click", function () {// obtain the tr jQuery object var p = $ (this) of the row to be added ). parents ('tr '); var copyRow = p. clone (); // create a new line var input =""; Var childLen = p. children (). length; for (var I = 0; I <childLen; I ++) {copyrow.children().eq( I %.html ("");} // The last row is the operation line var last = copyRow. children (). eq (c. operatePos); last.html (""); p. after (copyRow); var confirm =$ (confirmLink ). appendTo (last ). on ("click", function () {var data = []; for (var I = 0; I <childLen; I ++) {if (I! = C. operatePos) {var v = copyRow. children (). eq (I ). children ("input "). val (); data. push (v); copyRow.children().eq( I ).html (v);} c. addCallback (data, function () {last.html (""); // ------------ you can modify initFunc (c. order, last) ;}) ;}; $ (confirm ). after (cancelLink); // Add the corresponding "cancel link" for canceling the save $ (confirm ). next (). on ('click', function () {copyRow. remove ();}/*** create the "Delete row" function * @ param operateCol */function createDel (operateCol) {$ (delLink ). appendTo (operateCol ). on ("click", function () {var _ this = this; c. delCallback (function () {$ (_ this ). parents ('tr '). remove ();}/*** convert single quotes in str into double quotes * @ param str */function replaceQuote (str) {return str. replace (/\ '/g ,"\"");}};});

Note: you must add the selectable selector to the corresponding table, and place an empty label in the column where the "operation" is placed.Used to store "operations".

Use CasesAs follows:

Directory structure:


Index.html

    
   
   
   Table  
   
   
     

# Test First Name Last Name Username Operations
1 Mark Otto @ Mdo
2 Jacob Thornton @ Fat
3 Larry The Bird @ Twitter

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.