前言
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);
}
});
}