后台管理数据的话，常常会用到编辑和删除改行数据。这里基于datatables，做一组demo。
- Table Demo
<table id="table_comments_log" class="table table-striped table-bordered table-hover table-condensed" style="width:100%;">
<thead>
<tr>
<th style="text-align: center;">ID</th>
<th style="text-align: center;">员工编号</th>
<th style="text-align: center;">微信昵称</th>
<th style="text-align: center;">员工姓名</th>
<th style="text-align: center;">所在门店编号</th>
<th style="text-align: center;">所在门店名称</th>
<th style="text-align: center;">客户微信头像/昵称</th>
<th style="text-align: center;">评价内容</th>
<th style="text-align: center;">评价星级</th>
<th style="text-align: center;">状态</th>
<!-- <th style="text-align: center;">创建时间</th> -->
<th style="text-align: center;">更新时间</th>
<th style="text-align: center;">备注</th>
<th style="text-align: center;">操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
<!-- <tr class="kaensoft_tr">
</tr> -->
</table>
- 数据的渲染方法 ( 包括编辑和删除按钮的集成 )
// 初始化表格
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: "<?php echo site_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 '<img class="wxhead" width="30px" src="' +
data + '"><span>' + full.employee_wx_nickname + '</span>';
}
},
{ data : 'employee_realname'},
{ data : 'employee_store_id'},
{ data : 'employee_store_name'},
{ data : 'customer_wx_headimg',
render:function( data, type, full, meta ){
return '<img class="wxhead" width="30px" src="' +
data + '"><span>' + full.customer_wx_nickname + '</span>';
}
},
{ 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 += '<a type="button" id="editrow" class="btn btn-info btn-block btn-sm editrows" href="#" >编辑</a>';
html += '<a type="button" id="delrow" class="btn btn-danger btn-block btn-sm" href="#" >删除</a>'
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");
});
- 删除的模态框（拷自百度）
<!-- 删除的模态框 -->
<div class="modal fade" id="delcfmModel">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title btn-danger">提示信息</h4>
</div>
<div class="modal-body">
<p>确定删除后,该条数据将不可恢复,是否真的要继续？</p>
</div>
<div class="modal-footer">
<input type="hidden" id="url"/>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a id="delSubmit" class="btn btn-success" data-dismiss="modal">确定</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
- 删除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: "<?php echo site_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");
});
})
还不是美滋滋
网友评论