Asynchronously saving list columns on pages

Requirement

1. The customer needs to directly modify a column on the list page. Modify the field landing column as follows.

The basic idea of Implementation 1 is to use the jquery plug-in. Therefore, after some screening, the joytech component is found and some secondary development is carried out. 1 Reference JS

<Script language = "JavaScript" type = "text/JavaScript" src = "$ {csspath}/JS/jquery-1.7.1.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" Language = "JavaScript" src = "$ {csspath}/JS/jquery. joytech. Core. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" Language = "JavaScript" src = "$ {csspath}/JS/jquery. joytech. editable. js"> </SCRIPT>

2 list definitionDefine a class as editable for selecting columns (jquery selector is convenient)

<div class="w100 editable" onClick="{currId='${ts.id}'}" > ${ts.realityLandingTime}  </div>

3. Code Implementation

VaR currid = ""; function submitdo (oldvalue, changevalue) {// alert (oldvalue); // alert (changevalue); // alert ("submitdo1... "+ currid +" "+ changevalue); If (oldvalue = changevalue) {return ;}$. ajax ({URL: '/flight34/train/updaterealitylandingtime. do ', // URL:' $ {CTX}/index. JSP ', async: false, cache: false, type: 'post', ype: 'html', data: {tsid: currid, realitylandingtime: changevalue, contenttype: "Application/X-WWW-form-urlencoded; charset = UTF-8"}, success: function (HTML) {// alert (HTML) $ ("# warn" ).html ("operation successful"); fail () ;}}) ;}$ (document ). ready (function () {if ($ ("# phase "). val () = 9) {$ (". editable "). editabletext (submitdo );}});

Dependent on JS files

Note: I have made secondary development for joytech, mainly by adding an asynchronous commit method.

Jquery. joytech. Core. js

(function ($, undefined) {    $.joytech = $.joytech || {};})(jQuery);

Jquery. joytech. editable. js

/*!* jQuery joytech editable 1.0.0*** Depends:*jquery.joytech.core.js*/(function ($) {    $.joytech._editable = {        _editor: null,        _richeditor: null,        _currenteditor: null,        _holder: null,_submit: null,        _blur: function (event) {            var pthis = $.joytech._editable;            if (pthis._holder) {                var e = $(pthis._holder);                switch (e.attr("joytech_editable_type")) {                    case 'text': e.text(pthis._currenteditor.value); break;                    case 'html': e.html(pthis._currenteditor.value); break;                    case 'value': e.val(pthis._currenteditor.value); break;                }                pthis._holder = null;                $(pthis._currenteditor).hide();            }            // alert("...");$.joytech._editable._submit(pthis._currenteditor.oldValue,pthis._currenteditor.value);            return false;        },        _click: function (event) {            var pthis = $.joytech._editable;            if (pthis._editor == null) {                $(document.body).append("<input type='text' style='position:absolute;' id='joytech__editable__editor'/>");                pthis._editor = $('#joytech__editable__editor')[0];                $(pthis._editor).blur($.joytech._editable._blur).hide();            }            if (pthis._richeditor == null) {                $(document.body).append("<textarea style='position:absolute;' id='joytech__editable__richeditor'/>");                pthis._richeditor = $('#joytech__editable__richeditor')[0];                $(pthis._richeditor).blur($.joytech._editable._blur).hide();            }            pthis._holder = event.target;            var e = $(event.target);            var bricheditor = (e.attr("joytech_editable_type")) == 'html' && (e.attr("joytech_editable_usingricheditor")=='true');            if (bricheditor) pthis._currenteditor = pthis._richeditor;            else pthis._currenteditor = pthis._editor;            var i = $(pthis._currenteditor);            var value = '';            switch (e.attr("joytech_editable_type")) {                case 'text': value = e.text(); break;                case 'html': value = e.html(); break;                case 'value': value = e.val(); break;            }            if (bricheditor) i.val(value);            else i.val(value);                        pthis._currenteditor.oldValue =  value;                        var o = e.offset();            i.css({                left: o.left,                top: o.top,                width: e.width(),                height: e.height()            }).show().focus();            return false;        }    };    $.fn.editableHTML = function (usingricheditor) {        this.attr("joytech_editable_type", "html");        this.attr("joytech_editable_usingricheditor", usingricheditor);        this.dblclick($.joytech._editable._click);        return $;    };    $.fn.editableText = function (submitFunc) {$.joytech._editable._submit = submitFunc;        this.attr("joytech_editable_type", "text");        this.dblclick($.joytech._editable._click);        return $;    };    $.fn.editableValue = function () {        this.attr("joytech_editable_type", "value");        this.click($.joytech._editable._click);        return $;    };})(jQuery);