DHTMLX

GRID 的使用

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");           //设置样式  (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

日期

示例 
var mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("imgs/");
//设置grid的头
mygrid.setHeader(单据编号,序号);
mygrid.setInitWidths("80,65");//设置初始化宽度
mygrid.enableMultiselect(true); //启用多选
//mygrid.enableAutoWidth(true) //自动宽度
//mygrid.enableDragAndDrop(true);//打开/关闭拖拽模式
mygrid.setColTypes("ro,ro"); //设置列类型 dyn,ed,txt,price,ch,coro,ra,ro  
//mygrid.setColSorting("str,str,str,str,str");
mygrid.setColAlign("center,center");
mygrid.setSkin("dhx_custom");
mygrid.setColumnHidden(15, true);
mygrid.setColumnHidden(17, true);

mygrid.init();
mygrid.attachEvent("onRowSelect", doGridEnableEdit);
mygrid.attachEvent("onEditCell", doGridEditCell);
mygrid.attachEvent("onKeyPress", doGridKeyPress);
mygrid.attachEvent("onRowDblClicked", doGridRowDbClick);
mygrid.attachEvent("onCheck", doGridCheck);
mygrid.attachEvent("onMouseOver", doGridMouseOver);
mygrid.attachEvent("onDrag", doGridDrag);
mygrid.attachEvent("onSelectStateChanged", function(id){
   
});