Home > Web Front-end > JS Tutorial > body text

JavaScript table control: Chgrid, simplified_javascript skills

WBOY
Release: 2016-05-16 19:15:20
Original
1095 people have browsed it

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

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template