Combine BootStrap and jQuery to implement editable table _ jquery

This article mainly introduces how BootStrap and jQuery work together to implement editable tables. For more information, see editTable. js allows 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 Cases:

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