发布时间 : 星期一 文章dhtmlXGrid使用更新完毕开始阅读
Dhtmlxgrid表格组件介绍
在网页上用表格显示数据是很常见的事情，html标记语言中的table标签能实现，但其功能很简单，只能单纯的显示数据和定义简单的样式，不支持查询，不支持排序，不支持自动增减列等等，这些功能都没有，如果是自己写的话又特别麻烦。有了DHTMLX 表格组件(dhtmlxGrid )，会帮你完成这所有的一切。
引入需要的css样式和js文件
css：dhtmlxgrid.css
dhtmlxgrid_dhx_custom.css
dhtmlxcombo.css
dhtmlxcalendar.css
dhtmlxcalendar_dhx_skyblue.css
href=\/>
Js：dhtmlxgrid.js
dhtmlxgridcell.js dhtmlxcommon.js
dhtmlxgrid_excell_cntr.js dhtmlxgrid_filter.js
dhtmlxcombo.js
dhtmlxgrid_excell_combo.js dhtmlxcombo_whp.js
dhtmlxgrid_excell_dhxcalendar.js dhtmlxcalendar.js
配置
//
Var gridboxFY = new dhtmlXGridObject('gridboxFY'); //当前表格是否设置为宽度自适应，并可设定默认最大宽度、最小宽度。enableAutoWidth (mode, max_limit, min_limit) gridboxFY.enableAutoWidth(true);
gridboxFY.setImagePath(\//指明使用什么皮肤（天蓝色）,这个和前面引用CSS对应起来 dhx_black gridboxFY.setSkin(\); //标题显示内容
gridboxFY.setHeader(\ style='font-size:15px;font-weight:bold'>类\ style='font-size:15px;font-weight:bold'>项目名称
,\ + \ style='font-size:15px;font-weight:bold'>规格,\ + \ style='font-size:15px;font-weight:bold'>项目代码,\ + \ style='font-size:15px;font-weight:bold'>序号\); //指明列的宽度，*表示是余下的宽度显示gridboxFY.setInitWidths(\);
//表示内容排序位置，分别是左、中、中
gridboxFY.setColAlign(\); /*
别
,\ +ch ---- checkbox 多选 ra ---- radio 单选 ro ---- readonly ed ---- 可编辑文本框 combo ----下拉检索框 dhxCalendar ----日期控件 */
// gridboxFY.setColumnHidden(4,true);
gridboxFY.attachEvent(\,doGridEnableEdit); //单击选择gridboxFY.attachEvent(\, doOnEditCell); //光标进入某个空gridboxFY.attachEvent(\,setGridStyle); //grid数据加载完成展现gridboxFY.attachEvent(\, function(rId,cInd){//双击
doEditAndSelect();
gridboxFY.setColTypes(\);
事件
间的三部曲（stage:0进入状态、1编辑状态、2结束状态） 之后，进行的操作方法 事件
});
gridboxFY.attachEvent(\,function(ev){
//事件 if(ev==13){
//光标定在项目代码上时，按回车则会新增一行
if(gridboxFY.cell._cellIndex==3){ }
XXXXXXXXXXXXXXXXXXXXXXXXXX
} else{
}
return true;
});
//初始化配置
gridboxFY.init();
//加载数据
gridboxFY.clearAndLoad(\
\+new Date(),function(){
setGridboxFYRowTextStyle(); });
//初始化cmobo列的属性及绑定事件 combo_meditem = gridboxFY.getColumnCombo(1); //gridboxFY.cells(rid,colid).getValue()
combo_meditem.setSize(460); //下拉检索框宽度
combo_meditem.DOMelem.style.width = 460;//录入框宽度
combo_meditem.DOMelem_input.onkeydown = dhtmlXCombo_input_keydown; combo_meditem.DOMlist.onclick=dhtmlXCombo_list_click;
常用方法
先解释几个语义
行id（rid）：行数据的id值，唯一
行索引（rInd）：该行处于整个grid中的行的排序（从0开始计算，即第一行的rInd为0，以此类推）
列索引：（cInd）：该列处于整个grid中的列的排序（从0开始计算，即第一列的cInd为0，以此类推）
获取所选行的行id
var rid = gridboxFY.getSelectedRowId(); 如果有多个，则rid以逗号分隔
根据行索引获得行id
var rid = gridboxFY.getRowId(rInd);
var rid = gridboxFY.getRowId(gridboxFY.getRowsNum()-1);
根据行id获得行索引
var rInd = gridboxFY.getRowIndex(rid)；
var rInd = gridboxFY.getRowIndex(gridboxFY.getSelectedRowId())；