Datatable+jeditable+Java 结合使用实现表格的单行刷新

前段时间需要完成datatables+jeditable实现行内编辑，成功修改并单行刷新，如果数据输入的不符合规范或超值，重新显示旧值，以下是我实现过程用到的参数及方法和查阅的资料

 

属性配置：submitdata = 在jeditable编辑点击OK后提交到后台之前的操作函数，里面的value值是旧值

方法：fnDrawCallback = 在每次table被draw完后调用

　　　fnUpdate =  实现单行刷新，可自行选择刷新后是否重新刷新整个表格

参考资料链接： jeditable Link : http://www.cnblogs.com/li-mei/p/5433827.html

　　　　　　　datatables Link : http://blog.csdn.net/lithinkingboy/article/details/38539639

　　　　　　　jeditable官网 Link : http://www.appelsiini.net/projects/jeditable (如果打不开，试试用Google browser打开)

 

 为查阅方便我直接将“冰柠檬草”整理的参数粘到此处

参数名	值类型	默认值/参数	说明
event	String	click	触发编辑的事件，常用的是click或dblclick。
method	String	POST	内容ajax提交的方式。
callback	Function	value, settings	内容提交完成后的回调函数。接收两个参数，value是编辑后的内容，setings为插件所有的参数。在函数内还可以使用this,代表调用editable的dom对象，如基本案例中的class为editable的节点元素(一般为td或span等文字内容容器)。
name	String	value	触发编辑事件后会生成一个form表单，表单内含一个input框，这便是该input框name属性的值。如平时写的 name = “username”，这里name=”value”。该参数的值是ajax提交时默认提交的一个参数名，对应的值为input框的内容(也即该 input框的value)。
id	String	id	同name参数，该参数的值是ajax提交时默认提交的另一个参数名，对应的值是调用editable的原dom对象的id值。
submitdata	Mixed		提交的数据，默认会提交参数name和参数id的值，通过该参数追加传递的数据。该参数可以直接写一个hash数据，如 {a:’1’, b:’2’}，但一般是动态数据，通过像callback一样的函数返回一个hash数据。如function(value, settings){return {isempty:$(this).attr(‘isempty’)};}。注意：这里的value是编辑前的值，编辑后的内容自动通过name参数的值 (如默认的value)传递。
type	String	text	生成的form表单内input框的类型，有text、select、textarea三种。当是select时，要显 示的数据应该是由下面的loadurl或者data参数提供的hash。如果想用第三方插件进行输入，如时间选择器等，就需要添加type，文章下面有讨 论。
rows	Interger		如果type为textarea，该参数的值就是其rows。
cols	Interger		如果type为textarea，该参数的值就是其cols。
height	Interger	auto	form表单内input框的height属性的值。html5的input框才有height属性，但设置了好像没什么用。要控制input框的高，还是通过css吧。
width	Interger	auto	同height参数。
cssclass	String		生成的form表单的class样式名。控制其内部的input框的宽高，可以通过这个css样式，如该参数的值为editable，则.editable input{width: 20px,  height: 10px}。
style	String		生成的form表单的style属性。如display: inline。前端不懂，没看到什么效果。
loadurl	String		通常情况下要编辑的数据都是页面上显示的，但也可以通过这个参数的地址获取数据来展示在编辑框内进行编辑并提交。默认会携带触发editable的dom对象的id参数。
loadtype	String	GET	loadurl获取数据的请求方式。说默认为GET，但不写不会发起请求，还是定上为好。
loaddata	Mixed		loadurl请求时额外携带的参数，可参见submitdata。
loadtext	String	Loading…	loadurl请求过程中显示的提醒信息，如’数据请求中，请稍候…’。
data	Mixed		编辑框内显示的数据，按以下顺序来寻找并优先显示：loadurl参数请求的数据—>data参数的数据—>页面上已有的数据。data可以直接是一个字符串，也可以是一个像callback中的函数，在需要对数据进行一番处理再编辑时有用。
onblur	String	cancle	编辑框失去焦点时进行的操作。可以cancle、submit、ignore三个值。cancle：编辑框消失，不进行任何更改；submit：进行提交，相当于点击了确认按钮；ignore:不进任何操作，保留编辑框。
indicator	String		提交过程中显示的提醒，在调用callback函数之前显示。
tooltip	String		鼠标悬停在等编辑元素上面显示的文字提醒，就是给待编辑元素加了title。
placeholder	String	click to Edit	当编辑元素为空值时出现在待编辑元素位置的文字
ajaxoptions	Hash		ajax提交时ajax的设置，如url,type,data,async等，一般不用写，上面都基本包括了。
onsubmit	Function	settings,original	在submit提交前执行。接收两个参数，settings为当前设置对象，orininal为调用editable的dom对象，相当于callback中的this。该参数中的this是form表单这个dom对象。
onreset	Function	settings,original	在reset前执行，不知哪里来的reset了，不懂。
onerror	Function	settings,original	在发生错误时执行。
submit	String		确认提交按钮的值，没有则没有该按钮。
cancel	String		取消编辑按钮的值，没有则没有该按钮。

 

