dhtmlXGrid使用.docx

Dhtmlxgrid表格组件介绍在网页上用表格显示数据是很常见的事情，html标记语言中的table标签能实现，但其功能很简单，只能单纯的显示数据和定义简单的样式，不支持查询，不支持排序，不支持自动增减列等等，这些功能都没有，如果是自己写的话又特别麻烦。有了DHTMLX 表格组件(dhtmlxGrid )，会帮你完成这所有的一切。引入需要的css样式和js文件css：dhtmlxgrid.cssdhtmlxgrid_dhx_custom.css dhtmlxcombo.cssdhtmlxcalendar.cssdhtmlxcalendar_dhx_skyblue.cssJs：dhtmlxgrid.jsdhtmlxgridcell.jsdhtmlxcommon.jsdhtmlxgrid_excell_cntr.jsdhtmlxgrid_filter.jsdhtmlxcombo.jsdhtmlxgrid_excell_combo.jsdhtmlxcombo_whp.jsdhtmlxgrid_excell_dhxcalendar.jsdhtmlxcalendar.jswindow.dhx_globalImgPath = dhtmlxCombo/codebase/imgs/; 配置/ Var gridboxFY = new dhtmlXGridObject(gridboxFY);/当前表格是否设置为宽度自适应，并可设定默认最大宽度、最小宽度。enableAutoWidth (mode, max_limit, min_limit)gridboxFY.enableAutoWidth(true); gridboxFY.setImagePath(dhtmlxGrid/codebase/imgs/);/指明使用什么皮肤（天蓝色）,这个和前面引用CSS对应起来 dhx_blackgridboxFY.setSkin(dhx_custom);/标题显示内容 gridboxFY.setHeader(类别, +项目名称, +规格, +项目代码, +序号);/指明列的宽度，*表示是余下的宽度显示 gridboxFY.setInitWidths(120,*,150,100,150); /表示内容排序位置，分别是左、中、中 gridboxFY.setColAlign(center,center,center,center,center); /* ch - checkbox 多选 ra - radio 单选 ro - readonly ed - 可编辑文本框 combo -下拉检索框 dhxCalendar -日期控件 */ gridboxFY.setColTypes(ro,combo,ro,ed,ro);/gridboxFY.setColumnHidden(4,true);gridboxFY.attachEvent(onRowSelect,doGridEnableEdit); /单击选择事件gridboxFY.attachEvent(onEditCell, doOnEditCell); /光标进入某个空间的三部曲（stage:0进入状态、1编辑状态、2结束状态）gridboxFY.attachEvent(onXLE,setGridStyle); /grid数据加载完成展现之后，进行的操作方法gridboxFY.attachEvent(onRowDblClicked, function(rId,cInd)/双击事件doEditAndSelect(););gridboxFY.attachEvent(onKeyPress,function(ev) /事件 if(ev=13)/光标定在项目代码上时，按回车则会新增一行 if(gridboxFY.cell._cellIndex=3) XXXXXXXXXXXXXXXXXXXXXXXXXX else return true; );/初始化配置gridboxFY.init();/加载数据gridboxFY.clearAndLoad(makeupcost/getCZandCFFYdetailInfo.htm?_t=+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，以此类推）获取所选行的行idvar 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);改变某行的行idchangeRowId (oldRowId, newRowId)数据装载gridboxFY.clearAndLoad(makeupcost/getCZandCFFYdetailInfo.htm?_t=+new Date(),function()setGridboxFYRowTextStyle();)Grid中Combo相关comboObj.getComboText(); /录入框值comboObj.getActualValue(); /录入框键获取combo下拉框中选择的行索引comboObj.getSelectedIndex(); 获取combo下拉框中选择的文本数据值comboObj.getSelectedText();获取combo下拉框中行索引所在位置对应的值var text = comboObj.