`
gucy
  • 浏览: 12070 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

DHTMLX grid

阅读更多
var mygrid=new dhtmlXGridObject('gridbox');

常用方法:

1.mygrid.addRow(new_id, text, ind) -- 添加一行,参数(新行ID,以逗号分隔的cell值字符串,插入到的行序号)

2.mygrid.cells(row_id, col) -- 通过行ID,列下标 确定cell对象

  mygrid.cells2(rowIndex,col) --  通过行、列下标 确定cell对象

mygrid.getRowIndex(rowId);-- 行ID转换成行下标

3.mygrid.deleteRow(row_id);-- 通过行ID 删除一行

4.mygrid. onSelect(rowId);-- 通过行ID选中一行

5.mygrid.getAllItemIds();--  取所有记录ID

6.mygrid.serialize(); -- 序列化 成XML格式

7.mygrid.setEditable(false); -- 设置不可编辑

8.mygrid.editCell(stage, rowId, cellInd, newValue, oldValue); -- 编辑cell触发的事件,stage的值有0,1,2,分别代表编辑前、编辑中、编辑后,该方法必须返回一个boolean值

9.mygrid.getRowsNum(); -- 表格的行数----------mygrid.obj.rows.length

  mygrid.getColumnsNum(); -- 表格的列数----- mygrid.rowsCol.length

10.mygrid.setColumnExcellType(colIndex,"类型");----- 修改列类型

    mygrid.setCellExcellType(rowId,cellIndex,type);--- 修改一格类型

 mygrid. setRowExcellType(rowId,type);  ----------------修改一行类型

11.mygrid.isColumnHidden(cellInx) ;-----------判断列是否为隐藏列

     mygrid.setColumnHidden(cellIndex,state); state=true/false;  ---- 设置列隐藏

12.mygrid.mygrid.setCellTextStyle(rowId, cellInd, style); -- 设置cell的样式



13.键盘事件    dhtmlxgrid.js 中的 注释部分阻止键盘事件 onKeyPress(code, ctrlKey, shiftKey) 触发。

this.doKey = function (ev) {
if (!ev) {
  return true;
}
if ((ev.target || ev.srcElement).value !== window.undefined) {
  var zx = (ev.target || ev.srcElement);
  if ((!zx.parentNode) || (zx.parentNode.className.indexOf("editable") == -1)) {
   return true;
  }
}
if ((globalActiveDHTMLGridObject) && (this != globalActiveDHTMLGridObject)) {
  return globalActiveDHTMLGridObject.doKey(ev);
}
if (this.isActive == false) {
       //document.body.onkeydown = "";
  return true;
}
if (this._htkebl) {
  return true;
}
if (!this.callEvent("onKeyPress", [ev.keyCode, ev.ctrlKey, ev.shiftKey, ev])) {
  return false;
}
//影响键盘事件的触发
// var code = "k" + ev.keyCode + "_" + (ev.ctrlKey ? 1 : 0) + "_" + (ev.shiftKey ? 1 : 0);
// if (this.cell) { //if selection exists in grid only
//  if (this._key_events) {
//   if (false === this._key_events.call(this)) {
//    return true;
//   }
//   if (ev.preventDefault) {
//    ev.preventDefault();
//   }
//   ev.cancelBubble = true;
//   return false;
//  }
//  if (this._key_events["k_other"]) {
//   this._key_events.k_other.call(this, ev);
//  }
// }
return true;
};

在js中写入:

//添加对上下左右键、回车键的支持
function onKeyPress(code, ctrlKey, shiftKey) {
//modify action of enter key
//修改回车键事件,使得敲回车后选择状态或焦点下移  
if (code == 13 && !ctrlKey && !shiftKey) {
  this.editStop();
  var rowInd = this.row.rowIndex;
  if (rowInd != this.rowsCol.length && rowInd != this.obj.rows.length - 1) {
   this.selectCell(rowInd, this.cell._cellIndex, true);
   this.editCell();
  }
}
//daoger_end
//根据上一个单元格的编辑状态判断通过方向键移动后下一个单元格的状态是处于选择还是编辑状态
if (code == 40 || code == 38) {
  this.editStop();
  var rowInd = this.row.rowIndex;
  if (code == 38 && rowInd != 1) {
   this.selectCell(rowInd - 2, this.cell._cellIndex, true);
   this.editCell();
  }
  if (code == 40 && rowInd != this.rowsCol.length && rowInd != this.obj.rows.length - 1) {  
            this.selectCell(rowInd, this.cell._cellIndex, true);  
            this.editCell();  
        }
}
//添加左右方向键事件
    if (code == 37 || code == 39) {
        this.editStop();
        var rowInd = this.row.rowIndex;
        var cellInx=mygrid.cell._cellIndex;
        if (code == 37) {  
         for(;cellInx > 0;){
          if(!mygrid.isColumnHidden(--cellInx)){
           break;
          }
         }
        }  
        if (code == 39) {  
            var cols = mygrid.getColumnsNum();
            for(;cellInx < cols;){
          if(!mygrid.isColumnHidden(++cellInx)){
           break;
          }
         }  
        }
        this.selectCell(rowInd-1,cellInx,true);
        this.editCell();   
    }
return true;
}
即可支持上下左右键。

分享到:
评论

相关推荐

    dhtmlxgrid专业版下载

    dhtmlxGrid是一款功能强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作表格数据。它提供了丰富的功能,包括排序、过滤、分页、编辑、拖放等,以满足专业级的数据管理需求。这款组件是dhtmlx Suite的一...

    dhtmlxGrid介绍及使用手册(中文版)

    ### dhtmlxGrid介绍及使用手册知识点解析 dhtmlxGrid是一个强大的JavaScript网格组件,用于创建动态交互的数据表。它支持丰富的功能,例如自定义XML数据源,多行表头和表尾显示,列操作,以及处理大型数据集的能力...

    DhtmlxGrid 分页的自定义模板,DhtmlxGrid复选框多选整行 dhtmlxgrid自定义按钮

    DhtmlxGrid的自定义的分页样式,不是他们内部的三种皮肤分页; 本篇还有dhtmlxgird没有的复选框选中整行的效果,dhtmlxgrid多行选中使用的是 [Ctrl+鼠标]、[Shift+鼠标],在国内大部分的体验操作都是第一列放复选框的...

    dhtmlxGrid取一列方法

    在探讨dhtmlxGrid如何取一列方法之前,我们首先需要了解dhtmlxGrid是什么以及它在Web开发中的角色。dhtmlxGrid是一款强大的JavaScript库,用于创建动态、可定制的表格界面,广泛应用于Web应用的数据展示和管理。它...

    dhtmlxgrid

    **dhtmlxGrid** 是一个强大的JavaScript数据网格组件,它提供了丰富的功能,用于在Web应用程序中展示和操作表格数据。这个组件以其灵活性、性能和高度可定制性而受到开发者的欢迎。下面将详细介绍dhtmlxGrid的主要...

    dhtmlxgrid 1.4 pro

    **dhtmlxGrid 1.4 Pro 知识点详解** **一、dhtmlxGrid 概述** dhtmlxGrid 是一款基于JavaScript的高性能数据网格组件,它由DHX Suite提供,是一款专业的Web应用程序开发工具。dhtmlxGrid 1.4 Pro版本在早期的1.x...

    DhtmlxGrid 分页的自定义,DhtmlxGrid复选框多选整行

    DhtmlxGrid的自定义的分页样式,不是他们内部的三种皮肤分页; 本篇还有dhtmlxgird没有的复选框选中整行的效果,dhtmlxgrid多行选中使用的是 [Ctrl+鼠标]、[Shift+鼠标],在国内大部分的体验操作都是第一列放复选框的...

    dhtmlxGrid

    **dhtmlxGrid详解** dhtmlxGrid是一款强大的JavaScript数据网格组件,专为构建高度交互式的Web应用程序而设计。这款框架以其丰富的功能、优秀的性能和灵活性而受到开发者的青睐。在本文中,我们将深入探讨dhtmlx...

    DHTMLX grid复制以及分页栏跳转

    DHTMLX Grid是一款强大的JavaScript组件,它允许开发者创建交互式的数据网格,用于显示、编辑和管理大量数据。这个组件提供了丰富的功能,包括数据分页、排序、过滤、编辑等,适用于构建高性能的Web应用程序。本篇...

    dhtmlxGrid v2.0使用手册

    **dhtmlxGrid v2.0使用手册** dhtmlxGrid是一款强大的JavaScript表格控件,广泛应用于Web应用程序中,用于展示、编辑和管理大量数据。它提供了丰富的功能,包括但不限于行和列的动态添加与删除、排序、过滤、分页...

    dhtmlxgrid自定义CELL编辑事件

    dhtmlxgrid自定义CELL编辑事件 dhtmlxgrid是一个功能强大的网格控件,提供了丰富的编辑功能,包括自定义CELL编辑事件。在本篇文章中,我们将详细介绍如何自定义dhtmlxgrid的CELL编辑事件,实现自定义的编辑控件。 ...

    dhtmlxgrid 专业版 2.5 带例子

    **dhtmlxGrid 专业版 2.5 知识点详解** dhtmlxGrid是一款功能强大的JavaScript数据网格组件,适用于构建动态、交互式的Web应用。在2.5专业版中,它提供了一系列优化和改进,包括对IE9浏览器的兼容性支持。这个版本...

    dhtmlxgrid_v1.2_pro真正可用的pro版本

    **dhtmlxGrid v1.2 Pro 知识点详解** `dhtmlxGrid` 是一个功能强大的JavaScript组件,主要用于创建交互式的数据网格。在Web应用程序中,它提供了丰富的功能,如数据排序、分页、过滤、编辑以及自定义列布局等。这个...

    dhtmlxgrid专业版和其配套中文API下载

    **dhtmlxGrid专业版详解** dhtmlxGrid是一款强大的JavaScript数据网格组件,它提供了丰富的功能,用于在Web应用程序中展示、编辑和管理表格数据。这个专业版包含了完整的JavaScript库,能够帮助开发者创建功能丰富...

    dhtmlxGrid_v14_Pro_70813.rar

    **dhtmlxGrid详解** dhtmlxGrid是一款强大的JavaScript数据网格组件,由DHX公司开发。这个组件在网页应用中广泛使用,用于展示和管理大量的结构化数据。它提供了丰富的功能,包括数据编辑、排序、过滤、分页、拖放...

    改造过的DhtmlXGrid表格控件

    DhtmlXGrid是一款功能强大的JavaScript表格控件,它允许开发者在网页中创建复杂的数据网格,支持数据的排序、过滤、编辑、分页等操作。经过改造后的DhtmlXGrid控件,更加强调了对JavaScript表格一般需求的满足,提高...

    dhtmlxgrid中文帮助文档

    dhtmlXGrid是dhtmlx前台JS组件里应用最多的表格插件,被认为是最好的组件,专业人事做过一系列测试,在众多插件中,此表格表现的效率是最高的

Global site tag (gtag.js) - Google Analytics