bootstrap- X-editable回调之坑

前言

1、X-editable介绍：
X-editable是一个可支持行内在线编辑的一个插件，用这个插件可实现直接点页面行就进行编辑的效果，它和bootstrap-editable插件很像，用法相似，不要搞混。
2、运用场景：
在线编辑后，获取输入的值 自动将全部大写字母转成小写字母更新到数据库，并更新回页面。

1、开始及用法

可直接参考官网，官网的例子很详细，这里不再介绍，下面看具体场景下如如实现。

2、遇到问题

在获取编辑后的值后，将大字字母全部转小写字母 ，并更新到数据库，成功后刷新到页面，但刷新到页面这里一直没法实现。

3、解决

这是一spring boot thymeleaf模版的页面，

<tr th:each="each,eachStat : ${list}">                                         
 <td ><span class="editable-text" th:text="${each.name}"  id="name" th:attr="data-pk=${each.id}" data-url="/view/update" ></span></td> 
 <td ><span class="editable-text" th:text="${each.phone}"  id="phone" th:attr="data-pk=${each.id}" data-url="/view/update" ></span></td> 
</tr>

js:

//初始化
$('.editable-text').editable({
       type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等
       title: "编辑",              //编辑框的标题
       disabled: false,             //是否禁用编辑
       emptytext: "点击添加",        //空值的默认文本
       mode: "popup", //编辑框的模式：支持popup和inline两种模式，默认是popup
       validate: function (value) { //字段验证
           if (!$.trim(value)) {
               return '不能为空';
           }
           value = $.trim(value)
           var that = $(this)
           switch(that.attr("id")){
               case "name": if(value.length>60) return "name too long ,only 20"; break;
               case "phone":
                   var reg = /^1[3|7|9|8|5|4|][0-9]\d{4,8}$/;
                   if(!reg.test(value)){
                       return "手机格式不正确";
                   }
                   break;
           }
       }
   });

data-url参数直接在<span>上就指定了/view/update，在validate方法校验成功后就会调用后台，转到后台方法的参数名固定是name,value,pk，name 是span上设定的id,value就是文本编辑输入的值，pk也是span上设定的pk属性。一般会直接更新用户输入的值，但如果需要处理（比如将输入的大写转成小写），那么需要再定义一个params方法，这个方法是editable请求ajax前执行的方法

$('.editable-text').editable({
  //...
  validate: function (value) { //字段验证
     //...
  },
  params: function(params) {
      //params的格式是json{name:'',value:'',pk:''}
      params.value = $.trim(params.value)
      if(params.name =='name'){
          //将大写转小写
          params.value = tolower(params.value)
      }
      return params;
  }

//这时，后台接收到的value参数就是转成小写交去掉空格的值。但如何将后台更新完成的值刷新到页面，刚开始加了一个success:function()方法的回调，可以取到后台更新数据，但前端页面无法刷新。

//无法更新
$('.editable-text').editable({
  success:function(result){
     $(this).text(result.data.newValue);
 }

单独加入url方法，去掉span上的data-url属性，成功。

$('.editable-text').editable({
    url:function(params){
        return updateValue(params,$(this))
    }
});

function updateValue(params,ele){
        $.ajax({
            type: "post",
            url: "/springboot/editvalue",
            data: {name:params.name,value:params.value,pk:params.pk},
            dataType: 'json',
            success: function (result) {
                console.log(result)
                //更新editable内存对象值，如果不加，那么再次点编辑的时候，输入框显示的值不是转小写字母的值，而是最初输入的原值
                ele.editable('setValue',result.newValue);
                //更新页面上的显示值
                ele.html(result.newValue);
            },
            error: function () {
                Ewin.alert('服务器繁忙，请稍后重试');
            },
            complete: function () {
            }
        });

    }

5、方法小结

设置文本框方法：

$("#username").editable('setValue', value)  

清空文本框方法

$("#username").editable('setValue', null).removeClass('editable-unsaved');  

获取文本框 方法

$("#username").editable('setValue', null).removeClass('editable-unsaved');  

请交请求前改变文本框值

$('.editable-text').editable({
  params: function(params) {
      //params的格式是json{name:'',value:'',pk:''}
      //可以改变提交到post请求的值，或url:function(params)
中也可以改变      
  }

提交到post后，回调更新页面上显示及文本框中的值

$('.editable-text').editable({
  url: function(params) {
      //params的格式是json{name:'',value:'',pk:''}
      return $.ajax({
        success: function (result) {
            //回调更新文件框值
            that.editable('setValue',result.data.newValue);
            //更新页面上的显示值
            that.text(result.data.newValue);
        }
    });
  }