layui怎么實現列顯示更多時觸發table的事件

這篇文章主要講解了“layui怎么實現列顯示更多時觸發table的事件”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“layui怎么實現列顯示更多時觸發table的事件”吧！

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

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

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

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

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

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

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

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

實現代碼如下：

  //緩存當前操作的是哪個表格的哪個tr的哪個td    $(document).off('mousedown','.layui-table-grid-down').on('mousedown','.layui-table-grid-down',function (event) {        //直接記錄td的jquery對象        table._tableTrCurrr = $(this).closest('td');    });    //給彈出的詳情里面的按鈕添加監聽級聯的觸發原始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();    });

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