具體示例圖片如下，點擊全選，選中全部選項，再點一下全選取消選中，點擊反選，選中所有當前爲選中選項
前臺代碼如下
class=“layui-form” 這個一定要寫否則checkbox渲染不出來，同時select的監聽也會失效
<form class="layui-form" >
<div class="layui-fluid">
<div class="layui-elem-quote">
<div class="layui-inline">
<label class="layui-form-label">類型</label>
<div class="layui-input-block">
<select class="ui_input_txt02" id="dataType" lay-filter="dataType">
<option value="WIND">風電</option>
<option value="LIGHT">光伏</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-sm"
onclick="javascript:showdivs('1')" id="sub2">查看屬性</button>
<button type="button"
class="layui-btn layui-btn-sm layui-btn-warm"
onclick="javascript:submitUpLine()" id="sub1">查詢</button>
</div>
</div>
<div class="layui-form-item layui-form" id="hide0"
style="display: none;">
<div class="layui-inline">
<label class="layui-form-label">基本屬性</label>
<div class="layui-input-block" id="base"></div>
</div>
<div class="layui-inline">
<label class="layui-form-label">擴展屬性</label>
<div class="layui-input-block" id="exc"></div>
<div class="layuiadmin-card-text layuiadmin-card-list">
<p>
<span class="layuiadmin-span-color"><a
style="color: #0000FF;" href="javascript:showdivs('0');">收起</a></span>
</p>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
$(function() {
getCheckbox("WIND");
var form = layui.form;
form.render();//必須渲染，否則剛開始進入界面不會顯示checkbox
submitUpLine()
})
function showdivs(flg) {
if (flg == '1') {
$("#hide0").show();
} else {
$("#hide0").css("display", "none");
}
}
function submitUpLine() {
var temp = layer.load(3, { //icon支持傳入0-2
shade : [ 0.5, 'gray' ], //0.5透明度的灰色背景
content : '正在生成表格，請稍等...',
success : function(layero) {
layero.find('.layui-layer-content').css({
'padding-top' : '39px',
'width' : '200px'
});
}
});
getattr(temp);
showdivs('0');
}
function getattr(temp) {
var item = $(".baseClass");
var attrCols = [];//layui數據表格cols參數
var param = new Object();
param.type = "numbers";//行號
param.title = "編號";
param.fixed = "left";
attrCols.push(param);
var param0 = new Object();
param0.field = item[0].value;
param0.title = item[0].title;
param0.width = 200
param0.fixed = "left";//固定列
param0.sort = true;//設置篩選
attrCols.push(param0);
var param1 = new Object();
param1.field = item[1].value;
param1.title = item[1].title;
param1.width = 200
param1.fixed = "left";
param1.sort = true;
attrCols.push(param1);
for (var i = 2; i < item.length; i++) {
if (item[i].checked == true) {//獲取選中的checkbox
var param = new Object();//循環生成col
param.field = item[i].value;
param.title = item[i].title;
param.width = 200
param.sort = true;
attrCols.push(param);
}
}
var itemExc = $(".excClass");
for (var i = 0; i < itemExc.length; i++) {
if (itemExc[i].checked == true) {
var param = new Object();
param.field = itemExc[i].value;
param.title = itemExc[i].title;
param.width = 200
param.sort = true;
attrCols.push(param);
}
}
var name = [];//獲取選中的checkbox的value，對name進行過濾
$('input[name="excName"]:checked').each(function() {
name.push($(this).val());
});
$('input[name="baseName"]:checked').each(function() {
name.push($(this).val());
});
if (name.length == 0) {
layer.msg('請選擇場站屬性,否則查詢無意義', {
icon : 2
});
layer.close(temp);
return; //終止當前程序
}
var type = $("#dataType").find("option:selected").val();
var url = basePath + "/getAttrValues";
$.ajax({
crossDomain : true,
xhrFields : {
withCredentials : true
},
//async : false,//同步執行
type : "post",
url : url,
data : {
type : type,
attrNames : name
},
datatype : "json",
success : function(data) {
layui.use('table', function() {
var table = layui.table;
table.render({//生成數據表格
toolbar : '#toolbarDemo',//綁定工具條
elem : '#demo',
data : data.data,
page : false,
cols : [ attrCols ],//表頭，展示時按照cols的順序展示
height : 'full-150',
limit : data.count//數據條數
});
});
setTimeout(function() {
layer.close(temp);
}, 300);
},
error : function(data) {
alert("error!")
}
});
}
</script>
<script>
function getCheckbox(obj) {//生成checkbox
var url = basePath + "/getSelectAttr";
$.ajax({
crossDomain : true,
xhrFields : {
withCredentials : true
},
async : false,//同步執行
type : "post",
url : url,
data : {
type : obj
},
datatype : "json",
success : function(data) {
$("#base").html("");//先清空在渲染否則還是之前的
var select = $("#base");
select
.append("<input type=\"checkbox\" lay-skin=\"primary\" id=\"base_all\" lay-filter=\"base_all\" title=\"全選\"> ");
select
.append("<input type=\"checkbox\" lay-skin=\"primary\" id=\"fbase_all\" lay-filter=\"fbase_all\" title=\"反選\"> ");
select.append("<br/>")
select.append(data.stringBuilderBase);
$("#exc").html("");
var select = $("#exc");
select
.append("<input type=\"checkbox\" lay-skin=\"primary\" id=\"exc_all\" lay-filter=\"exc_all\" title=\"全選\"> ");
select
.append("<input type=\"checkbox\" lay-skin=\"primary\" id=\"fexc_all\" lay-filter=\"fexc_all\" title=\"反選\"> ");
select.append("<br/>")
var select = $("#exc");
select.append(data.stringBuilderExc);
var form = layui.form;
form.render();
},
error : function(data) {
alert("error!")
}
});
}
layui.use('form', function() {//監聽select控件
var form = layui.form;
form.on('select(dataType)', function(data) {
var type = $("#dataType").find("option:selected").val();
if (type == "WIND") {
getCheckbox(type);
submitUpLine()
} else if (type == "LIGHT") {
getCheckbox(type);
submitUpLine()
}
})
})
</script>
<script>
layui.use('form', function() {
var form = layui.form;
//全選
form.on('checkbox(base_all)', function(data) {
var a = data.elem.checked;
if (a == true) {
$(".baseClass").prop("checked", true);
$("#fbase_all").prop("checked", false);
} else {
$(".baseClass").prop("checked", false);
}
var item = $(".baseClass");
item[0].checked = true;
item[1].checked = true;
form.render('checkbox');
});
//反選
form.on('checkbox(fbase_all)', function(data) {
var item = $(".baseClass");
item.each(function() {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
})
$("#base_all").prop("checked", false);
$("#fbase_all").prop("checked", true);
var item = $(".baseClass");
item[0].checked = true;
item[1].checked = true;
form.render('checkbox');
});
//有一個未選中全選取消選中
form.on('checkbox(baseFilter)', function(data) {
var item = $(".baseClass");
for (var i = 0; i < item.length; i++) {
if (item[i].checked == false) {
$("#base_all").prop("checked", false);
form.render('checkbox');
break;
}
}
//如果都勾選了 勾上全選
var all = item.length;
for (var i = 0; i < item.length; i++) {
if (item[i].checked == true) {
all--;
}
}
if (all == 0) {
$("#base_all").prop("checked", true);
form.render('checkbox');
}
});
//全選
form.on('checkbox(exc_all)', function(data) {
var a = data.elem.checked;
if (a == true) {
$(".excClass").prop("checked", true);
$("#fexc_all").prop("checked", false);
$("#exc_all").prop("checked", true);
form.render('checkbox');
} else {
$(".excClass").prop("checked", false);
form.render('checkbox');
}
});
//反選
form.on('checkbox(fexc_all)', function(data) {
var item = $(".excClass");
item.each(function() {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
})
$("#exc_all").prop("checked", false);
$("#fexc_all").prop("checked", true);
form.render('checkbox');
});
//有一個未選中全選取消選中
form.on('checkbox(excFilter)', function(data) {
var item = $(".excClass");
for (var i = 0; i < item.length; i++) {
if (item[i].checked == false) {
$("#exc_all").prop("checked", false);
form.render('checkbox');
break;
}
}
//如果都勾選了 勾上全選
var all = item.length;
for (var i = 0; i < item.length; i++) {
if (item[i].checked == true) {
all--;
}
}
if (all == 0) {
$("#exc_all").prop("checked", true);
form.render('checkbox');
}
});
});
</script>
<script type="text/html" id="toolbarDemo">
</script>
後臺數據格式如下
1.checkbox數據格式
@RequestMapping("/getSelectAttr")
public HashMap<String, Object> getSelectAttr(String type) {
return selectService.getSelectAttr(type);
}
public HashMap<String, Object> getSelectAttr(String type) {
HashMap<String, Object> hashMap = new HashMap<String, Object>();
StringBuilder stringBuilderExc = new StringBuilder();
List<RbaseInfoPoint> points = rbaseInfoPointDao.findByFlagOrderByRank(type);
if (null != points) {
for (RbaseInfoPoint point : points) {
stringBuilderExc.append("<input name=\"excName\" lay-skin=\"primary\" lay-filter=\"excFilter\" class=\"excClass\" type=\"checkbox\" value=\"" + point.getPointId() + "\" title= \""+ point.getPointName() + "\"/>");
}
}
StringBuilder stringBuilderBase = new StringBuilder();
stringBuilderBase.append("<input disabled=\"disabled\" name=\"baseName\" lay-skin=\"primary\" lay-filter=\"baseFilter\" class=\"baseClass\" type=\"checkbox\" value=\"farmid\" title=\"場站id\" checked=\"\" />");
stringBuilderBase.append("<input disabled=\"disabled\" name=\"baseName\" lay-skin=\"primary\" lay-filter=\"baseFilter\" class=\"baseClass\" type=\"checkbox\" value=\"farmName\" title=\"場站名稱\" checked=\"\"/>");
stringBuilderBase.append("<input name=\"baseName\" lay-skin=\"primary\" lay-filter=\"baseFilter\" class=\"baseClass\" type=\"checkbox\" value=\"groupName\" title=\"所屬發電集團公司\" checked=\"\"/>");
···········
if(type.equals("WIND")){
stringBuilderBase.append("<input name=\"baseName\" lay-skin=\"primary\" lay-filter=\"baseFilter\" class=\"baseClass\" type=\"checkbox\" value=\"jzts\" title=\"併網風機臺數（臺）\" />");
···········
}else if(type.equals("LIGHT")){
stringBuilderBase.append("<input name=\"baseName\" lay-skin=\"primary\" lay-filter=\"baseFilter\" class=\"baseClass\" type=\"checkbox\" value=\"jzts\" title=\"併網逆變器臺數（臺）\" />");
···········
}
hashMap.put("stringBuilderExc", stringBuilderExc);
hashMap.put("stringBuilderBase", stringBuilderBase);
return hashMap;
}
2.數據表格數據格式
@RequestParam(value=“attrNames[]”) String[] attrNames)前臺傳過來的是數組，後臺要以這種格式接收
後臺傳到前臺的數據表格的數據格式如下
JSONObject obj = new JSONObject();
obj.put(“code”,0);
obj.put(“msg”,"");
obj.put(“data”, farmList);
if(null!=farms&&!farms.isEmpty()){
obj.put(“count”, farms.size());
}else{
obj.put(“count”, 0);
}
@ResponseBody
@RequestMapping("/getAttrValues")
public JSONObject getAttrValues(String type,@RequestParam(value="attrNames[]") String[] attrNames) {
JSONObject obj = baseDataService.getAttrValues(type,attrNames);
return obj;
}
@Override
public JSONObject getAttrValues(String type,String[] names) {
JSONObject objOrg = getValues(type);
if(null!=names&&names.length>0){
List<JSONObject> farmList = (List<JSONObject>) objOrg.get("data");
List<String> nameAttr = Arrays.asList(names);
for(JSONObject obj:farmList){
for(String name:nameAttr){
if(!obj.containsKey(name)){
obj.remove(name);
}
}
}
}
return objOrg;
}
private JSONObject getValues(String type){
List<RbaseAreaInfo> areas = rbaseAreaInfoDao.findAll();
Map<String,String> areaMap = new HashMap<String,String>();
for(RbaseAreaInfo area:areas){
areaMap.put(area.getAreaId(), area.getOtherName());
}
List<RbaseNetInfo> nets =rbaseNetInfoDao.findAll();
Map<String,String> netMap = new HashMap<String,String>();
for(RbaseNetInfo net:nets){
netMap.put(net.getNetId(),net.getNetFullName());
}
List<RbaseInfoVal> excvalues = rbaseInfoValDao.findAll();
Map<String,List<RbaseInfoVal>> valueMap = new HashMap<String,List<RbaseInfoVal>>();
for(RbaseInfoVal value:excvalues){
if(valueMap.containsKey(value)){
List<RbaseInfoVal> vals = valueMap.get(value);
vals.add(value);
valueMap.put(value.getObjId(), vals);
}else{
List<RbaseInfoVal> vals = new ArrayList<>();
vals.add(value);
valueMap.put(value.getObjId(), vals);
}
}
List<JSONObject> farmList = new ArrayList<JSONObject>();
List<Order> orders = new ArrayList<Order>();
Order rankNo = new Sort.Order(Sort.Direction.ASC, "rankNo");
orders.add(rankNo);
Sort sort = new Sort(orders);
List<RbaseFarmInfo> farms = new ArrayList<RbaseFarmInfo>();
if (type.equals("WIND")) {
farms = rbaseFarmInfoDao.findByDataType(DataTypeConstants.DATA_TYPE_FD, sort);
List<RbaseInfoPoint> points = rbaseInfoPointDao.findByFlagOrderByRank(type);
if(null!=farms&&!farms.isEmpty()){
for(RbaseFarmInfo farm:farms){
String netname = netMap.get(farm.getNetId());
String areaname = areaMap.get(farm.getAreaId());
JSONObject obj = new JSONObject();
obj.put("farmid", farm.getFarmId());
············
List<RbaseInfoVal> values = valueMap.get(farm.getFarmId());
if (null != values && !values.isEmpty()) {
for (RbaseInfoVal val : values) {
obj.put(val.getFlag(),val.getVal1());
}
}
if(null==values||values.isEmpty()){
for(RbaseInfoPoint point:points){
obj.put(point.getPointId(),"");
}
}
farmList.add(obj);
}
}
} else if (type.equals("LIGHT")) {
farms = rbaseFarmInfoDao.findByDataType(DataTypeConstants.DATA_TYPE_GF, sort);
List<RbaseInfoPoint> points = rbaseInfoPointDao.findByFlagOrderByRank(type);
if(null!=farms&&!farms.isEmpty()){
for(RbaseFarmInfo farm:farms){
String netname = netMap.get(farm.getNetId());
String areaname = areaMap.get(farm.getAreaId());
JSONObject obj = new JSONObject();
obj.put("farmid", farm.getFarmId());
············
obj.put("fpCap", farm.getFpCap());
List<RbaseInfoVal> values = valueMap.get(farm.getFarmId());
if (null != values && !values.isEmpty()) {
for (RbaseInfoVal val : values) {
obj.put(val.getFlag(),val.getVal1());
}
}
if(null==values||values.isEmpty()){
for(RbaseInfoPoint point:points){
obj.put(point.getPointId(),"");
}
}
farmList.add(obj);
}
}
}
JSONObject obj = new JSONObject();
obj.put("code",0);
obj.put("msg","");
obj.put("data", farmList);
if(null!=farms&&!farms.isEmpty()){
obj.put("count", farms.size());
}else{
obj.put("count", 0);
}
return obj;
}
}