bootstrap table禁止部分行多选
别俊誉
1.html代码：
<body>
<div class="wrapper" style="overflow:visible">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper page-content-wrapper">
<!-- Content Header (Page header) -->
<div class="row pad">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<div class="row">
<div class="col-sm-12" align="right">
<button class="btn btn-primary" id="addBtn"><i class="fa fa-plus"></i> 添加置顶</button>
<button class="btn btn-default" id="delBtn"><i class="fa fa-minus"></i> 删除置顶</button>
</div>
</div>
</div>
<div class="box-body">
<table id="dataList" class="table table-bordered table-hover" data-response-handler="responseHandler">
<thead>
<th></th>
<th>产品名称</th>
<th>优先级</th>
<th>产品价格</th>
<th>状态</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>2.JS代码：
$(function(){
var serviceTop = {
$dataList : $('#dataList'),
$delBtn : $('#delBtn'),
$addBtn : $('#addBtn'),
bootTable : void 0,
addURL : 'serviceTop/add',
deleteURL : 'classification/delete',
init : function() {
this.bindEvents();
/**
* 构建表格数据
*/
this.bootTable = $.GLOBAL.utils.loadBootTable({
table : this.$dataList,
idField : '',
url : 'serviceTop/findServiceTopList',
sidePagination : 'server',
pageSize : 10,
pagination : true,
currentPage : 1,
queryAddParams : function() {
return {}
},
columns : [{
field: 'checkStatus', //给多选框赋一个field值为“checkStatus”用于更改选择状态!!!!
valign : 'middle',
checkbox: true,
formatter:function(value,row,index){
console.log(row.topstatus);
if(row.topstatus === 1){
return {
disabled : false,
}
}else{
return {
disabled : true,
}
}
return value;
}
},{
field : 'productName',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
var handleField = '<p class="form-control-static" style="font-family:Microsoft yahei;">' + value + '</p>';
return handleField;
}
},{
field : 'priority',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
var handleField = '<p class="form-control-static" style="font-family:Microsoft yahei;">' + value + '</p>';
return handleField;
}
}, {
field : 'price',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
var handleField = '<p class="form-control-static" style="font-family:Microsoft yahei;">' + value + '</p>';
return handleField;
}
},{
field : 'topstatus',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
if(row.topstatus === 1){
var handleField = '<p class="form-control-static" style="font-family:Microsoft yahei;">未置顶</p>';
}else{
var handleField = '<p class="form-control-static" style="font-family:Microsoft yahei;">已置顶</p>';
}
return handleField;
}
},{
field : 'id',
align : 'center',
valign : 'middle',
class : 'title-style',
formatter:function(value,row,index){
if(row.topstatus === 1){
var handleField = '<a title="置顶" class="upItem" data-id="'+row.id+'">置顶</a> ';
}else{
var handleField = '<a title="取消置顶" class="downItem" data-id="'+row.id+'">取消置顶</a> ';
}
return handleField;
}
}
]
});
//console.log($("input[type='checkbox']").length-1); //每一页input的个数
},
bindEvents : function() {
var that = this;
/**
* 添加
*/
that.$addBtn.on('click',function(){
window.location.href=urlPrefix + that.addURL;//GET请求
});
/**
* 置顶
*/
that.$dataList.on('click', '.upItem', function() {
var id = this.getAttribute('data-id');
that.dialog = BootstrapDialog.show({
title: '置顶',
type : BootstrapDialog.TYPE_WARNING,
message: message('确认将该产品置顶吗？'),
draggable: true,
size : BootstrapDialog.SIZE_SMALL,
buttons: [{
label: '确认置顶',
cssClass: 'btn-primary saveAddEditTpl',
action: function(dialog) {
dialog.close();
that.upOrDown(that,id);
}
}, {
label: '取消',
action: function(dialog) {
dialog.close();
}
}]
});
});
/**
* 取消置顶
*/
that.$dataList.on('click', '.downItem', function() {
var id = this.getAttribute('data-id');
that.dialog = BootstrapDialog.show({
title: '取消置顶',
type : BootstrapDialog.TYPE_WARNING,
message: message('确认将该产品取消置顶吗？'),
draggable: true,
size : BootstrapDialog.SIZE_SMALL,
buttons: [{
label: '确认取消置顶',
cssClass: 'btn-primary saveAddEditTpl',
action: function(dialog) {
dialog.close();
that.upOrDown(that,id);
}
},{
label: '取消',
action: function(dialog) {
dialog.close();
}
}]
});
});
/**
* 删除
*/
that.$dataList.on('click', '#delItem', function() {
var arrObject = $('#dataList').bootstrapTable('getSelections');
var arr = [];
for(var i=0 ;i<arrObject.length;i++){
arr.push(arrObject[i].id);
}
console.log(arr);//选中的数组
that.dialog = BootstrapDialog.show({
title: '删除置顶',
type : BootstrapDialog.TYPE_WARNING,
message: message('确认删除该置顶板块吗？'),
draggable: true,
size : BootstrapDialog.SIZE_SMALL,
buttons: [{
label: '确认删除',
cssClass: 'btn-primary saveAddEditTpl',
action: function(dialog) {
dialog.close();
that.doRemove(that, arr);
}
}, {
label: '取消',
action: function(dialog) {
dialog.close();
}
}]
});
});
},
// upOrDown : function(that, id) {
// $.ajax(
// {
// type : 'GET',
// url : urlPrefix + that.operateURL.template({id: id}),
// dataType : 'json',
// contentType : 'application/json',
// })
// .done(function(result) {
// if(result.code == "ACK") {
// $(window).loadingInfo({
// type : "success",
// text: message("admin.message.success"),
// callBack : function() {
// //@TODO 删除行
// that.dialog.close();
// that.bootTable.refresh();
// }
// });
// }
// })
// .fail(function(result) {
// $(window).loadingInfo("error", message("admin.message.error"));
// });
// },
doRemove : function(that, arr) {
$.ajax(
{
type : 'POST',
url : urlPrefix + that.deleteURL,
dataType : 'json',
contentType : 'application/json',
data : arr
})
.done(function(result) {
if(result.code == "ACK") {//成功
$(window).loadingInfo({
type : "success",
text: message("admin.message.success"),
callBack : function() {
//@TODO 删除置顶
that.dialog.close();
that.bootTable.refresh();
}
});
}
})
.fail(function(result) {
$(window).loadingInfo("error", message("admin.message.error"));
});
}
};
serviceTop.init();
});
类似资料：