bootstrap table禁止部分行多选

最新推荐文章于 2024-05-15 16:52:01 发布

唐小亭

最新推荐文章于 2024-05-15 16:52:01 发布

阅读量4.9k

点赞数 1

本文链接：https://blog.csdn.net/tt18473481961/article/details/81666285

版权

bootstrap table 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

checkbox

1 篇文章 0 订阅

订阅专栏

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>&nbsp;';
						}else{
							var handleField = '<a title="取消置顶" class="downItem" data-id="'+row.id+'">取消置顶</a>&nbsp;';
						}
						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();
});