layui怎么實現(xiàn)列顯示更多時觸發(fā)table的事件

這篇文章主要講解了“l(fā)ayui怎么實現(xiàn)列顯示更多時觸發(fā)table的事件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“l(fā)ayui怎么實現(xiàn)列顯示更多時觸發(fā)table的事件”吧！

首先給這個下拉的圖標(biāo)添加一個mousedown的事件，記錄當(dāng)前的顯示更多的是數(shù)據(jù)哪個表格的哪個tr的哪個td。然后記錄在table._tableTrCurr下面。

這個可能有的同學(xué)有疑問為啥不直接用click，這個是因為表格內(nèi)部也做了一個事件委托，但是不是委托給document啥的而是委托給了table的body然后stope了也就是說實際上你外面再寫委托到document。

點擊監(jiān)聽的時候到table的邏輯之后就停了，不會走到你的監(jiān)聽里面，所以避開了它用了一個mousedown，那如果是移動端的會不會有什么問題和這個可以自己試試看，這里以web端為主。

然后是另外一個監(jiān)聽，就是監(jiān)聽打開的這個tips里面的“按鈕”的click，然后找到剛才記錄的那個_tableTrCurr信息，找到我們要的那個table的那個tr的那個td的那個按鈕，找到了就好辦了，直接click一下就能觸發(fā)寫的table.on('tool')的內(nèi)容了。

注意：這個修改是在最新版本的基礎(chǔ)上修改的（v2.4.5）里面有一個關(guān)鍵的就是獲得表格的id，這個id不是單純的是table節(jié)點的id，而是render出來之后這個實例的id。

如果不設(shè)置默認(rèn)就是table的節(jié)點的id如果沒有，table內(nèi)部會生成一個index之類的作為這個table的id，在2.4.4更新中有一個可能大家不太容易注意到但是確實意義很大的修改，就是在table的view中添加了一個lay-id這個屬性來保存當(dāng)前的這個table的實例的id。

這個是非常非常非常好用的一個變化，意義很大的，后面你要reload某個table只要知道你reload的到底是哪個節(jié)點，自然就能夠找到你要reload的tableId是什么。所以強(qiáng)烈的建議如果還在使用2.4.0~2.4.3的小伙伴還是升級成2.4.4+。

當(dāng)然如果你使用了我那個tablePlug插件，實際可以不用擔(dān)心這個問題，因為我在tablePlug內(nèi)部就做了處理，如果render之后沒有和這個lay-id會給添加上去，達(dá)到跟2.4.4+同樣的效果。

實現(xiàn)代碼如下：

  //緩存當(dāng)前操作的是哪個表格的哪個tr的哪個td    $(document).off('mousedown','.layui-table-grid-down').on('mousedown','.layui-table-grid-down',function (event) {        //直接記錄td的jquery對象        table._tableTrCurrr = $(this).closest('td');    });    //給彈出的詳情里面的按鈕添加監(jiān)聽級聯(lián)的觸發(fā)原始table的按鈕的點擊事件    $(document).off('click','.layui-table-tips-main [lay-event]').on('click','.layui-table-tips-main [lay-event]',function (event) {        var elem = $(this);        var tableTrCurrr =  table._tableTrCurrr;        if(!tableTrCurrr){            return;        }        var layerIndex = elem.closest('.layui-table-tips').attr('times');        layer.close(layerIndex);        table._tableTrCurrr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();    });

感謝各位的閱讀，以上就是“l(fā)ayui怎么實現(xiàn)列顯示更多時觸發(fā)table的事件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對layui怎么實現(xiàn)列顯示更多時觸發(fā)table的事件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！