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

This article mainly introduces layui how to achieve automatic column width allocation of data table related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this layui how to achieve automatic column width allocation of data table article will have a harvest, let's take a look.

Applicable scenario: mainly to solve the problem of blank and scroll bar in the last column of the table after the window size is changed-the window changes from small to large, and the column at the end of the table appears blank.

The window changes from large to small, and a horizontal scroll bar appears.

Return to normal after reloading the frame

Prerequisites for use:

-minWidth must be set in the header of each column (based on the minWidth attribute)

-use it among yourself, but the effect of other methods is unknown

-the page can only have one data table. If there are multiple data tables, you need to modify the code (judgment of the table, acquisition of the number of columns, etc.)

Specific steps:

-listen for window resizing events

Var resizeTimer; $(window) .resize (function () {if (resizeTimer) {clearTimeout (resizeTimer);} resizeTimer = setTimeout (function () {resizeTimer = null; dstributionColumnWidth ();}, 200);}) / * after testing, it is found that when the window size changes, this method will be called many times, so you need to use the clearTimeout method to cancel the timeout set by the setTimeout () method, that is, the next call within 200ms after each call will cancel the last call. This will ensure that it will only be executed once in the end. If it still fails, the larger the 200 point, for example, the smaller the value of 500, the smoother the feeling will be. * /

Get the width of the table, the number of columns, and find the average column width

/ / Table width var tabWidth = $(".layui-table-header") .width (); / / number of columns var colNum = $("tr") .eq (0) .find ("th") .length;// average column width var avgWidth = tabWidth / colNum / * the way to find the width and column width is relatively simple, and I don't know whether there is generality (limited by level). There is no problem with using it by yourself. if you can't get the value, just write the code and get the corresponding value according to your own situation. of course, if there is a better and more elegant way, please leave a message and let me know * /

Get the values of the data-field and data-minwidth properties of each column, encapsulate them as objects, and sort them by the value of data-minwidth from largest to smallest

/ * * column object * @ param index the index position of the column in the current row (not needed) * @ param name corresponds to the final width of minWidth * @ param width in the field * @ param minWidth object header set in the header * @ constructor * / function Column (index, name, minWidth, width) {this.index = index; this.name = name This.minWidth = minWidth; this.width = width;} / / get parameter encapsulation object if (cols = undefined) {cols = $("tr"). Eq (0). Find ("th") .map (function (index, item) {var col = new Column (index, $(this) .attr ("data-field"), $(this) .attr ("data-minwidth") Return col;}); / / sort cols.sort (function (a, b) {return b ["minWidth"]-a ["minWidth"];}) } / * * calculate column widths * @ param columns column object array * @ param colNum columns * @ param tabWidth table width * @ param avgWidth average width * / function calculateColumnWidth (columns, colNum, tabWidth, avgWidth) {/ / whether the horizontal scroll bar of the table is displayed showOverflowX = false; / / whether to complete the comparison var isComplete = false For (var I = 0; I < columns.length; iTunes +) {var column = columns [I] / / if the calculated average column width is larger than the largest minWidth, then there is no need to compare the rest. Just assign a value to if (column ["minWidth"] average column width, then subtract minWidth from the table width and divide by the number of columns-1. Re-calculate the average column width * / column ["width"] = column ["minWidth"] TabWidth-= column ["minWidth"]; colNum-= 1; avgWidth = tabWidth / colNum / / if the average column width of the last column is greater than the minimum column width, indicating that the width of the current page is wide enough to display the table, you can hide the horizontal scroll bar, otherwise you need to display the scroll bar if (I = = columns.length-1) {showOverflowX = true;}}.

Set cell width, set scroll bar

/ / here is to find the corresponding th and td tags according to the name. There may be a better way. Please leave a message for (var I = 0; I < cols.length; iTunes +) {var col = cols [I]; var width = Cols [I] .width ("[data-field='" + cols [I] ["name"] + "']") .each (function () {/ / actually modifies the div tags under th and td / / I use animation, or you can assign $(this) .children () .eq (0) .animate ({width: width}, 200) directly. })} / / judge whether the scroll bar if (showOverflowX) {$('.layui-table-body'). Css ({"overflow-x": "auto"});} else {$(' .layui-table-body'). Css ({"overflow-x": "hidden"});}

Done! Complete code

Var cols, showOverflowX; / * column object * @ param index the index position of the column in the current row (useless or unnecessary) * @ param name corresponds to the final width of minWidth * @ param width in the field * @ param minWidth object header set in the header * @ constructor * / function Column (index, name, minWidth, width) {this.index = index This.name = name; this.minWidth = minWidth; this.width = width;} / * * calculate column width * @ param columns column object array * @ param colNum columns * @ param tabWidth table width * @ param avgWidth average width * / function calculateColumnWidth (columns, colNum, tabWidth, avgWidth) {showOverflowX = false; var isComplete = false For (var I = 0; I < columns.length; iTunes +) {var column = columns [I]; if (column ["minWidth"]

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.