Shulou(Shulou.com)05/31 Report--

This article mainly explains the "layui how to achieve column display more events that trigger table", the article explained the content is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in-depth, together to study and learn "layui how to achieve column display more events that trigger table" bar!

First, add a mousedown event to the drop-down icon to record the current display of which table, which tr, and which td. And record it under table._tableTrCurr.

Some students may have questions about why not directly use click, this is because there is also an event delegate inside the form, but it is not delegated to document or anything, but delegated to table's body and then stope, that is to say, you actually write the delegate to document outside.

When you click to listen, it stops after the logic of table, and it won't come into your monitor, so you avoid it and use a mousedown. Will there be any problem if it is mobile? you can try this for yourself. Here, it is mainly web.

Then there is another listening, that is, listening to the click of the "button" in the open tips, then find the _ tableTrCurr information just recorded, find the td button of the tr of the table we want, and it will be easy to find it. A direct click will trigger the content of the written table.on ('tool').

Note: this modification is based on the latest version (v2.4.5). A key point in it is to get the id of the table, which is not simply the id of the table node, but the id of the instance after the render comes out.

If you do not set the id of the node whose default is table, if not, an id such as index will be generated inside table as this table. In the 2.4.4 update, there is a change that may not be easy for you to notice, but it is really meaningful to add a lay-id attribute to the view of table to save the id of the current instance of this table.

This is a very easy to use change, significant, later you want to reload a table as long as you know which node of your reload, you can naturally find out what the tableId of your reload is. Therefore, it is strongly recommended to upgrade to 2.4.4 + if you are still using 2.4.0G2.4.3.

Of course, if you use my tablePlug plug-in, you don't have to worry about it, because I dealt with it internally in tablePlug, and if the render is not followed by this lay-id, it will be added to achieve the same effect as 2.4.4 +.

The implementation code is as follows:

/ / caching which tr of which table and which td $(document) .off ('mousedown','.layui-table-grid-down') .on (' mousedown','.layui-table-grid-down',function (event) {/ / directly record td's jquery object table._tableTrCurrr = $(this) .closest ('td');}) / / add the button in the pop-up details to listen for the cascading click event $(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 ();}) Thank you for your reading, the above is the content of "how to achieve layui column display more events that trigger table", after the study of this article, I believe you have a deeper understanding of how to achieve layui column display more events when triggering table events, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.