Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what is the use of table field filtering in the layui framework", the content is simple and clear, and I hope it can help you solve your doubts, so let me lead you to study and learn "what is the use of table field filtering in the layui framework" this article.

First of all, this is for the field, so add a configuration item to cols to determine which columns need to be filtered. Generally speaking, only those columns whose data can be summarized into several distributions have the need to do this filtering, such as gender columns and occupation columns in the example. Id columns are not meaningful, of course, they are not absolute, some are necessary.

So a new configuration item filter: true/false/null has been added.

Then add the filtered icon and event to the field corresponding to the header after the table is rendered

This is the main code is too long to fully display, a brief introduction, that is, the use of table.eachCols to traverse the header, the need to add icons to add icons to the good, note that this time will not actually generate we click to see inside the check content.

In fact, these are all handled by subsequent click events, traversing a collection of values for the current column in the click event.

Be careful! This is a collection of what we finally see, not for data, because the fields have templet to convert, so even if the values behind may not be the same, the final display may be the same, which should be summarized into the same category.

And then what do you do when you click on this filter?

In addition to getting a collection mentioned above, it is to use the collection as a table data, and according to the logic to get whether it is initially selected, and then layer to pop up a pop-up box to render the table into it.

A key point here is whether to support multi-column filtering, that is, you can select one column first, and then click another column to filter this column under the premise of the previous filter. At present, this requirement is directly rejected because it is too complex and difficult to explain.

Because they all influence each other, after the columns on this side are hidden, there may be partial classification for the columns on the other side, and the part of the data that is displayed is hidden.

What are we going to do now?

The only thing that is more stringent is the addition of a new state called semi-selected state, but it is not expected to be encountered in the actual application scenario, but it is quite difficult to implement, so it is not supported at all. This seems to be the same restriction in excel. I don't know if I remember it correctly.

Finally, the check event of the table is monitored, and the actual logic behind it is to show or hide the corresponding tr. Then when you click on the option to turn on the filter, it is also based on the hidden display of the tr inside the table to decide whether it is selected by default or not.

Then, since the icon cannot be found in the one provided by layui, a new style file has been added to support it. Please add:

There is a problem: if you are careful, you should see that the following statistical columns are not updated after the field filtering. In fact, this is not true. Some columns are not displayed after filtering, so the corresponding statistics should be the statistics of the columns we see. You can think about how to deal with this.

My idea is to encapsulate a method for table statistics, which can calculate the data and update it to the corresponding dom node. The greatest function of the statistics provided by the original table is to generate a container node fixed at the bottom.

As for the content, it doesn't matter. Many partners will ask layui whether the data of the statistical row is the support returned by the background. In fact, these can be dealt with in the above-mentioned encapsulation method, and can also become very free, not only summing, but also a variety of calculations and so on, but this is not the focus of this post, and will be realized later.

Test page: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabledgitee Project: https://gitee.com/sun_zoro/layuiTablePlug

The above is all the content of the article "what is the use of table field filtering in the layui framework". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.