layui踩坑合集和解决办法以及未解决问题

目录

一、layui.each如何退出循环？

二、动态插入的表单元素，渲染失效怎么办？

三、直接获取select的值

四、在table中select的样式有问题，被遮挡，没法正常显示？

五、form表单提交时，checkbox的获取值问题？

六、在弹窗的iframe中想要重载父页面的table？

七、table组件中，某列用select，当select事件触发时候，修改同一行其他列的text

八、table可以编辑的列，加一个hover提示

---

---

 

---

一、layui.each如何退出循环？

break会报错。用return true;

二、动态插入的表单元素，渲染失效怎么办？

官网提供了两种方案，以下是work的：

form.render('select');

以下不work

form.render('select','somefilter');

三、直接获取select的值

$('select[name="account"]').siblings('.layui-form-select').find('.layui-this').attr('lay-value')

四、在table中select的样式有问题，被遮挡，没法正常显示？

添加如下样式：

.layui-table-cell,.layui-form,.layui-table-box,.layui-table-body{ overflow: visible; } /* 设置下拉框的高度与表格单元相同 */ td .layui-form-select{ margin-top: -10px; margin-left: -15px; margin-right: -15px; }

效果如图：

五、form表单提交时，checkbox的获取值问题？

通过form.field获取的checkbox值只能取到最后一个。所以如下：

var product = []; $('input[name="product"]:checked').each(function(i){ product[i] = $(this).val(); }); data.field.product = product;

六、在弹窗的iframe中想要重载父页面的table？

代码中的user-list是父页面table的id参数的值。文档中虽然说table不指定的话，默认从<table id="test"></table> 中的 id 参数中获取。但是实际中并不work。所以既要在table声明的时候指定id值，并且也要在reload的时候指定这个id值

parent.layui.table.reload('user-list');

七、table组件中，某列用select，当select事件触发时候，修改同一行其他列的text

//账户切换 form.on('select(account)', function(data){ // console.log(data.elem); //得到select原始DOM对象 // console.log(data.value); //得到被选中的值 // console.log(data.othis); //得到美化后的DOM对象 //修改同行 field是all_cost的列 $(data.elem).parents('tr').find('td[data-field="all_cost"]').find('.layui-table-cell').text(123); });

八、table可以编辑的列，加一个hover提示

1、为可以编辑的列指定templet

//表哥渲染 table.render({ elem: '#product-list' ,id: 'product-list' ,url:'xxx/xxxxx' ,cols: [[ ............. ,{field:'product_name', width:250, title: '产品名称', edit:'text', templet:'#product_name-tpl'} ............. ]] ,page: true });

2、templet内容如下。注意使用了td_of_edit_tips类哦

<script type="text/html" id="product_name-tpl"> <p class="td_of_edit_tips"> {{ d.product_name }} </p> </script>

3、在style或者css文件添加如下css

/*表格可以编辑列问题提示*/ .td_of_edit_tips:hover:after{ position:absolute; left:100%; padding-left: 5px; padding-right:5px; background-color: #0095ff; border-radius: 5px; color: #fff; content: '<< 可以编辑'; z-index: 2; /*width: 50px;*/ }

4、最终效果：