bootstrap table 中自定义修改和删除操作

而修改和删除则稍微麻烦一点,需要先获取到所选的行,然后再对数据进行更新。

效果图如下:


修改的html部分模态框和新增的一样,所以这里就不贴出来了,主要还是讲解js部分。 关于如何获取所选择的行中的数据,我们是通过 getSelections方法来实现的,它所返回所选择行中的数据(可以是多行);当未选择行时,获取的是空数组。后面会讲如何防止获取空数组

核心代码如下:
var   rows =   $ ( "#data_info" ). bootstrapTable ( "getSelections" ) ;
var   row = rows[ 0 ] ;

之后就可以通过row.id、row.interface_name等操作来获取里面的数据了

详细js代码如下(主要作用,将所选择行中数据展示到模态框字段中):
$( "#btn_edit"). on( "click" ,   function  (){
           // 弹出模态框
$( "#modModal"). modal({
keyboard:   true
}) ;

var  rows =   $( "#data_info"). bootstrapTable( "getSelections") ;    // getSelections用来获取所选中的行
var  row = rows[ 0] ;     // 选中的第一行

$( "#mod_id_group"). attr( "hidden" ,   true) ;   // 主键不显示
//$("#mod_id").attr("readonly", true);
$( "#mod_id"). val(row.id) ;
$( "#interface_name"). val(row. interface_name) ;

$( "#modify_port"). val(row.port) ;
$( "#modify_URL"). val(row. URL) ;

$( "#modify_res_status"). val(row. res_status) ;
$( "#modify_alarm_interval"). val(row. alarm_interval) ;
$( "#modify_fail_times"). val(row. fail_times) ;

$( "#modify_email"). val(row. contacts_email. split( "<br/>"). join( ",")) ;
$( "#modify_phone"). val(row. contacts_phone. split( "<br/>"). join( ",")) ;
if(row. use_flag  ==   "启用")
$( "#mod_use_flag"). val( 'True') ;
else
$( "#mod_use_flag"). val( 'False') ;
}) ;

修改后提交的js代码和新增的类似,如下
// 当点击【保存】按钮后,将表单中的数据提交到后台
$ ( "#btn_mod_submit" ). on ( "click" ,   function   (){

$ . ajax ({
type :   "post" ,
url :   "/dbmonitor/bigdataconfig/modify_interface/" ,
data :   $ ( "#add_form_modal" ). serializeArray () ,                 // 收集表单中的数据
dataType :   "text" ,
success :   function   (d){
show_alert ( "操作结果" ,   JSON. parse (d).result) ;
$ . getJSON ( "/dbmonitor/bigdataconfig/bigdata_info/" ,   function (data){
initDataTable ( "destroy" ,   data) ;           // 接收到后台返回的数据后,重新渲染table,具体怎么初始化table见上一章
}) ;
}
}) ;
}) ;

最后,还有一个删除的操作。其实删除的操作也是通过getSelections方法来获取所选择的行,再把获取的id传给后台
核心代码如下:
var slt = $("#data_info").bootstrapTable("getSelections");
var slt_ids = $.map(slt, function (row){ return row.id; });   // 这行代码挺有意思的,如果用户选择多个记录的话,会返回多个id值给后台

详细代码如下:
$("#btn_delete").on("click", function (){
var slt = $("#data_info").bootstrapTable("getSelections");
var slt_ids = $.map(slt, function (row){ return row.id; }); // 提取选中行的id

$.ajax({
type: "post",
url: "/dbmonitor/bigdataconfig/del_interface/",
data: {ids: JSON.stringify(slt_ids)},
dataType: "text",
success: function (d){
show_alert("操作结果", JSON.parse(d).result);
// $("#data_info").bootstrapTable("remove", {field: "id", values: slt_ids, offset: 0});
$.getJSON("/dbmonitor/bigdataconfig/bigdata_info/", function(data){
initDataTable("destroy", data);
});
}
});
});

好了,新增、修改和删除部分都介绍完了,是不是很简单。

最后还有一个小点没有提到,就是如何确保在调用 getSelections方法时所选的不是空数组。

我们在查帮助文档时发现,table有表格参数、列参数、事件和方法,下面简单对这些做个说明 
  1. 表格参数: 可以简单理解为用来显示表格界面,比如:定义列名(columns),是否隔行变色(striped),是否启用分页(pagination),是否启用搜索框等功能
  2. 列参数: 用来定义表格中每一列的样式,它是和上面的columns一起来使用的,这里需要注意的地方是,field字段里的属性应与最终服务器所返回的json文件中的字段保持一致,按下面这个示例来说,我们的json里面应该也有"name"和"age"字段
     下面是一个简单示例
