dhtmlxgrid v3.0學習筆記

分類： dhtmlx JavaScript2012-01-31 15:41 1744人閱讀 評論(0) 收藏 舉報

stylesheet date calendar css 日歷 xml

 

目錄(?)[+]

 

因為有對於頁面顯示和打印的需求，所以對於dhtmlxgrid進行了簡單的學習，參照dhtmlxgrid給出的例子進行摸索

1、必須引入的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、初始化代碼

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

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

2.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");           //設置樣式
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	日期