Shulou(Shulou.com)06/03 Report--

How to encapsulate the table real-time editing function, I believe many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Function introduction:

This function only needs to pass in two parameters to realize the real-time editing of the table. After editing, the text box can be out of focus or press enter to send an asynchronous request for modification. If it is checked that there is no modification, the request server will not send a prompt that the parameter received by the server is fixed to _ id title con. If the function fails, the layer plug-in can modify the dependency on its own.

Settings introduction:

Add the name attribute to the td cell to be edited in html to make the cell editable. Tr needs to set the name attribute to place the id of the backstage table as a modification condition.

/ * * double-click to edit the table cell * the table cell to be clicked on by obj object * the address required by url * callback passes in the html element to be added and returns the jq object of the element * the id* title text of the column to be modified by id int cannot be edited if the field name to be modified is not set * / function editor corresponding to the field to be modified by con text * * (obj,url) Callback) {var table = arguments [0]? arguments [0]: $("table tr td") Var postUrl = arguments [1]? arguments [1]:'; table.dblclick (function () {var con = $.trim ($(this). Text ()); var id = $.trim ($(this). Parent (). Attr ("name")); var title = $.trim ($(this) .attr ("name")); html element placed by if (! title) {return false;} / / and the corresponding selected logic var saveObj If (callback) {saveObj = callback ($(this), id, con, title);} else {/ / if callback is not set, the default value is $(this) .html (""); saveObj = $(".update");} / / the object if (! update) {saveObj = $(".update") {saveObj = $(".update") is returned by default;} / / get the real value var setVal = saveObj.val (); / / get the text box focus saveObj.focus () / / Select the text saveObj.select () in the input box; / / lose focus event saveObj.blur (function () {var text = $(this). Val (); if (text = = setVal) {$(this). Parent (). Html (con); return false;} var id = $(this) .attr ("name"); var title = $(this) .attr ("title") / / todo requests to modify $.post (postUrl, {_ id: id, title: title, con: text}, function (res) {if (res.status) {return location.reload ();} return dialog.error (res.info,function () {location.reload ();}); / / enter to quickly edit $(window) .keyup (function (e) {var code = e.keyCode) If (code = 13) {var blur = saveObj.is (": focus"); if (blur = false) {return false;} else {saveObj.blur ();}); enter ();} / pop-up window confirm function enter (obj) {var cli = arguments [0]? arguments [0]: 0; $(window) .keyup (function (e) {if (e.keyCode = = 13) {var btn = $(".layui-layer-btn0"); var len = btn.length If (len

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.