<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<style>
.layui-form-item{
margin-bottom:0px;
}
.layui-form-checkbox span{
width:112px;
}
.layui-form-label{
width:112px;
}
</style>
<body style="background:#000;">
<div>
<div> </div>
<div id="tabs">
<div class="col-sm-12 well" style="padding:6px;">
***<form id="pForm" action="">***
<div>
<label>开始时间：</label>
<div>
<input type="text" name="pSt" id="pSt">
</div>
<label>开始时间：</label>
<div>
<input type="text" name="pEt" id="pEt">
</div>
<div>
<a id="btnSearch" class="layui-btn layui-btn-rounded"><i
class="fa fa-search"></i> 搜索</a>
</div>
</div>
<div id="pYc" style="display:none;">
<label>遥测类型：</label>
<div>
<input type="checkbox" id="all" name="all" title="全选" lay-filter="pYc">
<input type="checkbox" id="normal" name="normal" title="普通(电流电压)">
<input type="checkbox" id="zbcl" name="zbcl" title="主变差流">
<input type="checkbox" id="mccl" name="mccl" title="母差差流">
<input type="checkbox" id="xlcl" name="xlcl" title="线路差流">
<input type="checkbox" id="zzwd" name="zzwd" title="装置温度">
<input type="checkbox" id="zzdy" name="zzdy" title="装置电源电压">
<input type="checkbox" id="gq" name="gq" title="发送接收光强">
</div>
</div>
<div id="pYx" style="display:none;">
<label>遥信类型：</label>
<div>
<input type="checkbox" id="all" name="all" title="全选" lay-filter="pYx">
<input type="checkbox" id="light" name="light" title="装置面板灯">
<input type="checkbox" id="devst" name="devst" title="装置状态">
<input type="checkbox" id="hyb" name="hyb" title="硬压板">
<input type="checkbox" id="bhdz" name="bhdz" title="保护动作">
<input type="checkbox" id="bhgj" name="bhgj" title="保护告警">
<input type="checkbox" id="bhgz" name="bhgz" title="保护故障">
<input type="checkbox" id="gse" name="gse" title="GOOSE告警">
<input type="checkbox" id="comm" name="comm" title="通信状态">
<input type="checkbox" id="dsain" name="dsain" title="dsAin端口状态">
<input type="checkbox" id="gseyx" name="gseyx" title="GOOSE遥信">
<input type="checkbox" id="5st" name="5st" title="五态遥信">
<input type="checkbox" id="bsyx" name="bsyx" title="闭锁遥信">
<input type="checkbox" id="dsyx" name="dsyx" title="dsRelay遥信">
<input type="checkbox" id="ztbw" name="ztbw" title="状态变位">
<input type="checkbox" id="other" name="other" title="其他状态">
</div>
</div>
</form>
</div>
<div style="padding:0px;">
<table id="bootstrap-table" class="table table-striped" data-mobile-responsive="true" style="table-layout:fixed;"></table>
</div>
<div style="margin-left:2px;margin-top:3px">
<div style="padding:0px;">
<!--
<div>
<span>当前页：</span>
<input type="text" id="current" value="1">
</div>
-->
<label>每页显示:</label>
<select id="id_select" style='background:white' class="selectpicker show-tick form-control" data-first-option="false" required data-live-search="true">
<option value="10">100</option>
<option value="50">10</option>
<option value="100">50</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
<button id="firstPage" class="btn btn-primary">首页</button>
<button id="lastPage" class="btn btn-primary">上一页</button>
<button id="nextPage" class="btn btn-primary">下一页</button>
</div>
</div>
</div>
</div>$(function(){
var table_index = 0;
var tabIds=['lsryb','lsyx','lslb','lsyc','lsdz','dzbg','jsyj','qxdw'];
$('#tabs').pwstabs({
tabTitles:["历史软压板","历史遥信","历史录波","历史遥测","历史定值","动作报告","监视预警","缺陷定位"],
callback:function(current){
if(current==2){
$('#pYx').show();$('#pYc').hide();
}else if(current==4){
$('#pYx').hide();$('#pYc').show();
}else{
$('#pYx').hide();$('#pYc').hide();
}
currentPage = 1;
$("#lastPage").attr("disabled","disabled");
query(tabIds[current-1]);
table_index=current-1;
}
});
layui.use(['element','layer','form'],function(){
var form = layui.form;
form.on('checkbox(pYx)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
if(data.elem.checked){
$('#pYx .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
form.on('checkbox(pYc)', function(data){
if(data.elem.checked){
$('#pYc .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
});
layui.use('laydate', function(){
layui.laydate.render({
theme: 'molv',elem: '#pSt',type: 'date',value:'2010-01-01',isInitValue:true,btns:['now','confirm']
});
layui.laydate.render({
theme: 'molv',elem: '#pEt',type: 'date',value:new Date(),isInitValue:true,btns:['now','confirm']
});
});
//初始化
query(tabIds[0]);
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
$('#btnSearch').click(function(){
query(tabIds[table_index]);
});
//下一页按钮点击事件
$('#nextPage').click(function(){
currentPage += 1;
query(tabIds[table_index]);
if(currentPage != 1){
$("#lastPage").removeAttr("disabled");
}
});
//上一页按钮点击
$('#lastPage').click(function(){
currentPage -= 1;
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
query(tabIds[table_index]);
});
//首页按钮点击
$('#firstPage').click(function(){
currentPage = 1;
query(tabIds[table_index]);
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
});
//每页显示数目改变
$("#id_select").change(function(){
var count = $('#id_select option:selected') .val();
currentPage = 1;
pageSize = count;
query(tabIds[table_index]);
if(currentPage == 1){
$("#lastPage").attr("disabled","disabled");
}
});
});
</script>layui.use(['element','layer','form'],function(){
var form = layui.form;
form.on('checkbox(pYx)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
if(data.elem.checked){
$('#pYx .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
form.on('checkbox(pYc)', function(data){
if(data.elem.checked){
$('#pYc .layui-input-block input').each(function(){
console.log($(this));
$(this).prop("checked",true);
form.render();
})
}else{
$('.layui-input-block input').each(function(){
$(this).prop("checked", false);
form.render();
})
}
});
});
layui.use('laydate', function(){
layui.laydate.render({
theme: 'molv',elem: '#pSt',type: 'date',value:'2010-01-01',isInitValue:true,btns:['now','confirm']
});
layui.laydate.render({
theme: 'molv',elem: '#pEt',type: 'date',value:new Date(),isInitValue:true,btns:['now','confirm']
});
});注意点：
1.form.on()需要写在layui.user()中
2.form.on()中修改复选框的选中状态后，需要用form.render()更新页面渲染才能生效
————————————————
版权声明：本文为CSDN博主「panzhao007」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/panzhao007/article/details/92650778
