欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui 多选框根据条件限定选中个数

程序员文章站 2022-07-13 23:02:57
...

layui table封装
//layui table 请求封装 带分页
RenderTable: function(element, params, title, toolbar, cols, callback, other, autowidth, totalRow, height) {
var that = this;
var url = other ? other : that.URL.http;
var geturl = “”;
for (var key in params) {
geturl += key + ‘=’ + params[key] + ‘&’;
}
var newurl = url + ‘?’ + geturl;
newurl = newurl.substring(0, newurl.length - 1);
console.log(newurl)
//table表格渲染
layui.use(‘table’, function() {
var table = layui.table;
table.render({
elem: element,
url: newurl,
toolbar: toolbar ? toolbar : “”,
title: title ? title : “”,
cellMinWidth: autowidth ? autowidth : “”,
totalRow: totalRow ? true : false,
height: height ? ‘full-’ + parseInt(height) : ‘’,
cols: cols,
page: false
});
if (callback) {
callback(table);
}
});
},
//数据渲染表格 不带分页
DataTable: function(element, params, title, toolbar, cols, callback, other, autowidth, totalRow, height) {
var that = this;
that.load(’’, params, function(res) {
if (res.code == 0) {
var list = res.data;
var msg = parseInt(res.message);
var pages = res.page;
//table表格渲染
layui.use(‘table’, function() {
var table = layui.table;
table.render({
elem: element,
data: list,
toolbar: toolbar ? toolbar : “”,
title: title ? title : “”,
cellMinWidth: autowidth ? autowidth : “”,
totalRow: totalRow ? true : false,
height: height ? ‘full-’ + parseInt(height) : ‘’,
limit: msg > 50 ? msg : 50,
cols: cols
});
if (callback) {
callback(table, msg, pages);
}
});
}
}, other)
},

调用方法
html

<div class="main-content">
			<table class="layui-hide" id="test" lay-filter="table"></table>
			<div id="pagenuns"></div>
		</div>

js

	shop.DataTable("#test", {//请求参数
			token: shop.token,
			sFkey :that.OD.key,
			sFcode :that.OD.code,
			sFmanage :that.OD.manage,
			sFstatus:"",
			sFpageno :that.OD.currPage,
			sFpageSize :that.OD.pageSize,
		}, "管理数据", '', [
			[{type:'checkbox'},{
					field: 'name',
					title: '单位名称',
					sort: true
				}, {
					field: 'business',
			
					title: '主营业务'
				}, {
					field: 'manager',
			
					title: '负责人',
					sort: true
				}, {
					field: 'tele',
					title: '负责人电话',
				}, {
					field: 'bureau',
					title: '*管辖单位',
				}, 
			]
		], function(table, msg) {
			that.OD.total = msg;
			console.log(that.OD.total);
			$('.layui-table-header .laytable-cell-checkbox input').attr('disabled','disabled');
			$('.layui-table-header .laytable-cell-checkbox div').hide();
			//分页器
			layui.use(['laypage', 'layer'], function() {
				var laypage = layui.laypage,
					layer = layui.layer;
				// 分页
				laypage.render({
					elem: 'pagenuns',
					count: parseInt(that.OD.total),
					curr: that.OD.currPage,
					limit: that.OD.pageSize,
					layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
					jump: function(obj, first) {
						console.log(obj)
						that.OD.currPage = obj.curr;
						that.OD.pageSize = obj.limit;
						console.log(that.OD.currPage);
						if (!first) {
							that.Third();
						}
					}
				});
				table.on('checkbox(table)', function(obj){
					console.log(obj); //当前对象
					var checked=obj.checked;
					var id=obj.data.Fid;
					if(checked){
						if(that.OD.consList.length>=parseInt(that.OD.limit)){//调用数量限制
							//$(obj.tr).find('td div.laytable-cell-checkbox input[type="checkbox"]').prop('disable',true)
							$(obj.tr).find('td div.laytable-cell-checkbox div.layui-form-checkbox').removeClass('layui-form-checked')//取消选中样式
						   $(obj.tr).find('td div.laytable-cell-checkbox div.layui-form-checkbox').click();//再次点击取消选中
							$(obj.tr).find('td div.laytable-cell-checkbox div.layui-form-checkbox ').addClass('layui-btn-disabled')//禁止选择样式
							window.top.layer.msg("最多可选"+that.OD.limit+",您已达到上限!",{time:1000});
						}else{
							that.OD.consList.push({
								id:obj.data.Fid,
								name:obj.data.Fname
							});
						}
					}else{
						shop.RemoveAttr(that.OD.consList,"id", id)
					}
				    console.log(that.OD.consList);
				});
			})
		},"","","",height);
相关标签: layui