Home > Developer > JavaScript
In the spirit of free sharing, you can post the code and test and add new functions together. Please refer to the questions raised by netizens, post all the modified versions below and use them as a comprehensive table software.
A Brief Introduction to Chgrid:
1: supports custom sorting
2: supports drag and drop of column width
3: Support for custom functions
4: pagination is supported.
5: Supports automatic numbering
6: supports multiple browsers, including ie6, ie7, ff, and opera.
7: div Layout
Known issues:
1: Because the div layout is used, if you use margin or padding, the defined column width will be changed. Currently, the text can only be centered or left or right, and the position cannot be controlled using padding.
Currently, the solution is to append a div in each div and use the margin attribute of this div to control its position.
2: When the content exceeds the container width, dragging will be a little problem ,.
How to modify a 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 column, for example,. Chgrid_column5 {width: 100px ;}
Note: The last column does not need to define the width, and the program will automatically adjust it.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> untitled document </title> <style type =" text/css "> # Chgrid_container {font: 12px" "; width: 600px; height: 100%; color: #827200 ;}. chgrid_head_row {width: 100%; border-top: 1px solid # ffb517; border-bottom: 1px solid # ffb517; background-color: # ffe6b3; height: 20px ;}. chgrid_row {width: 100%; border-bottom: 1px solid # ffb517; height: 20px; background-color: # fff }. chgrid_row_interval {width: 100%; border-bottom: 1px solid # ffb517; height: 20px; background-color: # fff2d9 }. chgrid_row_hilight {width: 100%; border-bottom: 1px solid # ffb517; height: 20px; background-color: # ffe6b3 }. chgrid_column {float: left; height: 20px; overflow: hidden; line-height: 20px; text-align: center ;}. chgrid_column_sort_desc {float: left; height: 20px; overflow: hidden; line-height: 20px; text-align: center; background-image: url (http://bbs.blueidea.com/attachments/2007/3/15/20070315_2402590937239704896fuxTNS4SQ9xDC.gif); background-position: right center; background-repeat: no-repeat ;}. chgrid_column_sort_asc {float: left; height: 20px; overflow: hidden; line-height: 20px; text-align: center; background-image: url (http://bbs.blueidea.com/attachments/2007/3/15/20070315_6f504cdc131612d66f08J1jtbM8fwxHJ.gif); background-position: right center; background-repeat: no-repeat ;}. chgrid_head_split {float: left; height: 20px; width: 2px; background-image: url (http://bbs.blueidea.com/attachments/2007/3/15/20070315_2aedec010331a8ccc38caDdGOQhsA048.gif); background-position: center; background-repeat: no-repeat; cursor: e-resize; cursor: col-resize ;}. chgrid_table_cell0 {float: left; height: 20px; line-height: 20px; overflow: hidden; text-align: center ;}. chgrid_table_cell {float: left; height: 20px; line-height: 20px; overflow: hidden; text-align: center; border-left: 1px solid # ffb517 ;}. chgrid_column0 {width: 20px ;}. chgrid_column1 {width: 100px ;}. chgrid_column2 {width: 80px ;}. chgrid_column3 {width: 120px ;}. chgrid_column4 {width: 100px ;}. button {font: 12px ""; color: #827200; padding-left: 12px; padding-right: 12px; background-color: # ffe6b3; border-left: 2px solid # fff; border-top: 2px solid # fff; border-right: 2px solid # ffb517; border-bottom: 2px solid # ffb517 ;} </style> </pead> <body onload = "Chgrid. init ('chgrid _ iner ', 20, 20, true, 1, column, data, sortable ); "> <input type =" button "value =" Previous Page "onclick =" Chgrid. fillData (Chgrid. startPage-1) "class =" button "/> <input type =" button "value =" next page "onclick =" Chgrid. fillData (Chgrid. startPage + 1) "class =" button "/> <input type =" button "value =" register event "onclick =" Chgrid. registerCallBack ('click', [-1, 2], renewData) "class =" button "/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
For other excellent grid controls, refer:
Http://www.activewidgets.com
Http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/
Please do not compare this control with them. The difference is large, but I also have advantages. It is easy to use and fast to use :)
I wanted to add more data and found that the limit was exceeded. During the test, I tried to test the speed of the data.
[This post was last edited by cityvoice at,-3-15]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
