后台管理数据的话，常常会用到编辑和删除改行数据。这里基于datatables，做一组demo。
- Table Demo
ID
员工编号
微信昵称
员工姓名
所在门店编号
所在门店名称
客户微信头像/昵称
评价内容
评价星级
状态
更新时间
备注
操作
- 数据的渲染方法 ( 包括编辑和删除按钮的集成 )
// 初始化表格
var tables_comments = jQuery('#table_comments_log').DataTable({
// dom:"lrtip", // 隐藏掉自己的搜索框
order: [[ 10, "desc" ]],
serverSide:true,
processing:true, // 打开信息提醒
language: {
url: 'http://static.wxkydd.com/libs/datatable/1.10.11/Chinese.json'
},
ajax: {
type:'GET',
url: "/xk-api/hk/v1/reward/back/comment",
// dataSrc:'data', 指定服务端返回的数据源
// success:function(res){ 调服务端返回的数据源
// console.log(res);
// }
},
// 这里为表格绑定数据
"columns": [
{ data : 'id'},
{ data : 'employee_display_name'},
{ data : 'employee_wx_headimg', // 对服务端返回的数据进行修改（e.g. 1男 2 女）
render:function( data, type, full, meta ){
return '
' + full.employee_wx_nickname + '';
}
},
{ data : 'employee_realname'},
{ data : 'employee_store_id'},
{ data : 'employee_store_name'},
{ data : 'customer_wx_headimg',
render:function( data, type, full, meta ){
return '' + full.customer_wx_nickname + '';
}
},
{ data : 'comment_content',
render: function(data,type){
// if( data.length > 10){
// return data.substr(0,10)+ "......";
// }else{
return data;
// }
}
},
{ data : 'serve_stars'},
{ data : 'status',
render: function(data,type){
if(data == 0){
return '隐藏';
}else{
return '显示';
}
}
},
// { data : 'create_date'},
{ data : 'update_date'},
{ data : 'remark'},
{ data : null // 留空给 操作一行用
}
],
columnDefs:[{ // http://datatables.club/reference/option/columnDefs.html
targets: 12,
render: function (data, type, row, meta) {
var html = '';
html += '编辑';
html += '删除'
return html;
}
},
{ "orderable": false, "targets": 12 },
]
})
// 这个是多过滤
- 删除的模态框隐藏/显示的控制
// 顾客评价数据删除
jQuery('#table_comments_log tbody').on( 'click', 'a#delrow', function () {
var data = tables_comments.row( jQuery(this).parents('tr') ).data();
var id = data.id;
jQuery('#url').val( id );
jQuery("#delcfmModel").modal("show");
});
- 删除的模态框（拷自百度）
- 删除api实现
jQuery('#delSubmit').click(function(){
// 拿到隐藏的input的id值
var id = jQuery('#url').val();
jQuery.ajax({
// processing:true, // 打开信息提醒
url: "Your delete api,
type: 'DELETE',
dataType: 'json',
data: {
},
// success:function(res){
// console.log(res);
// }
})
.done(function(data) {
// console.log(data.items)
if (data.code == 0) {
// alert("删除成功")
// 重绘
tables_comments.ajax.reload();
};
})
.fail(function() {
alert("error");
});
})
删除做完了，修改就都知道了吧，贴下删除的接口传参。
//顾客的评价修改页面
jQuery('#comment-edit-sure').click(function(){
// 获取用户输入的信息
var id = jQuery('#comment-id').val();
var comment_status = (jQuery('#comment-status').val() == "显示")?'1':'0';
var comment_remark = jQuery('#comment-remark').val();
// console.log( id+comment_status+comment_remark )
jQuery.ajax({
url: "/xk-api/hk/v1/reward/back/" + id,
type: 'PUT',
dataType: 'json',
data: {
// id:id, Your data
status:comment_status,
remark:comment_remark
},
})
.done(function(data) {
// console.log(data)
jQuery("#myModal").modal("hide");
if (data.items != false) {
tables_comments.ajax.reload();
}else{
//console.log(data)
};
})
.fail(function() {
alert("error");
});
})
还不是美滋滋