Home >Web Front-end >JS Tutorial >JavaScript table control: Chgrid, simplified_javascript skills

JavaScript table control: Chgrid, simplified_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:15:201107browse

In the spirit of free sharing, the code is posted. At the same time, everyone can test and add new functions together. Please post your modified versions according to the questions raised by netizens and follow them below. Finally, as a comparison Comprehensive spreadsheet software.
Chgrid’s simple function introduction:
1: Support custom sorting
2: Support drag and drop of column width
3: Support custom functions
4: Support paging
5: Support automatic numbering
6: Multi-browser support, support ie6, ie7, ff, opera
7: div layout

Known issues:
1: Due to the div layout used, if Using margin or padding will change the defined column width, so currently the text can only be centered, left or right, and padding cannot be used to control the position
The current solution is to add another div to each div, and use this div margin attribute to control its position.
2: When the content exceeds the width of the container, there will be a slight problem with dragging.

How to modify the style:
If you do not change the style, you only need to adjust the following part of the code
Chgrid_column0{ width:20px;}
.Chgrid_column1{ width:100px;}
.Chgrid_column2{ width:80px;}
.Chgrid_column3{ width:120px;}
.Chgrid_column4{ width:100px;}
Add a row for each additional column, for example.Chgrid_column5{ width:100px;}
Note: There is no need to define the width of the last column, the program will automatically adjust it

Statement:
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