dhtmlxgrid v3.0学习笔记

dhtmlxgrid v3.0学习笔记

分类: dhtmlx JavaScript
 

目录(?)[+]

 

因为有对于页面显示和打印的需求,所以对于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");           //设置样式  
  10. mygrid.init();                           //进行初始化  
  11. mygrid.loadXML("data.xml");              //加载外部数据  
  12. </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

日期

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。