因?yàn)楣疽郧凹軜?gòu)的需求，所以對(duì)于dhtmlxgrid進(jìn)行了簡單的學(xué)習(xí)，參照dhtmlxgrid給出的例子進(jìn)行摸索

1、必須引入的js包

1. <link?rel="STYLESHEET"?type="text/css"?href="css/dhtmlxgrid.css">??
2. <link?rel="stylesheet"?type="text/css"?href="css/dhtmlxgrid_dhx_skyblue.css">??
3. <link?rel="STYLESHEET"?type="text/css"?href="css/dhtmlxcalendar.css">??
4. <script??src="js/dhtmlxcommon.js"></script><!--dhtmlx基礎(chǔ)js-->??
5. <script??src="js/dhtmlxgrid.js"></script><!--dhtmlxgrid基礎(chǔ)js-->??????????
6. <script??src="js/dhtmlxgridcell.js"></script><!--dhtmlxgrid基礎(chǔ)js-->?????
7. <script??src="js/dhtmlxcalendar.js"></script><!--對(duì)日期控件的支持-->??????
8. <script??src="js/dhtmlxgrid_excell_dhxcalendar.js"></script><!--對(duì)日期控件的支持-->??
9. <link?rel="STYLESHEET"?type="text/css"?href="css/dhtmlxcalendar_dhx_skyblue.css">??

2、初始化代碼

2.1、在頁面上先放一個(gè)表格容器

1. <div?id="gridbox"?style="width:503px;height:120px;background-color:white;"></div>??

2.2、頁面初始化

1. <script>??
2. mygrid?=?new?dhtmlXGridObject('gridbox');//類似于一個(gè)聲明??
3. mygrid.setImagePath("/imgs/");???????????//設(shè)置圖片存放路徑??
4. mygrid.setHeader("Name,Date?of?Birth,?First?Book?Published");//設(shè)置表格表頭名稱??
5. mygrid.setInitWidths("*,100,100");???????//設(shè)置表格初始列寬 ?(*表示隨機(jī))
6. mygrid.setColAlign("left,center,center");//設(shè)置表格對(duì)齊方式??
7. mygrid.setColTypes("ed,dhxCalendar,dhxCalendarA");//設(shè)置各列的數(shù)據(jù)類型??
8. mygrid.setColSorting("str,date,date");???//設(shè)置各列的排序類型??
9. mygrid.setSkin("dhx_skyblue");???????????//設(shè)置樣式 ?(xp，mt，gray，light，clear，modern，sb_dark);
10. mygrid.setColumnHidden(列數(shù),true) ? ? //隱藏該列
11. mygrid.init();???????????????????????????//進(jìn)行初始化??
12. mygrid.loadXML("data.xml");??????????????//加載外部數(shù)據(jù)??
13. </script>??

附： setColTypes支持的列類型

ro	只讀
ed	少量文本，雙擊原位編輯
txt	大量文本，雙擊彈出一個(gè)文本區(qū)域進(jìn)行編輯
ch	復(fù)選框，選中值為1，未選值為0
ra	單選框，一列中只能有一個(gè)被選中，選中值為1
coro	下拉列表，用戶只能選擇列表中已有的值
co	復(fù)合下拉列表，用戶可以選擇，也可以自行輸入
img	圖片，只讀，值為圖片的url
link	鏈接，值的格式為“鏈接文字^鏈接地址”，非正常超鏈接寫法。（需加載dhtmlXGrid_excell_link.js文件對(duì)其支持）
calendar	日期，雙擊彈出日歷。日期格式為MM/DD/YYYY。需加載dhtmlXGrid_excell_calendar.js文件對(duì)其支持，且加載此文件前需定義全局變量_css_prefix、_js_prefix如下：<script>_css_prefix="styles/"; _js_prefix="js/"; </script>

setColSorting支持的排序類型：

int	整型
str	字符串
date	日期

轉(zhuǎn)載于:https://www.cnblogs.com/z-e-r-o/p/6555591.html

總結(jié)

以上是生活随笔為你收集整理的dhtmlxgrid表格笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。