columns: [{                            // table所要显示的列
checkbox:   true
} ,  {
field:   "name" ,               //  field的值要和后台返回的json字段保持一致
title:   "姓名" ,               // 列名
sortable:   true               // 排序
} ,  {
field:   "age" ,
title:   "年龄" ,
sortable:   true
} ]
  1. 事件:  用来自定义用户一些操作,比如: 单击(onClickRow)某一行或者双击(onDbClickCell)某一列,选中(onCheck)或者取消选中(onUncheck)   
  2. 方法:   我们之前用过了getSelections来返回所选的行,后面还会介绍其它好用的方法

回到正题,我们要想通过getSelections方法获取的不是空数组,必然要对getSelections方法的使用来做一些限定。我们从上面的代码也可以看到,getSelections方法的调用都是通过点击【修改】或【删除】按钮来控制的,那我们只要控制好这两个按钮的“启用”和“禁用”就可以了。

我们可以在initDataTable的js代码里通过onCheck、onUncheck、onCheckAll、onUncheckAll和onLoadSuccess来完成对【修改】或【删除】按钮的控制,这些方法都属于table里的事件。

修改后的代码如下:
function   initDataTable(op ,  data){
$( "#data_info"). bootstrapTable(op). bootstrapTable({
method:   "get" ,          //  请求方式有get和post两种,一般get就行了
toolbar:   "#toolbar" ,          //  指明自定义的toolbar,它是一个jQuery选择器,使用场景:比如,自定义新增、修改、删除等操作
striped:   true ,                    //  隔行变色
pagination:   true ,               // 分页
sidePagination:   "client" ,     // 分页的方式,客户端分页和服务器端分页,两者的区别: 客户端分页是一次性将数据返回后展现, 服务器端分页是每次点击下一页后才会从后台取数据
pageNumber:   1 ,     // 首页页码
cache: false ,          // 是否启用缓存
search:   true ,      // 搜索框
sortable:   true ,          // 排序
sortOrder:   "desc" ,     // 设置排序的方式
searchOnEnterKey:   true ,          // 当搜索框启用后,再开启这个设置,表示按回车后触发搜索;否则自动触发搜索
showColumns:   true ,          // 显示内容列下拉框
showRefresh:   true ,          // 显示刷新按钮
showToggle:   true ,          // 显示切换试图按钮
uniqueId:   "id" ,          // 指示每一行的唯一标识符,一般使用id来做为标识,当使用table的事件时,就可以捕获这个值
pageSize:   10 ,              // 每页显示10条信息
pageList: [ 10 ,   25 ,   50 ,   100] ,     // 设置可供选择的页面数据条数
columns: [{                            // table所要显示的列
checkbox:   true
} ,  {
field:   "name" ,               //  field的值要和后台返回的json字段保持一致
title:   "Name" ,               // 列名
sortable:   true               // 排序
} ,  {
field:   "comments" ,
title:   "描述" ,
sortable:   true
} ,   {
field:   "contacts_email" ,
title:   "报警联系人邮箱" ,
// sortable: true
} ,  {
field:   "contacts_phone" ,
title:   "报警联系人电话" ,
// sortable: true
} {
field:   "IP" ,
title:   "IP" ,
// sortable: true
} {
field:   "create_time" ,
title:   "创建时间" ,
sortable:   true
} ,  {
field:   "update_time" ,
title:   "更新时间" ,
sortable:   true
}, {
field:   "use_flag" ,
title:   "更新状态" ,
sortable:   true
}] ,
data:   formatData(data) ,   // 用于接收后台返回的json数据
"onCheck" :   function   (){
$ ( "#btn_edit" ). prop ( 'disabled' ,   $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length   !=   1 ) ;
$ ( "#btn_delete" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length ) ;
} ,
"onUncheck" :   function   (){
$ ( "#btn_edit" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length ) ;
$ ( "#btn_delete" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length ) ;
} ,
"onCheckAll" :   function   (){
$ ( "#btn_edit" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length ) ;
$ ( "#btn_delete" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length ) ;
} ,
"onUncheckAll" :   function   (){
$ ( "#btn_edit" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length ) ;
$ ( "#btn_delete" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getAllSelections' ). length ) ;
} ,
"onLoadSuccess" :   function   (){
$ ( "#btn_edit,#btn_delete" ). prop ( 'disabled' ,   ! $ ( '#data_info' ). bootstrapTable ( 'getSelections' ). length ) ;
}
}) ;
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值