LayUI最近遇到的问题以及处理
layui是我最近才接触的..也是新项目中用到的后台前端框架..与easyui有些类似..在这段时间的使用中,经常会碰到大大小小的问题..
1.选显卡切换又是加载数据表格。分页条不显示
2.layui.open弹出框中的无法触发用js.或者jquery写得触发事件..
等问题..但是这两个问题是我遇到过最坑的..
至于解决办法
1.针对分页栏无法显示..只能通过切换表格的时候重新加载数据表格
2.弹出框中的事件..只能使用layui的事件方式触发..例如我做了个复选款权限树..
但是却无法触发复选款改变事件..或者点击事件..通过不断的尝试..最后用了layui标准的复选款监听..才能触发..这浪费了我不少时间..
$('#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: ['确认', '取消']
,shade: 0.1 //不显示遮罩
,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');
}
});
}
});
});
});
LayUI最近遇到的问题以及处理的更多相关文章
- layui常用方法
很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...
- 开源网站.NETMVC+ Layui+SqlSugar+RestSharp
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 日期时间组件 - layui.laydate
全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...
- 关于layui
之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.
- 日期控件,layui
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...
- 使用的组件:Layui
Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...
- 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 前端框架layui
可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...
- Layui - 示例
示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> & ...
随机推荐
- 十、设计模式之代理(Proxy)模式
什么是代理模式 代理模式是对象的结构模式,为其他对象提供一种对象以控制对这个对象的访问. 代理模式的结构图如下:(源自大话设计模式) Subject:定义了RealSubject和Proxy的公共 ...
- jquery 实现复选框选择效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- c++后台开发面试常见知识点总结(六)算法手写
链表倒转 leetcode-206 连续子数组最大和问题(和最大的连续子序列的和) leetcode-53 输出字符串中最长的回文子串长度? leetcode-5 一个字符串,求最长无重复子串 ...
- 理解Python中的继承规则和继承顺序
先来看一段代码: class First(object): def __init__(self): print ("first") class Second(object): de ...
- apue 第19章 伪终端
伪终端是指对于一个应用程序而言,他看上去像一个终端,但事实上它并不是一个真正的终端. 进程打开伪终端设备,然后fork.子进程建立一个新的会话,打开一个相应的伪终端从设备.复制输入.输出和标准错误文件 ...
- layer icon对应图标
layer icon对应图标 信息框(msg.alert.open.confirm) icon:0 icon:1 icon:2 icon:3 icon:4 icon:5 icon:6 icon:16 ...
- delphi 随意将函数执行权限提高到Ring0源代码
//随意将函数执行权限提高到Ring0源代码//Windows 2K以上的操作系统,//用途: 提供超级简单使用的APIrocessRing0(),//可将delphi中的任意函数由原來的Ring3权 ...
- 通过create-react-app从零搭建react环境
一. 快速开始: 全局安装脚手架: $ npm install -g create-react-app 通过脚手架搭建项目: $ create-react-app <项目名称> 开始项目: ...
- python运行时禁止生成pyc文件
方法 在环境变量文件~/.bashrc中添加 export PYTHONDONTWRITEBYTECODE=False source ~/.bashrc加载即可 如何从项目中删除所有.pyc文件 fi ...
- 31. Git与Github
Github介绍 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库 ...