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

}]

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

}

});

}