fnUpdate 的参数介绍：

Parameters:

	Name	Type	Attributes	Default	Description
1	mData	object | array | string			Data to update the cell/row with
2	mRow	node | int			TR element you want to update or the aoData index
3	iColumn	int	Optional		The column to update (not used of mData is an array or object) //此处意思是当mData为数组或对象，该参数是无用的
4	bRedraw	bool	Optional	true	Redraw the table or not
5	bAction	bool	Optional	true	Perform pre-draw actions or not

* 单行更新数据， mData是Object类型；mRow指行索引，应为数字；iColumn第三个参数指某列，设置为null或undefined则为忽略列配置；bRedraw 为false指不重构表格，不刷新；bAction是否预绘制操作

   iColumn如果给定值，mdata的数据将只更新行内的第一个列内容，如果你想实现单行刷新则将iColumn设为null/undefined（此处是查看源码介绍）

   mRow 为整数，（1，2，3，4...）

   mData 数据类型应与你表格显示格式一致

步骤：

1.首先引入文件，然后为元素添加可编辑元素

  HTML   <i class='moneypay  blue'>1000</i>

  JS 两种方式 　　

 (1)通过执行后台方法操作数据

$('.moneypay').editable(" Java URL ",{

　　　　　type:'text',
　　　　　submit:'OK',
　　　　　cssclass:'editable' 

 });

(2)用function代替URL

$('.moneypay').editable(function(value, element){
 //如果是静态页面建议使用此方式，也可以动态操作数据，执行相应的ajax请求
 //注意：此处的value是新值
　　　　return value;
},{
　　　　　type:'text',
　　　　　submit:'OK',
　　　　　cssclass:'editable' 

 });

 

 添加后，当你点击元素时就可以进行相应的编辑操作，如下图1；同时我们也可以查看下jeditable产生编辑效果是添加什么HTML代码，如图2

　　　　　　　　　　　　

   　　　　　　 图1　　　　　　　　　　　　　　　　　　图2

由于我一行中有四个输入框的编辑，在依次点击四个可编辑区域，输入框显示的会越来越大，解决方法就是自己控制生成的input的大小，css 代码：

form.editable{margin-top:-20px;}
td form.editable input{height:20px !important;width:40px !important;}
form.editable button{margin-top:42px;margin-left:-35px;}

 

2.介绍可编辑的具体实现

<1>输入错误要显示旧值，所以我是用hover事件去获取可编辑区域的值，如果用户点击会将此值作为旧值传入

$('.monthpay').hover(function(){
                
     var oldvalue = $(this).text();
     editYjgz(this,oldvalue);
 });

<2>在editYjgz方法中对元素绑定编辑事件 

