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