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

最新推荐文章于 2021-12-26 11:45:38 发布

XHHUANG1618

最新推荐文章于 2021-12-26 11:45:38 发布

阅读量1.1w

点赞数 1

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/XHHUANG1618/article/details/77884462

版权

Bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

效果图如下：

修改的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有表格参数、列参数、事件和方法，下面简单对这些做个说明

表格参数：可以简单理解为用来显示表格界面，比如：定义列名(columns)，是否隔行变色(striped)，是否启用分页(pagination)，是否启用搜索框等功能
列参数：用来定义表格中每一列的样式，它是和上面的columns一起来使用的，这里需要注意的地方是，field字段里的属性应与最终服务器所返回的json文件中的字段保持一致，按下面这个示例来说，我们的json里面应该也有"name"和"age"字段

下面是一个简单示例

columns: [{ // table所要显示的列

checkbox: true

} , {

field: "name" ,       // field的值要和后台返回的json字段保持一致

title: "姓名" ,       // 列名

sortable: true       // 排序

} , {

field: "age" ,

title: "年龄" ,

sortable: true

} ]

事件: 用来自定义用户一些操作，比如: 单击(onClickRow)某一行或者双击(onDbClickCell)某一列，选中(onCheck)或者取消选中(onUncheck)
方法: 我们之前用过了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 ) ;