解决layui动态加载复选框无法选中
2018-12-29 14:15
183 查看
版权声明:如需转载,请注明来源 https://blog.csdn.net/qq_28073073/article/details/85337809
问题描述
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; }
相关文章推荐
- 解决Winform panel动态加载Form页面无法随着panel最大化的问题
- 解决:ScrollView嵌套ListView导致无法正确计算ListView的高度之动态加载图片高度常规方法失效。
- 解决无法动态加载styleable的问题
- Extjs gridpanel使用遇到selectionchange被多次触发问题解决办法,grid表格复选框无法取消选中
- Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题
- 解决IE6下JS动态设置图片IMG的SRC时图片无法加载错误的方法
- [网络收集]动态加载CSS,解决母版页无法改变CSS的问题
- 解决AJAX动态加载元素无法绑定事件
- 解决IE6下JS动态设置图片IMG的SRC时图片无法加载错误的方法
- [WEB前端开发]-复选框操作经验-解决无法获取所有选中值的问题
- Release模式下加载FFmpeg提示“无法定位程序输入点XXX与动态链接库XXX.dll ”的问题解决
- 解决img的src在firefox,IE7-8下,无法动态加载的问题
- jQuery.on() 函数详解--解决动态加载的标签无法绑定点击事件
- 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
- cmd命令行执行java程序的编译和执行的方法及可能出现找不到或无法加载主类的错误的解决
- 动态添加新元素事件无法触发解决方法
- (window10)使用karas生成网络模型,安装组件及无法成功加载plot_model的解决
- javascript中动态加载js文件多种解决办法总结
- c# 中treeview 树节点图标的动态加载,及选中时图标改变
- 异常详细信息: System.DllNotFoundException: 无法加载 DLL (oci.dll)的解决办法