Effect picture:
Select all, cancel the selection process step diagram:
Code:
1. Button control
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reportall()">
上报权限全选
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reviewall()">
审核权限全选
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="saveAuthority()">
保存权限
</button>
2. Data table style
function yuangrid(data) {
var table = layui.table;
//第2个实例
table.render({
id: 'yuandatagrid',
elem: '#yuandatagrid',
height: "full-70",
size: 'sm',
filter:{
bottom:false
},
page: true,
limit:2000,
limits: [1,15, 30, 50,100,200,500,5000,10000,20000,50000],
cols: [
[ //表头
// {type: 'checkbox' },bzclassname
{
field: 'ID',title: 'id',width: 300,sortable: true,align:'center',halign: 'center'},
{
field: 'submitright', title: '上报权限', width: 100, sortable: true, align:'left', halign: 'center',
templet:function(d){
if(d.submitright==0){
return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\" name=\"submitright\" id=\""+d.ID+"_submitright\" />";
}else {
return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\" name=\"submitright\" id=\""+d.ID+"_submitright\" checked />";
}
}},
{
field: 'authright', title: '审核权限', width: 100, sortable: true, align:'left', halign: 'center',
templet:function(d){
if(d.authright==0){
return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\" name=\"authright\" id=\""+d.ID+"_authright\" />";
}else {
return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\" name=\"authright\" id=\""+d.ID+"_authright\" checked />";
}
}},
// {field: 'right', title: '操作', width: 60, align: 'center', templet: function (d) {
// return '<a style="color: #409EFF;" lay-event="del">删除</a>'
// }
// }
]
],
data: data ? data : [],// 数据表格数据传递
done: function () {
layui.soulTable.render(this);
// $("[data-field='ID']").css('display', 'none');
// $("[data-field='typename']").css('display', 'none');
}
});
//监听工具条
// table.on('tool(yuantool)', function (obj) {
// var data = obj.data;
// var unitcode = data.unitcode;
// var userid = data.userid;
// if (obj.event === 'del') {
// layer.confirm('确定删除么?', function (index) {
// var postdata={userid:userid,unitcode:unitcode};
// $.getJSON("//", postdata, function (obj) {
// if (obj.success) {
// dLong.layerMsg(obj.msg)
// yuandata();
// } else {
// dLong.layerMsg(obj.msg)
// yuandata();
// }
// layer.close(index);
// });
// });
// }
// });
}
3. Check box select all and deselect all
// 上报权限全选
function reportall() {
if(selUserId==''){
dLong.layerMsg("请选择用户!");
return;
}
var yrows = layui.table.cache["yuandatagrid"]
var flag=false;
for(var i=0;i<yrows.length;i++){
var idstr=yrows[i].ID+"_submitright";
if(!$("#"+idstr).is(":checked")){
flag=true;// 如果没有选中，则设置为选中状态
}
}
for(var i=0;i<yrows.length;i++){
var idstr=yrows[i].ID+"_submitright";
// $("#"+idstr).attr("checked", flag);
$("#"+idstr)[0].checked = flag;
}
layui.form.render("checkbox");
layui.form.render();
}
// 审核权限全选
function reviewall() {
if(selUserId==''){
dLong.layerMsg("请选择用户!");
return;
}
var yrows = layui.table.cache["yuandatagrid"]
var flag=false;
for(var i=0;i<yrows.length;i++){
var idstr=yrows[i].ID+"_authright";
if(!$("#"+idstr).is(":checked")){
flag=true;
}
}
for(var i=0;i<yrows.length;i++){
var idstr=yrows[i].ID+"_authright";
// $("#"+idstr).attr("checked", flag);
$("#"+idstr)[0].checked = flag;
}
layui.form.render("");
layui.form.render();
}
4. Save permissions
function saveAuthority() {
if(selUserId==''){
dLong.layerMsg("请选择用户!");
return;
}
var yrows = layui.table.cache["yuandatagrid"]
var rows=[];
//循环行
for(var i=0;i<yrows.length;i++){
var row=yrows[i];
var idauthright="#"+yrows[i].ID+"_authright";
var idsubmitright="#"+yrows[i].ID+"_submitright";
//是否选中
var authright ="";var submitright="";
// 转换为值状态，传入后台
if($(idauthright).prop('checked')==true){
authright='1'
}else {
authright='0'
}
if($(idsubmitright).prop('checked')==true){
submitright='1'
}else {
submitright='0'
}
rows.push( {
ID:yrows[i].ID.substring(0,18)+selUserId.substring(0,18),
USERID:selUserId,
USERNAME:selUserName,
BZNAME:row.bzname,
BZCODE:row.bzcode,
AUTHRIGHT:authright,
SUBMITRIGHT:submitright
});
}
var postdata ={
ID: rows
}
$.postajax("//后台地址",postdata,function(data){
if (data.success) {
dLong.layerMsg("操作成功");
}else{
dLong.layerMsg(data.resultdata[0].errorinfo);
}
},true);
}