dhtmlxgrid v3.0学习笔记

分类： dhtmlx JavaScript2012-01-31 15:41 1744人阅读 评论(0) 收藏 举报

stylesheetdatecalendarcss日历xml

目录(?)[+]

因为有对于页面显示和打印的需求，所以对于dhtmlxgrid进行了简单的学习，参照dhtmlxgrid给出的例子进行摸索

1、必须引入的js包

[html] view plaincopy

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、在页面上先放一个表格容器

[html] view plaincopy

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

2.2、页面初始化

[html] view plaincopy

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");           //设置样式
10. mygrid.init();                           //进行初始化
11. mygrid.loadXML("data.xml");              //加载外部数据
12. </script>

附：

setColTypes支持的列类型

setColSorting支持的排序类型：