Layui is something I have only recently come into contact with. It is also a background front-end framework used in new projects. It is similar to easyui. During this period of use, I often encounter large and small problems..
1. Selecting the graphics card switch is to load the data table again. Pagination bar not showing
2. The layui.open pop-up box cannot trigger events written in js. or jquery..
Waiting for the problem.. But these two problems are the most pitted I have ever encountered..
As for the solution
1. The paging bar cannot be displayed.. The data table can only be reloaded by switching the table
2. The events in the pop-up box.. can only be triggered by the event method of layui.. For example, I made a check permission tree..
But it can't trigger the check item change event..or click event..Through constant attempts.. Finally, the layui standard check item monitor is used..It can trigger..This wastes a lot of my time..
$('#add-btn').click(function(){
var index=layer.open({
type: 1
,area: ['550px','400px']
,title: ['添加门店', 'font-size:16px;height:40px;line-height:40px;background:#fff;border-top:3px solid #3a90b8;border-bottom:1px solid #e0e0e0']
,content: str
,btn: ['Confirm', 'Cancel']
,shade: 0.1 //Do not display the mask
,yes: function(index, layero){
var str="";
$("#tip-organ").html();
$("#hidInfo").html();
var organs=$("input[name='fen1']");
var inpstr="";
for(var i=0;i<organs.length;i++){
var organ="";
if(organs[i].checked == true){
var title=organs[i].title;
organ=organs[i].value;
var id = 'id' + organ;
console.log(id);
str+=title;
str+=':';
inpstr+='<input type="hidden" name="organId" id="shopId" value="'+organ+'">';
var online=$("#"+id+" input[name='type1']").is(':checked');
console.log(online);
var offLine=$("#"+id+" input[name='type2']").is(':checked');
console.log(offLine);
if(online==true && offLine==true){
inpstr+='<input type="hidden" name="kind" id="applykind" value="3">'
str+=$("#"+id+" .shop-two-unit input:checkbox[name='type1']:checked").attr("title");
str+=",";
str+=$("#"+id+" input:checkbox[name='type2']:checked").attr("title");
}else if(offLine==true && online==false){
var title=$("#"+id+" input:checkbox[name='type2']:checked").attr("title");;
str+=title;
str+=",";
inpstr+='<input type="hidden" name="kind" id="applykind" value="2">'
}else if(online==true && offLine==false){
var title=$("#"+id+" input:checkbox[name='type1']:checked").attr("title");;
str+=title;
str+=",";
inpstr+='<input type="hidden" name="kind" id="applykind" value="1">'
}else{
layer.msg('请选择门店活动适用范围！');
return false;
}
}
}
$("#tip-organ").html(str);
$("#hidInfo").html(inpstr);
layer.closeAll();
}
,cancel: function(index, layero){
}, success: function(layero, index){
shopstr=loadShopDom();
$(".shop-r").html(shopstr);
var form = layui.form;
form.render('checkbox');
$("document").on('click','#father',function(){
alert("2");
if ($(this).prop("checked") == true) {
$(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);
} else {
$(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);
}
var form = layui.form;
form.render('checkbox');
});
$('#father').click(function(){
alert("2");
if ($(this).prop("checked") == true) {
$(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);
} else {
$(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);
}
form.render('checkbox');
});
form.on('checkbox(owner_one)', function(data){
if ($(this).prop("checked") ==true) {
$(this).parents("li").parents("li").eq(0).find("input:checkbox.father").prop("checked", true);
} else {
if ($(this).parents("li").parents("li").eq(0).find("input:checkbox:not(.father):checked").length == 0) {
$(this).parents("li").parents("li").eq(0).find("input:checkbox.father").prop("checked",false);
}
}
form.render('checkbox');
});
form.on('checkbox(owner_all)', function(data){
var a = data.elem.checked;
if(a == true){
$(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);
form.render('checkbox');
}else{
$(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);
form.render('checkbox');
}
});
}
});
});
});