http://vitalets.github.io/x-editable/
可以跟bootstrap或者跟jquery整合,蛮好用的。
如果跟dataTables结合起来用,相当于是extJs了,很不错。 下面是一个结合使用的例子:
<script src="/assets/js/bootstrap-editable.min.js"></script>
<link href="/assets/css/bootstrap-editable.css" rel="stylesheet">
....
<script>
//某列的写法
{ "data": "firstName",
"name": "firstName",
"render": function ( data, type, full, meta ) {
var template = '<a href="#" class="firstNameEditable editable editable-click" data-type="text" data-pk="{1}" data-name="firstName" data-url="/updateManAjax" data-title="New First Name">{0}</a>';
var html = template.format(full.firstName, full.manId); //作者在这里使用了模板引擎,你自己直接拼字符串也可以
return html ;
},
...
},
...
//在dataTable的回调中注册editable组件。你必须写在dataTable的相关回调里面,只有等dataTable渲染完后,前面定义的editable dom结构才能被系统识别,也才能注册为editable组件
"drawCallback": function( settings ) {
$(".firstNameEditable").each(function(i,dom){
$(dom).editable({
success:function(response, newValue) {
if(response.failed){//是不是failed取决于你的ajax服务的json结构。
return response.error;
}
},
error:function(response, newValue) {
console.log(response);
return "网络或服务端错误";
}
});
});
},
</script>