dhtmlxgrid表格筆記

由於公司之前架構的需求，因此對於dhtmlxgrid進行了簡單的學習，參照dhtmlxgrid給出的例子進行摸索

一、必須引入的js包

<link rel="STYLESHEET" type="text/css" href="css/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="css/dhtmlxgrid_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="css/dhtmlxcalendar.css">
<script  src="js/dhtmlxcommon.js"></script><!--dhtmlx基礎js-->
<script  src="js/dhtmlxgrid.js"></script><!--dhtmlxgrid基礎js-->
<script  src="js/dhtmlxgridcell.js"></script><!--dhtmlxgrid基礎js-->
<script  src="js/dhtmlxcalendar.js"></script><!--對日期控件的支持-->
<script  src="js/dhtmlxgrid_excell_dhxcalendar.js"></script><!--對日期控件的支持-->
<link rel="STYLESHEET" type="text/css" href="css/dhtmlxcalendar_dhx_skyblue.css">

二、初始化代碼

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

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

2.二、頁面初始化

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