Introduction to the method of hiding columns in table data tables in layui-Layui Tutorial-php.cn

Introduction to the method of hiding columns in table data tables in layui

Layui is the only domestic template company now. The data table function is powerful, but I don’t know how to use python or django to splice json and send the output to the data table. Then I have no choice but to use a stupid method and loop through it.

The id column is retained in the data table to obtain the id value of the changed data when editing and modification, but it does not need to be displayed, so it needs to be hidden.

The code of the id column is:

, cols: [[ //标题栏
                    {field: &#39;data_id&#39;, title: &#39;ID&#39;, width: 50,style:&#39;display:none;&#39;}

Copy after login

This code can hide the value of the id column below, but the id of the title bar is still there. Then, when the problem arises, use powerful Use jquery to solve it.

 $(&#39;table.layui-table thead tr th:eq(0)&#39;).addClass(&#39;layui-hide&#39;);

Copy after login

When there are multiple tables, I found that the above code can only hide the title bar of the first column of the first table. If there are multiple tables on a page, you need to use:

 $(&#39;table.layui-table thead tr th:nth-child(1)&#39;).addClass(&#39;layui-hide&#39;);

Copy after login

There is another problem. If there is a selection box in the table, it will occupy the first column of the table by default. At this time, the above code will go wrong. You can only push to, use the first code, select one by one. Note that layui's data table will automatically generate 5 tables:

Introduction to the method of hiding columns in table data tables in layui

My current page only has two tables, one regular and one with a selection box. After searching, I found that there are 10

 $(&#39;table:eq(1).layui-table thead tr th:eq(0)&#39;).addClass(&#39;layui-hide&#39;);
$(&#39;table:eq(6).layui-table thead tr th:eq(1)&#39;).addClass(&#39;layui-hide&#39;);

Copy after login

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to the method of hiding columns in table data tables in layui. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

layui

source：cnblogs.com

Previous article：Introduction to how to use iconfont in layui Next article：Layui file upload, preview and modification methods

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn