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())；

获取单元格某行列索引

var cInd = gridboxFY.cell._cellIndex;

获取某列的类型，值为 'ro' 'ch' 'combo' 等等 var type = gridboxFY.getColType(ind)

清除grid内单元格为编辑状态

gridboxFY.editCell();

选择某个单元格 selectCell (rInd, cInd)

selectCell (rInd, cInd, fl, preserve, edit, show) 参数：

rInd：行索引或行对象 cind：单元格索引

fl：true/false 是否调用onRowSelect事件 preserve：true/false是否保存原有状态 edit：true/false 选中cell是否转为编辑状态 show：true/false 是否自动滚动选择

获取单元格内容

var itemcode =gridboxFY.cells(rId, 3).getValue();

对单元格进行值的填充

gridboxFY.cells(rId, 3).setValue(“哈哈”);

获取整个grid的行数值

var num = gridboxFY.getRowsNum();

新增一行

gridboxFY.addRow(rowid,['0','1','2','3','4'],num);

删除一行

gridboxFY.deleteRow(rid);

gridboxFY.deleteRow(gridboxFY.getSelectedRowId());

设置某行字体样式

gridboxFY.setRowTextStyle(rid,\ color:red ;font-size:15px;\

判断某个行id对应的行在grid中是否存在 gridboxFY.doesRowExist(rid) 返回true false

获得修改行的rowid的组合,逗号分割

var ids= gridboxFY.getChangedRows();

获得修改行的rowid的组合，包含新增行，逗号分割

var ids= gridboxFY.getChangedRows(true);

改变某行的行id

changeRowId (oldRowId, newRowId)

数据装载

gridboxFY.clearAndLoad(

\new Date(), function(){ )

Grid中Combo相关

comboObj.getComboText(); //录入框值 comboObj.getActualValue(); //录入框键

获取combo下拉框中选择的行索引

comboObj.getSelectedIndex();

获取combo下拉框中选择的文本数据值 comboObj.getSelectedText();

获取combo下拉框中行索引所在位置对应的值

var text = comboObj.optionsArr[comboObj.getSelectedIndex()].text;

选中下拉框中某个选项，i为下拉框中数值索引( i= comboObj.getSelectedIndex() ) comboObj.selectOption(i,true,true); //进行选中下拉检索狂某行的一个动作 comboObj.unSelectOption(); comboObj.clearAll();

}

setGridboxFYRowTextStyle();

获得修改行的rowid的组合,逗号分割

var ids= gridboxFY.getChangedRows();

获得修改行的rowid的组合，包含新增行，逗号分割

var ids= gridboxFY.getChangedRows(true);

改变某行的行id

changeRowId (oldRowId, newRowId)

数据装载

gridboxFY.clearAndLoad(

\new Date(), function(){ )

Grid中Combo相关

comboObj.getComboText(); //录入框值 comboObj.getActualValue(); //录入框键

获取combo下拉框中选择的行索引

comboObj.getSelectedIndex();

获取combo下拉框中选择的文本数据值 comboObj.getSelectedText();

获取combo下拉框中行索引所在位置对应的值

var text = comboObj.optionsArr[comboObj.getSelectedIndex()].text;

选中下拉框中某个选项，i为下拉框中数值索引( i= comboObj.getSelectedIndex() ) comboObj.selectOption(i,true,true); //进行选中下拉检索狂某行的一个动作 comboObj.unSelectOption(); comboObj.clearAll();

}

setGridboxFYRowTextStyle();

本文来源：https://www.bwwdw.com/article/hh2o.html