页面异步保存列表列

需求

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

实现

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

1 引用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 列表定义

定义一个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);