因為公司以前架構的需求，所以對于dhtmlxgrid進行了簡單的學習，參照dhtmlxgrid給出的例子進行摸索

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基礎js-->??
5. <script??src="js/dhtmlxgrid.js"></script><!--dhtmlxgrid基礎js-->??????????
6. <script??src="js/dhtmlxgridcell.js"></script><!--dhtmlxgrid基礎js-->?????
7. <script??src="js/dhtmlxcalendar.js"></script><!--對日期控件的支持-->??????
8. <script??src="js/dhtmlxgrid_excell_dhxcalendar.js"></script><!--對日期控件的支持-->??
9. <link?rel="STYLESHEET"?type="text/css"?href="css/dhtmlxcalendar_dhx_skyblue.css">??

2、初始化代碼

2.1、在頁面上先放一個表格容器

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

2.2、頁面初始化

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

附： setColTypes支持的列類型

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

setColSorting支持的排序類型：

int	整型
str	字符串
date	日期

轉載于:https://www.cnblogs.com/z-e-r-o/p/6555591.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。