而修改和删除则稍微麻烦一点，需要先获取到所选的行，然后再对数据进行更新。
效果图如下：
修改的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 ) ;
} ,"onLoadSuccess" : function (){
$ ( "#btn_edit,#btn_delete" ). prop ( 'disabled' , ! $ ( '#data_info' ). bootstrapTable ( 'getSelections' ). length ) ;
}
}) ;
}
3539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
