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

最新推荐文章于 2024-09-12 14:33:55 发布

原创最新推荐文章于 2024-09-12 14:33:55 发布 · 2.9k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细解答了layui框架在实际应用中常见的八大问题，包括循环退出、动态表单渲染、select值获取、样式调整、checkbox值处理、iframe中table刷新、select事件响应及hover提示等，提供实用代码示例。

一、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、最终效果：