快捷導(dǎo)航

javascript表格控件：Chgrid，簡(jiǎn)化型

更新時(shí)間：2007年04月07日 00:00:00 作者：

本著自由共享的精神，把代碼帖出來(lái)，同時(shí)大家也可以一起來(lái)測(cè)試以及添加新功能，請(qǐng)大家根據(jù)網(wǎng)友提出的問題，把自己修改好的版本都帖出來(lái)跟在下面，最后作為一款比較全面的表格軟件。
Chgrid的簡(jiǎn)單功能介紹：
1：支持自定義排序
2：支持列寬度的拖放
3：支持自定義函數(shù)
4：支持分頁(yè)
5：支持自動(dòng)編號(hào)
6：多瀏覽器支持，支持ie6,ie7,ff,opera
7：div布局

已知問題：
1：由于使用的div布局，如果使用margin或者padding會(huì)改變定義的列寬度，所以目前文字只能居中或者靠左或靠右，不能使用padding控制位置
目前解決辦法是可以在每個(gè)div里面再附加一個(gè)div，用這個(gè)div的margin屬性來(lái)控制其位置。
2：內(nèi)容在超出容器寬度的時(shí)候，拖動(dòng)會(huì)有點(diǎn)小問題，。

怎樣修改樣式：
如果不改變風(fēng)格，大家只要對(duì)如下部分代碼調(diào)整就可以
Chgrid_column0{ width:20px;}
.Chgrid_column1{ width:100px;}
.Chgrid_column2{ width:80px;}
.Chgrid_column3{ width:120px;}
.Chgrid_column4{ width:100px;}
每多一列就再加一行比如.Chgrid_column5{ width:100px;}
注意：最后一列是不用定義寬度的，程序會(huì)自動(dòng)調(diào)整

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無(wú)標(biāo)題文檔</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>  </head> <body onload="Chgrid.init('Chgrid_container',20,20,true,true,true,1,column,data,sortable);"> <div   id="vvxyksv9kd"   class="Chgrid_container" id="Chgrid_container"></div> <input type="button" value="前一頁(yè)" onclick="Chgrid.fillData(Chgrid.startPage-1)" class="button" /><input type="button" value="后一頁(yè)" onclick="Chgrid.fillData(Chgrid.startPage+1)" class="button" /><input type="button" value="注冊(cè)事件" onclick="Chgrid.registerCallBack('click',[-1,2],renewData)" class="button" /> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

其它優(yōu)秀的grid控件參考：
http://www.activewidgets.com
http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/

請(qǐng)千萬(wàn)不要把我這款控件跟它們比較，差距較大，不過我也有優(yōu)勢(shì)，使用起來(lái)比較簡(jiǎn)單，速度也快：）
本來(lái)想多加點(diǎn)數(shù)據(jù)，結(jié)果發(fā)現(xiàn)超過限制了，大家測(cè)試的時(shí)候自己多搞點(diǎn)數(shù)據(jù)測(cè)試其速度如何。

[ 本帖最后由 cityvoice 于 2007-3-15 16:52 編輯 ]

您可能感興趣的文章: