因为有对于页面显示和打印的需求,所以对于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 |