function editYjgz(obj, oldvalue){
    $(obj).editable(function(value, setting){
        //获取当前行对象
        var trObj = $(this).parent().parent();
       //获取每行中第二列的 职工账号信息 
        var zgzh = $(this).parent().parent().find('td').eq(1).text();
       //获取索引行元素对象
       var colIndexObj = $(this).parent().parent().find('td').eq(0);
       //获取行索引值
       var rowIndex  = colIndexObj.text()-1;
       //单元格最终返回值
        var lableValue;
        $.ajax({
            url:'${pageContext.request.contextPath}/cardinalChangeController/update?value='+value+'&flag=1&zgzh='+zgzh+'&oldstr='+oldvalue,
            method: 'post',
            async: false,
            dataType:'json',
            success:function(data){
                
                    if(data.msg ==" " || data.mret == 0){
                        //将字符串类型转化成object
                        var json = $.parseJSON(data.aoData);
                        //var json = { "A001":"085937","A002":"于国","A008":"130929198410070317","A011":12111,"SUMA":2906.64,"A034":1453.32,"A035":1453.32,"A097":0005,"CE":"","GZ":"","RQ":""}
                        //单行更新数据， json是Object类型；rowIndex指行索引，应为数字；第三个参数指某列，设置为null或undefined则为忽略列配置；false指不重构表格
                        table.fnUpdate(json, rowIndex, null,false,false);
                        //行变化后，DT控件会将行索引变成001，因此这里直接将行索引赋值为原值
                        colIndexObj.text(rowIndex+1);
                        //设置被修改后的行变色
                        if(value != oldvalue){
                            trObj.css("background-color","#C7EDCC");
                        }
                        //重新为可编辑区绑定点击事件
                        addEditEvents();
                    }
                
                    lableValue = data.value;
                    if(data.msg != " "){
                        layer.alert(data.msg);
                    }
                }
        });     
        
        return (lableValue);
    }, {
        type:'text',
        submit:'OK',
        cssclass:'editable' 
    });
}

 代码分析：

《一》为使用fnUpdate()对mRow赋值，所以对Datatable表格（下面会简称DT）添加行索引

　实现代码：

"columnDefs" : [
           {
             "bSortable" : false,  
             "targets" : 0,  
             "width" : "30px",  
             "visible": true,
             "render" : function(data, type, row, meta) {  
                  // 显示行号  
             　　 var startIndex = meta.settings._iDisplayStart;  
             　　 return startIndex + meta.row + 1;  
            　}, 
           }
}

 　　 效果图：

　　　　　　

　　对于序号遇到的问题是，调用单行刷新后，序号值会变成001，所以在ajax成功回调中重新对其进行赋值

  《二》对于行编辑成功显示特殊颜色

　　==>判断新值value 旧值oldvalue是否相同

  《三》可编辑区域第一次编辑成功后，之后再怎么点击都没效果，原因是单行刷新，修改一次后元素没有再绑定可编辑事件方法，需重新为其绑定

//重新为可编辑区域绑定点击事件
function addEditEvents(){
     
    $('.monthpay').hover(function(){
        
        var oldvalue = $(this).text();
        editYjgz(this,oldvalue);
      });
}

  《四》重点是fnUpdate()第一个参数json, var json = $.parseJSON(data.aoData);

　　DT显示数据是JSON格式，并且json数据每列顺序、数据类型也要和前台一致 （["data":""]代表的序号列）

 后台传到前台的数据格式{ "A001":"085937","A002":"于国","A008":"130929198410070317","A011":12111,"SUMA":2906.64,"A034":1453.32,"A035":1453.32,"A097":0005,"CE":"","GZ":"","RQ":""}

 

　　　　 　　　　　　　　　

 

3.如果行内修改后不需要设置表格不刷新，则前台editable可以使用submitdata这个属性

 $('.monthpay').editable('${pageContext.request.contextPath}/cardinalChangeController/edit?flag=1', {
                type:'text',
                submit:'OK',
                //method:'POST',
                cssclass:'editable',
                submitdata: function(value, settings){
　　　　　　　　　　//此函数中的value代表修改之前的旧值
                    return {
                        oldstr: value,
                        zgzh: $(this).parent().parent().find('td').eq(0).text()        //获取账号单元格内容
                    }
                },  
                callback: function(value, setting){
                } 
                
}); 

* 后台获取新值可以直接使用参数value

public String edit(String oldstr, String value,String zgzh){

    //操作具体实现代码
    return value; //最后一定要返回一个字符串
}

 

 以上是我实现此功能的过程，如果对你有所帮助，请帮我点赞，如果有错误，请您帮我纠正，我会继续努力 （*^ _ ^*）