• 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{ 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:
     NameTypeAttributesDefaultDescription
    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; //最后一定要返回一个字符串
    }

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

  • 相关阅读:
    HTTP POST GET 本质区别详解
    追求代码质量: 监视圈复杂度
    【置顶】用Eclipse开发Android应用程序索引贴
    Android访问WCF服务(上篇)服务端开发
    做一个T型技术人才
    创新创业大讲堂第一讲
    河海嵌芯FTP服务器开通运行
    嵌芯队团队邮箱以及邮件订阅功能使用说明
    基于视频的公共事件检测分析系统
    感知交通基于视频的交通流特征参数监测及交通综合信息服务系统
  • 原文地址:https://www.cnblogs.com/alvin-perfect/p/5916056.html
Copyright © 2020-2023  润新知