解决layui动态加载复选框无法选中的问题
2019-09-20 16:37
1871 查看
问题描述
1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消
2.有分页时,最后一页数据过少会导致其他页下方数据无法选中
3.页面没加载完或暴力测试时也会不能选中
利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法――自己写一个复选框
<!--原有layui复选框--> <td> <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon"></i></div> </td> <!--替换为自己写的--> <td> <div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)"> <div></div> </div> </td>
自己写的同样支持vue绑定事件,并且支持单个选中、取消,全选和取消
//单个的选中取消 checkBox:function(n){ var checkbox = $('tbody tr').eq(n).find('.checkBox'); if (checkbox.attr("a") == "off") { checkbox.children("div").css({ "display" : "block" }); checkbox.attr("a","on"); }else { checkbox.children("div").css({ "display" : "none" }); checkbox.attr("a","off"); } }
//全选取消 checkBoxAll:function(){ var obj = $('thead').find('.checkBox'); if ($(obj).attr("a") == "off") { $('.checkBox div').css({"display" : "block"}); $('.checkBox').attr("a","on"); }else { $('.checkBox div').css({"display" : "none"}); $('.checkBox').attr("a","off"); } }
全选或者选中其中几个,获取对应id,删除或进行其他操作
function getId() { var obj = $("tbody .checkBox"); var arr=''; obj.each(function(index, el) { if(obj.eq(index).attr("a") == "on"){ arr += obj.eq(index).attr('data-id')+ ',' } }); return arr; }
以上这篇解决layui动态加载复选框无法选中的问题就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- 解决layui动态加载复选框无法选中
- 解决 Swiper.4.x.js 无法动态加载数据 无法渲染 pagination 问题
- Release模式下加载FFmpeg提示“无法定位程序输入点XXX与动态链接库XXX.dll ”的问题解决
- Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题
- [WEB前端开发]-复选框操作经验-解决无法获取所有选中值的问题
- 解决img的src在firefox,IE7-8下,无法动态加载的问题
- 解决Winform panel动态加载Form页面无法随着panel最大化的问题
- 解决无法动态加载styleable的问题
- [网络收集]动态加载CSS,解决母版页无法改变CSS的问题
- mui中slider组件,动态加载后无法滚动切换问题的解决方法
- Extjs gridpanel使用遇到selectionchange被多次触发问题解决办法,grid表格复选框无法取消选中
- linux显示git commit id,同时解决insmod模块时版本不一致导致无法加载问题
- VS2008 视图资源.rc无法加载的问题及解决方法
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
- 解决jquery中动态新增的元素节点无法触发事件问题的两种方法
- tips:解决bootstrap-switch 在jqgrid中动态加载不显示的问题
- 解决Visual Studio 2005 包加载失败问题。解决SQlserver企业管理器无法启动,SQLDMO未注册问题。
- 解决Nginx反向代理后无法加载静态文件的问题
- 关于“socket:<10106> 无法加载或初始化请求的服务提供程序”问题的解决方法
- 关于SpringBoot无法加载前端界面以及加载成功之后页面无法加载Css/Js等问题的解决。