页面异步保存列表列

来源：互联网发布：怎样才能赚到钱知乎编辑：程序博客网时间：2024/04/29 08:59

需求

1. 客户有一个需要，需要在列表页面中的某一列直接进行修改操作。如下：需要修改"实地落地"这一列。

实现

1 基本想法就是使用jquery的插件，所以经过一些筛选找到了joytech这个组件，并且进行了一些二次开发。

1 引用js

2 列表定义

定义一个class为 editable，用于对列进行选择（方便使用jquery选择器）

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

3 代码实现

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',         dataType:'html',             data:{          tsid:currId,       realityLandingTime:changeValue,      contentType: "application/x-www-form-urlencoded;charset=utf-8"         },         success:function(html){         // alert(html)       $("#warn").html("操作成功");   fail();       }     });  }$(document).ready(function () {if($("#phase").val()==9){$(".editable").editableText(submitDo);}});

依赖js文件

备注：这里我对joytech做过二次开发，主要是添加了异步提交方法

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);

0 0