dHtmlxGrid 介绍及使用手册(中文)

phoenixww 贡献于2013-10-15

作者 wangzh  创建于2011-11-02 08:25:00   修改者wangzh  修改于2011-11-02 09:31:00字数37556

文档摘要:dhtmlxGrid 启用Ajax的JavaScript网格控制与尖端功能,强大的数据绑定,并与大型数据集的出色表现 。组件是易于使用,并提供了极大的灵活性,由于其丰富的客户端 API 。dhtmlxGrid支持不同的数据源(XML,JSON,CSV,JavaScript数组,和HTML表格),也可以从自定义的XML格式加载。 网格组件可以轻松实现丰富的单元格内编辑和内置的好看的DHTML表(通过CSS或预定义的皮肤管理),过滤、搜索和分组功能。众多的事件处理程序,可以添加必要的交互性到您的基于网格 的接口。智能渲染和分页支持,让这个JavaScript的DataGrid有效地开展工作,甚至与庞大的数据集。
关键词:

 dHtmlxGrid使用手册 Phoenixjava 整理于2011-11-02 目录 一、 dhtmlxGrid 介绍 7 1. 自定义XML: 7 2. 支持多行表头、表尾展现 7 3. 移动、添加、删除列 8 4. 处理大型数据集-支持分页 8 5. 处理大型数据集-智能渲染 9 6. 与数据库交互 9 7. 扩展单元格-EXCEL 10 8. 拆分模式(冻结栏) 10 9. 控制于一体的网络和树 11 二、 dhtmlxgrid 配置部分 12 2.1   表格操作API 12 2.1.1 attachEvent(evName , evHandler) 12 2.1.2 attachFooter(values, style) 14 2.1.3 attachHeader(values, style) 15 2.1.4 attachToObject(obj) 16 2.1.5 destructor 17 2.1.6 detachEvent(id) 17 2.1.7 detachFooter(index) 18 2.2   表格样式API 19 2.2.1 detachHeader(index) 19 2.2.2 enableAutoHeight(mode,maxHeight, countFullHeight) 19 2.2.3 enableAutoWidth (mode, max_limit, min_limit) 20 2.2.4 enableCellIds(mode) 21 2.2.5 enableHeaderImages(fl) 21 2.2.6 init 22 2.2.7 setAwaitedRowHeight(height) 22 2.2.8 setCSVDelimiter(str) 22 2.2.9 setColAlign(alStr) 23 2.2.10 setColSorting(sortStr) 23 2.2.11 setColTypes(typeStr) 24 2.2.12 setColVAlign(valStr) 24 2.2.13 setColWidth (ind, value) 24 2.2.14 setDelimiter (delim) 25 2.2.15 setHeader (hdrStr, splitSign, styles) 25 2.2.16 setIconPath (path) 26 2.2.17 setImagePath (path) 26 2.2.18 setInitWidths (wp) 27 2.2.19 setInitWidthsP(wp) 27 2.2.20 setNoHeader(fl) 28 2.2.21 setSkin(name) 28 2.2.22 setStyle (ss_header, ss_grid, ss_selCell, ss_selRow) 29 2.2.23uid 29 三、 数据处理部分 30 3.1 dhtmlxgrid 数据加载部分 30 3.1.31 changePage(pageNum) 30 3.1.32 changePageRelative(ind) 30 3.1.33 clearAll(header) 30 3.1.34 clearAndLoad (url, call, type) 30 3.1.35 enableCSVAutoID(mode) 31 3.1.36 enableCSVHeader(mode) 31 3.1.37 enableDistributedParsing (mode, count, time) 31 3.1.38 enablePaging 31 3.1.39 enableSmartRendering (mode,buffer,reserved) 32 3.1.40 getRowAttribute (rId, name) 32 3.1.41 getStateOfView 32 3.1.43 load (url, call, type) 33 3.1.44 loadCSVFile (path,afterCall) 33 3.1.45 loadCSVString(str) 34 3.1.46 parse(data,call,type) 34 3.1.47 preventIECaching(mode) 34 3.1.48 setPagingSkin(name) 34 3.1.49 setPagingTemplates(navigation_template,info_template) 35 3.1.50 setPagingWTMode(navButtons,navLabel,pageSelect,perPageSelect) 35 3.1.51 setRowAttribute(rId, name, value) 35 3.1.52 setUserData (row_id, name, value) 35 3.1.53 startFastOperations 36 3.1.54 stopFastOperations 36 3.1.55 updateFromXML (url, insert_new, del_missed, afterCall) 36 3.2 dhtmlxgrid 保存数据操作 36 3.2.160 enableMathSerialization (mode) 37 3.2.161 serialize 37 3.2.162 serializeToCSV (textmode) 37 3.2.163 setFieldNam (mask) 37 3.2.164 setSerializableColumns (list) 37 3.2.165 setSerializationLevel (userData, selectedAttr, config, changedAttr, onlyChanged, asCDATA) 38 四、 Dhtmlxgrid操作 39 4.1 dhtmlxgrid 行操作 39 4.1.56 addRow (new_id, text, ind) 39 4.1.57 changeRowId (oldRowId, newRowId) 40 4.1.58 copyRowContent (from_row_id, to_row_id) 40 4.1.59 deleteRow(row_id) 40 4.1.60 deleteSelectedRows 40 4.1.61 doesRowExist(row_id) 41 4.1.62 enableAlterCss (cssE, cssU, perLevel, levelUnique) 41 4.1.63 enableMultiline(state) 41 4.1.64 enableRowsHover (mode, cssClass) 42 4.1.65 enableRowspan 42 4.1.66 forEachRow (custom_code) 42 4.1.67 getAllRowIds(separator) 43 4.1.68 getChangedRows (and_added) 43 4.1.69 getCheckedRows (col_ind) 43 4.1.70 getRowId(ind) 43 4.1.71 getRowIndex(row_id) 44 4.1.72 getRowsNum 44 4.1.73 getSelectedRowId 44 4.1.74 lockRow(rowId,mode) 44 4.1.75 moveRow (rowId,mode,targetId,targetGrid) 44 4.1.76 moveRowDown(row_id) 45 4.1.77 moveRowTo(srowId,trowId,mode,dropmode,sourceGrid,targetGrid) 45 4.1.78 moveRowUp(row_id) 45 4.1.79 selectRow (rIndex, fl, preserve, show) 46 4.1.80 selectRowById (row_id, preserve, show, call) 46 4.1.81 setCheckedRows (cInd,v) 46 4.1.82 setRowColor(row_id,color) 46 4.1.83 setRowExcellType (rowId, type) 47 4.1.84 setRowHidden (id, state) 47 4.1.85 setRowId (ind, row_id) 47 4.1.86 setRowTextBold (row_id) 47 4.1.87 setRowTextNormal(row_id) 48 4.1.88 setRowTextStyle (row_id, styleString) 48 4.1.89 showRow (rowID) 48 4.2 dhtmlxgrid 列操作 48 4.2.90 adjustColumnSize(cind) 48 4.2.91 deleteColumn(ind) 49 4.2.92 enableColumnMove (mode,columns) 49 4.2.93 enableHeaderMenu 49 4.2.94 enableResizing(list) 49 4.2.95 enableTooltips(list) 49 4.2.96 getColIndexById (id) 50 4.2.97 getColType(index) 50 4.2.98 getColTypeById (cID) 50 4.2.99 getColWidth (ind) 50 4.2.100 getColumnId (cin) 51 4.2.101 getColumnLabel (cin, ind) 51 4.2.102 getColumnsNum 51 4.2.103 getFooterLabel (cin, ind) 51 4.2.104 insertColumn(ind,header,type,width,sort,align,valign,reserved,columnColor) 51 4.2.105 isColumnHidden (ind) 52 4.2.106 moveColumn (oldInd,newInd) 52 4.2.107 setColumnColor (clr) 52 4.2.108 setColumnExcellType (colIndex, type) 53 4.2.109 setColumnHidden (ind, state) 53 4.2.110 setColumnId (ind, id) 53 4.2.111 setColumnIds (ids) 53 4.2.112 setColumnLabel (col, label, ind) 53 4.2.113 setColumnMinWidth (width, ind) 54 4.2.114 setColumnsVisibility (list) 54 4.2.115 setFooterLabel (c, label, ind) 54 4.3 dhtmlxgrid 单元格操作 55 4.3.116 cellById (row_id, col) 55 4.3.117 cellByIndex (row_index, col) 55 4.3.118 cells(row_id, col) 55 4.3.119 cells2 (row_index, col) 55 4.3.120 checkAll(mode) 55 4.3.121 clearChangedState 56 4.3.122 editCell 56 4.3.123 editStop 56 4.3.124 enableColSpan (mode) 56 4.3.125 enableEditEvents (click, dblclick, f2Key) 56 4.3.126 enableMarkedCells (mode) 57 4.3.127 enableMathEditing (mode) 57 4.3.128 forEachCell (rowId, custom_code) 57 4.3.129 getCombo (col_ind) 57 4.3.130 getCustomCombo (id, ind) 57 4.3.131 getMarked 58 4.3.132 getSelectedCellIndex 58 4.3.133 mark (rid,cindex,fl) 58 4.3.134 selectCell (r, cInd, fl, preserve, edit, show) 58 4.3.135 setCellExcellType (rowId, cellIndex, type) 59 4.3.136 setCellTextStyle (row_id, ind, styleString) 59 4.3.137 setColspan (row_id, col_ind, colspan) 59 4.3.138 setDateFormat (mask) 60 4.3.139 setEditable (mode) 60 4.3.140 setMathRound (digits) 60 4.3.141 setNumberFormat (mask, cInd, p_sep, d_sep) 60 4.3.142 setRowspan (rowID,colInd,length) 61 4.3.143 uncheckAll 61 4.3.144 unmarkAll 61 4.4 dhtmlxgrid 选择过滤操作 61 4.4.144 clearSelection 61 4.4.145 enableBlockSelection(mode) 62 4.4.146 enableMultiselect (state) 62 4.4.147 forceLabelSelection(mode) 62 4.4.148 selectAll 62 4.4.149 enableStableSorting (mode) 62 4.4.150 getSortingState 63 4.4.151 setCustomSorting (func, col) 63 4.4.152 setSortImgState (state, ind, order, row) 63 4.4.153 sortRows (col, type, order) 64 4.4.154 collectValues (column) 64 4.4.155 filterBy (column, value, preserve) 64 4.4.156 filterByAll 65 4.4.157 findCell (value, c_ind, first) 65 4.4.158 getFilterElement (index) 65 4.4.159 makeFilter (id,column,preserve) 66 一、 dhtmlxGrid 介绍 dhtmlxGrid 启用Ajax的JavaScript网格控制与尖端功能,强大的数据绑定,并与大型数据集的出色表现 。组件是易于使用,并提供了极大的灵活性,由于其丰富的客户端 API 。dhtmlxGrid支持不同的数据源(XML,JSON,CSV,JavaScript数组,和HTML表格),也可以从自定义的XML格式加载。 网格组件可以轻松实现丰富的单元格内编辑和内置的好看的DHTML表(通过CSS或预定义的皮肤管理),过滤、搜索和分组功能。众多的事件处理程序,可以添加必要的交互性到您的基于网格 的接口。智能渲染和分页支持,让这个JavaScript的DataGrid有效地开展工作,甚至与庞大的数据集。 作为一个100%的客户端的JavaScript解决方案,dhtmlxGrid可以集成与任何服务器端技术(PHP,JAVA的Ruby - on – Rails等 )。dhtmlxConnector库Ajax支持,提供实时保存和更新服务器上的网格数据的情况下自动重新加载页面的能力。 dhtmlxGrid支持强大的功能,如必要的基于Web的电子表格、合并单元格、拆分模式、网格列拖动和拖放或脚本方法和数据复制到剪贴板(CSV格式) 。AJAX DataGrid的可扩展架构允许您使用自定义单元格编辑器(每一个细胞的基础上)的外部元件,提供的能力,极大地丰富了网格功能。 DHTMLX库的一部分,dhtmlxGrid可以很容易地与其他元件集成在一个共同的应用程序使用的接口 dhtmlxLayout。有了一个新的皮肤,在2.5版 ​​本中引入,所有DHTMLX组件了光滑和干净的外观,它可以完全匹配任何现代的网站或应用程序的设计。 dhtmlxGrid表格展现通过加载XML文件来载入表头、表尾、表格数据实现展现、操作、回写功能; 1. 自定义XML: Ø dhtmlxGrid V1.6以来,可以加载自己的模式定义XML加载网格。可以定义标签顶部,行和单元格元素的名称和编码。 Ø 此外,行或一个单元格的标记中包含的任何属性可以访问内部网格API函数。 2. 支持多行表头、表尾展现 Ø 在网格中的页眉和页脚可以包含多个行与合并单元格/ ROWSPAN的各种组合。每个单元格可以包含简单的文字或复杂的HTML对象; Ø 可以添加新的标题行,并使用合并单元格申请必要的格式; Ø 表格中可以添加页脚,也可以合并单元格和活动内容; 图(4.2.1) 3. 移动、添加、删除列 Ø dhtmlxGrid专业版允许列可以使用脚本或直接与用户的鼠标移动。 Ø 另外,还有一些从表格中添加和删除列的脚本方法。 图(4.2.2) 4. 处理大型数据集-支持分页 Ø 分页管理网格内的大量记录,并使其看起来更加美观舒适。dhtmlxGrid分页输出的很好的是,你可以在任何一个单一的JavaScript命令的网格启用,它没有任何改变在网格配置; Ø dhtmlxGrid交互使用非线性缓冲区,这使得它更加有用,因为它呈现其中包括页面上的位置; Ø 虽然dhtmlxGrid标准版交互准备(可以实现使用脚本API),完整的分页支持,包括能够使用dhtmlxToolbar的,但仅在专业版中实现。 图(4.2.3) 5. 处理大型数据集-智能渲染 Ø 智能渲染是一项强大的功能,提高性能,有大量的记录表。这一机制的主要优点是能够呈现表数据(这个过程是最慢在DHTML的),只有当它获取到可见光区(滚动时)。 Ø 与此同时,大多数API方法将仍然能够运作,无形的内容 - 即,加载到浏览器的内容,但不呈现在页面上。使用智能渲染,加上动态加载,你可以用大量的数据,同时仍保持性能不变的速度。 6. 与数据库交互 Ø dhtmlxDataProcessor和dhtmlxConnector为dhtmlxGrid管理加载/更新服务器端的数据的过程 。它可以被配置为特定的数据源。 Ø dhtmlxConnector支持PHP5和Java与MySQL,PostgreSQL里,Oracle, SQLServer,和ASP.NET与SQL Server。其客户端层可用于任何其他的服务器端技术 。 图(4.2.4) 7. 扩展单元格-EXCEL Ø 允许更大的灵活性,dhtmlxGrid EXCELL(扩展单元)使用一个独特的机制来定义的数据格式和编辑的每一列(单元)的数据的方式。我们的AJAX网格控件提供了多种单元格格式,包括文字、图像、组合框、列表框、复选框、单选按钮、链接、价格等,如果单元格中包含多行文本,它可以自动弹出文本编辑器。 Ø 随着列编辑/格式(文字、组合框、复选框等)的标准方法,有特殊EXCELL d​​htmlxGrid包中包含的类型。例如,表上现场演示使用一个特定的EXCEL类型的代表在销售和价格列的动态数据(关于建立和使用新EXCELL类型的详细信息,请参阅API文档)。 8. 拆分模式(冻结栏) Ø 当一些列需要保持独立的水平滚动位置,可以实施冻结列和网格分成两部分的操作。 图(4.2.5) 9. 控制于一体的网络和树 Ø dhtmlxTreeGrid是一个JavaScript的UI组件,结合一个TreeView和一个可编辑的网格。 Ø 它是基于dhtmlxGrid,部署网格控件的所有功能,使两个层次和表格数据演示。 图(4.2.6) 1) dhtmlxTreeGrid Ø dhtmlxTreeGrid是一个跨浏览器JavaScript的组件,旨在代表在层次结构视图的表格数据。它是基于我们的AJAX / DHTML的电网控制 , dhtmlxGrid,并结合树视图和编辑的网格 。 Ø Ajax支持和丰富的JavaScript API的treegrid带来了极大的灵活性,允许您创建完全可定制,可扩展行的动态表 。高级数据输入功能,使treegrid更多的互动,让用户输入和编辑表中的数据以直观的方式 。 Ø 能够动态地展开和折叠分配到相应的树项目表中的行使得这个treegrid控制一个完美的解决方案,显示表行的数量不受限制。要处理大量的数据有效,dhtmlxTreeGrid还提供等功能的智能XML解析(渲染节点开放动态的网格行), 智能渲染(渲染只在可见光区的行)以及 分页支持。 Ø 二、 dhtmlxgrid 配置部分    Dhtmlx是一个半开源的js框架,说是半开源,因为它的有些脚本是收费的。总体感觉很轻巧,可依赖的东西不多,和ext这样的庞然大物,dhtmlx应该定位为一个tool更为合适。我自己一直在使用,很喜欢它。因为网上好像没看见可用的API中文翻译,今天终于鼓起勇气来做这件事情,纯属个人爱好,大伙见笑了,其实我的英文不好,大学四年,英语就挂过四次。好,不废话了,这就开始。 中文操作手册部份 来源于:http://blog.sina.com.cn/warison1981  感谢“刀光剑影”。 2.1   表格操作API 2.1.1 attachEvent(evName , evHandler) 版本:大众版 参数: evName  可定义事件名称 evHandler 用户自定义处理函数. 用途:对当前grid事件绑定用户的自定义的处理js函数,这里支持两种格式定义 1) 匿名函数定义   2) 命名函数定义    这里也支持一个事件绑定多个处理函数的方法   执行顺序为doOnCheck1 –》doOnCheck2,这里可以用于通过全局js变量实现grid连动效果的实现。如,先onRowSelect获得当前选中单元格的值,针对当前值,定义一个函数改变当前cell的样式等,当然这样的操作也可以一个function中实现,这里定义为分离,可实现两个函数的被其他地方公共使用。 Grid中可供绑定的事件,参考grid事件介绍。 2.1.2 attachFooter(values, style) 版本:专业版 参数: values:增加行的每个单元格值,以数组的形式给出,这里支持html的值表示 style:单元格的样式 用途: 在grid的最后动态新增一行(表脚),注意当前表脚不会随上下滚动条一起移动,并设置各单元数据和格样式 可供参考实例: //数组形式   grid.attachFooter("A,B,C,D");    //数组形式   grid.attachFooter(["A","B","C","D"])    //跨列增加   grid.attachFooter("A,#cspan,C,#cspan");   //跨行增加   grid.attachFooter("A,#rspan,C,#rspan");   //表达式html值   grid.attachFooter ("A,B,C,D");   //指定各单元格样式   grid.attachFooter ("A,B,C,D",["","color:red;","",""]);   在onload事件中调用   grid.load("grid.xml",function(){           grid.attachFooter ('A,B,C');           grid.attachFooter ('G,H,I');           grid.setSizes();//文档上说这里必须加上,但没发现其必要性      });   2.1.3 attachHeader(values, style) 版本:大众版 参数: values:增加行的每个单元格值,以数组的形式给出,这里支持html的值表示 style:单元格的样式 用途: 定义grid的表头,注意当前表头不会随上下滚动条一起移动,并设置各单元数据和格样式 具体运用与attachHeader类似 2.1.4 attachToObject(obj) 版本:大众版 参数: Obj:当前绑定的grid的对象 用途: 将当前定义grid对象重新绑定到某个容器中,可实现grid在页面上容器间(如div)的动态切换,好像不能重新绑定到原有的容器定义,使用原有的容器仅是display=none而已,因为:通过alert 容器的innerHTML发现,原有容器和新绑定容器值一致 参考实例:  
                                       
   
          
              
          
        2.1.5 destructor 版本:大众版 参数: Obj:当前绑定的grid的对象 用途: 彻底销毁当前grid在页面中的使用,并释放其对象占用的资源(如js数组置空等),若重新使用,必须通过init创建,有别于clearAll,后者仅把grid中的所有行删除,grid本身还可以进行数据的重填充。 这里也可以采用比较暴力的销毁方式,其grid负载的容器.innerHTML = “ ”;即可,但这样grid创建的全局js变量没有完成销毁过程 参考实例:无 2.1.6 detachEvent(id) 版本:大众版 参数: id 事件序号,全局唯一 用途: 删除grid中某个事件的处理过程 参考实例:无 2.1.7 detachFooter(index) 版本:专业版 参数: index 表脚索引 用途: 删除grid的某个表脚,与attachFooter配对使用  参考实例:无 2.2   表格样式API 2.2.1 detachHeader(index) 版本:大众版 参数: index 表头索引 用途: 删除grid的某个表头,与attachHeader配对使用 参考实例:无 2.2.2 enableAutoHeight(mode,maxHeight, countFullHeight) 版本:大众版 参数: mode: true/false maxHeight: 最大无滚动高度,默认为无限制 countFullHeight: 最大高度计算方式,true 最大高度表示所有表格高度总和,false 仅表示数据表格的高度总和,即除去header 和 footer,默认为false。 用途: 当前表格是否设置为高度自适应,并可设定默认最大高度。 参考实例: //高度自适应    mygrid.enableAutoHeight(true);    //高度非自适应    mygrid.enableAutoHeight(false);    //高度自适应,且定义最大高度为100,当前最大高度仅指数据表格部分    mygrid.enableAutoHeight(true,100);    //高度自适应,且定义最大高度为100,当前最大高度数据表格\表头\表脚    mygrid.enableAutoHeight(true,100,true); 2.2.3 enableAutoWidth (mode, max_limit, min_limit) 版本:大众版 参数: mode: true/false max_limit: 最大无滚动宽度,默认为无限制。 min_limit: 最小无滚动宽度,默认为无限制。 用途: 当前表格是否设置为宽度自适应,并可设定默认最大宽度、最小宽度。 参考实例: //宽度自适应    mygrid.enableAutoWidth(true);    //宽度非自适应    mygrid.enableAutoWidth(true);    //宽度自适应,并且设置最大、最小宽度    mygrid.enableAutoWidth(true,600,100); 2.2.4 enableCellIds(mode) 版本:大众版 参数: mode: true/false 用途: 当前表格中单元格索引是否要求唯一。(id 是以如下模式“c_[行索引]_[列索引]” 自增的) 参考实例: 无 2.2.5 enableHeaderImages(fl) 版本:大众版 参数: mode: true/false,默认为false 用途: 是否在表头定义中使用image文件,即当前表头是否可以使用图片。默认为false,即可以使用,这里可能是个bug或陷阱,既然是false为什么还可以使用呢? 参考实例: mygrid.enableHeaderImages(false);//可以在表头中定义图片 mygrid.setHeader("无图片,img:[imgs/true.gif]With Icon "); //img:[imgs/true.gif]With Icon为图片+表头定义格式。 但这里有个bug大伙需要修改下,即在dhtmlxgrid.js中有这么一句: var imUrl=label.replace(/.*\[([^>]+)\]/,"$1"); 真确应该写为:var imUrl=label.replace(/.*\[([^>]+)\].*/,"$1");不然没法子替换]With Icon后的字符串。即image的路径就不对了。 2.2.6 init 版本:大众版 参数: 用途:grid初始化操作,与destructor方法相反 参考实例: 2.2.7 setAwaitedRowHeight(height) 版本:大众版,需要dhtmlxgrid_srnd.js的支持 参数: Height:行高度 用途:设置grid计算行的高度 参考实例: mygrid.setAwaitedRowHeight(25); 2.2.8 setCSVDelimiter(str) 版本:大众版,需要dhtmlxgrid_nxml.js的支持 参数: str:csv格式文件风格符 用途:依据当前分割符解析csv文件 参考实例: mygrid.setCSVDelimiter(":");//设置风格符为 : var  str="11:12:13\n21:22:23\n31:32:33";//csv格式字符串 mygrid.loadCSVString(str);//加载csv字符串 2.2.9 setColAlign(alStr) 版本:大众版 参数: alStr: 各列数据布局字符串组合,逗号隔开 用途:设置列数据的水平布局 参考实例: mygrid.setColAlign("right,left,center,justify"); 2.2.10 setColSorting(sortStr) 版本:大众版 参数: sortStr: 各列数据排序类型的字符串组合,逗号隔开 用途:设置列数据的排序类型 参考实例: mygrid.setColSorting("int,str,date,na,sortingFunction"); 2.2.11 setColTypes(typeStr) 版本:大众版 参数: typeStr: 各列数据的类型字符串组合,逗号隔开 用途:设置列数据的数据类型 参考实例: mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro"); 2.2.12 setColVAlign(valStr) 版本:大众版 参数: valStr: 各列数据垂直布局字符串组合,逗号隔开 用途:设置列数据的垂直布局 参考实例: mygrid.setColVAlign("top,middle,bottom,top,top,sub"); 2.2.13 setColWidth (ind, value) 版本:大众版 参数: ind: 列索引 value: 宽度值 用途:设置某列数据的宽度 参考实例: mygrid.setColWidth(0,"150"); 2.2.14 setDelimiter (delim) 版本:大众版 参数: delim: 分隔符,默认为逗号 , 用途:设置grid中分隔符合,默认为逗号 参考实例: mygrid.setDelimiter(";");//分号为分隔符 mygrid.setHeader("First Column;Second Column;Third Column"); 2.2.15 setHeader (hdrStr, splitSign, styles) 版本:大众版 参数: hdrStr: 表头内容lable字符串组合; splitSign: 分隔标志 默认为 #cspan style: 表头各列样式 用途:设置grid中表头、样式等 参考实例: //设置表头 mygrid.setHeader("A,B,C"); //设置表头样式 mygrid.setHeader("A,B,C",null,["text-align:right;","text-align:left;","text-align:center"]); 2.2.16 setIconPath (path) 版本:大众版 参数: path: icon文件路径; 用途:设置grid中引用icon图片路径,一般在grid中使用tree或列中使用icon时定义 参考实例: mygrid.setIconPath("../codebase/imgs/icons_greenfolders/"); 2.2.17 setImagePath (path) 版本:大众版 参数: path: image文件路径; 用途:设置grid中引用图片路径,如排序图片,checkbox图片,背景等 参考实例: mygrid.setImagePath("../codebase/imgs/"); 2.2.18 setInitWidths (wp) 版本:大众版 参数: wp:各列初始化宽度字符串组合; 用途:设置grid中各列初始化宽度 参考实例: //明确设置各列宽度,如当前宽度不足,表头将自动折行,数据单元格自动截断显示 mygrid.setInitWidths("150,100,100,100,100"); //明确某列宽度为0,即当前列将不显示,可以用于隐藏数据等 mygrid.setInitWidths("0,100,100,100,100"); //设置当前宽度自动平均分配,即最大宽度-定义宽度/ 自动宽度定义的数量 mygrid.setInitWidths("*,*,100,100,100"); 2.2.19 setInitWidthsP(wp) 版本:大众版 参数: wp:各列初始化宽度百分比字符串组合; 用途:设置grid中各列初始化宽度百分比 参考实例: //明确设置各列宽度百分比,即保证设置值相加为100 mygrid.setInitWidthsP("50,40,10"); 2.2.20 setNoHeader(fl) 版本:大众版 参数: fl:true/false; 用途:设置grid中是否定义表头,需要在init执行前调用 参考实例: //mygrid.setNoHeader(true); 2.2.21 setSkin(name) 版本:大众版 参数: name:grid的皮肤名称 用途:设置grid中的外形皮肤,可供选择的皮肤名称为xp, mt, gray, light, clear, modern, sb_dark。 参考实例: //设置grid皮肤 mygrid.setSkin("light");//set "light" skin to the grid 2.2.22 setStyle (ss_header, ss_grid, ss_selCell, ss_selRow) 版本:大众版 参数: ss_header:表头样式定义表达式 ss_grid:表格单元格样式定义表达式 ss_selCell: 选中单元格样式定义表达式 ss_selRow:选中行样式定义表达式 用途:设置grid的各元素样式。 参考实例: //mygrid.setStyle("background-color:navy;color:white; font-weight:bold;", "","color:red;", ""); 2.2.23uid 版本:大众版 参数: 用途:通过grid对象生成一个唯一uid值。可视为一个工具接口 参考实例: // var uniqueID=mygrid.uid(); 三、 数据处理部分 3.1 dhtmlxgrid 数据加载部分 3.1.31 changePage(pageNum) 版本:专业版 需要dhtmlxgrid_pgn.js支持 参数: pageNum:跳转页面数 用途:跳转到某个页面 参考实例: grid.changePage(5); 3.1.32 changePageRelative(ind) 版本:专业版 需要dhtmlxgrid_pgn.js支持 参数: Ind:跳转页面的间隔数 用途:相对当前页面跳转到某个页面,即this.changePage(this.currentPage + ind);。 参考实例: 上一页 下一页 3.1.33 clearAll(header) 版本:大众版 参数: Header: true/false是否删除表头 用途:删除。 参考实例: 上一页 下一页 3.1.34 clearAndLoad (url, call, type) 版本:大众版 参数: url: 文件路径 call:加载完成后回调函数 type:文件类型( xml, json, jsarray, csv ),默认为xml 用途:清除当前grid数据并使用当前文件重新加载。 参考实例: // mygrid.clearAndLoad("grid_new.xml");  //加载完成后执行doAfterRefresh函数 mygrid.clearAndLoad("grid_new.xml",doAfterRefresh); //指定当前文件支持格式 mygrid.clearAndLoad("grid_new.csv",doAfterRefresh,”csv”); 3.1.35 enableCSVAutoID(mode) 版本:专业版 需要dhtmlxgrid_nxml.js支持 参数: mode: true/false 用途:csv数据加载时是否自动生成行id。 参考实例: mygrid.enableCSVAutoID(true); 3.1.36 enableCSVHeader(mode) 版本:专业版 需要dhtmlxgrid_nxml.js支持 参数: mode: true/false 用途:csv数据加载时是否自动使用第一行数据作为表头。 参考实例: mygrid.enableCSVHeader(true); 3.1.37 enableDistributedParsing (mode, count, time) 版本:专业版  参数: mode: true/false; count:每次解析数据量,默认10 time:设定延迟时间,毫秒,默认为 250 用途:是否使用分布式解析数据,并设定每次解析节点数据量,或延迟时间。 参考实例: //使用分布式解析 mygrid.enableDistributedParsing(true); //分布式解析,每次解析50个节点,延迟时间2s内 mygrid.enableDistributedParsing(true,50,2000); 3.1.38 enablePaging (mode,pageSize,pagesInGrp,pagingControlsContainer,showRecInfo,pagingStateContainer) 版本:专业版 需要dhtmlxgrid_pgn.js 参数: mode: true/false; pageSize:每页大小 pagesInGrp:每页显示可选择页数 pagingControlsContainer:显示分页条的容器对象,或id showReclnfo:true|false 是否显示分页数据状态 pagingStateContainer:显示分页数据状态的容器对象,或id 用途:是否使用分页操作,在init前执行。当前方法与enableSmartRendering and enableDistributedParsing不兼容。 参考实例: mygrid.enablePaging(true,2,5,"pagingArea",true,"recinfoArea"); 3.1.39 enableSmartRendering (mode,buffer,reserved) 版本:大众版 需要dhtmlxgrid_srnd.js 参数: mode: true/false; buffer:总数据量 reserved:预加载量 用途:是否允许使用动态加载模式 参考实例: mygrid.enableSmartRendering(true);//with single-time loaded data //动态加载,总数据量2000,每次加载50 mygrid.enableSmartRendering(true,2000,50);//with dynamcical loading 3.1.40 getRowAttribute (rId, name) 版本:大众版 参数: rid: 行索引; name:属性名称 用途:获得某行节点的属性值 参考实例:         cell content      ... var rowAttr = grid.getRowAttribute("unique_rowid","some"); 3.1.41 getStateOfView 版本:大众版 参数:  用途:返回grid 状态 参考实例: var state=mygrid.getStateOfView(); //翻页模式可用时 state[0] = grid当前第几页 state[1] = 当前页面第一行索引 state[2] = 当前页面最后下一行索引 state[3] = 当前grid记录总记录数 //翻页模式不可用时 state[0] = 最前可视化行索引 state[1] = row可视化高度 state[2] = grid行数 3.1.42 getUserData(row_id, name) 版本:大众版 参数:  row_id: 行索引,不填则查找全局 name: userdata名称 用途:某行或全局userdata值,如row_id为空则查找全局,若存在多个userdata节点,则以第一个为主 参考实例: 全局userdata 行内userdata cell content cell content]]> //行内 var userdata = grid.getUserData("unique_rowid","NameOfRowUserDataBlock"); //全局user data var userdata = grid.getUserData("","NameOfGlobalUserDataBlock"); 3.1.43 load (url, call, type) 参考clearAndLoad 3.1.44 loadCSVFile (path,afterCall) 与load相识,只不过type为”csv”而已 3.1.45 loadCSVString(str) 版本:专业版 需要 dhtmlxgrid_nxml.js 参数:  str: 数据字符串 用途:以字符串形式加载 参考实例: var  str="11,12,13\n21,22,23\n31,32,33"; mygrid.loadCSVString(str); 3.1.46 parse(data,call,type) 版本:大众版 参数:  data: 字符串或js对象 call: 回调函数 type: 数据类型 (xml,json,jsarray,csv) 用途:以字符串或对象的形式加载grid对象,支持格式(xml string, csv string, xml island, xml object, json objecs , javascript array) 参考实例: //xml 字符串或xmldoc    mygrid.parse(data); //js数组    //parse grid from the javascript array    mygrid.parse(data,””,"jsarray");    3.1.47 preventIECaching(mode) 版本:大众版 参数:  mode: true/false 用途:阻止ie缓存当前请求值 参考实例: mygrid.preventIECaching(true); //disable prevent IE caching mode mygrid.preventIECaching(false); 3.1.48 setPagingSkin(name) 版本:大众版 参数:  name: 皮肤名称 用途:设置分页皮肤,支持default,toolbar,bricks 参考实例: mygrid.setPagingSkin("toolbar"); 3.1.49 setPagingTemplates(navigation_template,info_template) 版本:大众版 dhtmlxgrid_pgn.js 参数:  navigation_template: 导航模版信息 info_template:状态模版信息 用途:设置分页模版 参考实例: mygrid.setPagingTemplates("Pages - [current:0] [current:+1] [current:+2] , from [total] rows","Pages [from]-[to] of [total]"); 3.1.50 setPagingWTMode(navButtons,navLabel,pageSelect,perPageSelect) 版本:专业版 dhtmlxgrid_pgn.js 参数:  navButtons - {true|false} 导航button是否可用 navLabel - {true|false} 导航lable是否可用 pageSelect - {true|false} 页面选择框是否可用 perPageSelect - {true|false} 每页显示条数选择框是否可用 用途:设置分页工具条的模式 参考实例: 3.1.51 setRowAttribute(rId, name, value) 版本:大众版 参数:  rid:行索引 name:属性名称 value:属性值 用途:设置某行节点属性值 参考实例:                                           cell content                          ...  var rowAttr = grid.setRowAttribute("unique_rowid","some","new value"); 3.1.52 setUserData (row_id, name, value) 版本:大众版 参数:  rid:行索引 name:userdata节点属性名称 value:设置值 用途:设置某行或全局userdata值 参考实例: //设置某行userdata值 mygrid.setUserData("unique_rowid","someName1","new value"); //设置全局userdata值 mygrid.setUserData("","someName1","new value"); 3.1.53 startFastOperations 版本:大众版 需要dhtmlxgrid_fast.js 参数:  用途:开启快速操作,开启后事件操作将不会作用,除一些强制事件外 参考实例: mygrid.startFastOperations(); for (var i=0; i<1000; i++) mygrid.addRow(mygrid.uid(),[i,"new row"]); mygrid.stopFastOperations(); 3.1.54 stopFastOperations 关闭快速操作,参考startFastOperations 3.1.55 updateFromXML (url, insert_new, del_missed, afterCall) 版本:大众版  参数:  url:引用文件路径 inser_new:是否重新插入行,默认 true; del_missed:是否删除,原有数据行 afterCall:回调函数 用途:根据xml文件重新刷新grid,并自动屏蔽重复ind 参考实例: mygrid.updateFromXML("grid_updated.xml"); //插入新数据,删除原有数据  mygrid.updateFromXML("grid_updated.xml",true,true,doAfterUpdate); 3.2 dhtmlxgrid 保存数据操作 3.2.160 enableMathSerialization (mode) 版本:专业版 需要dhtmlxgrid_math.js支持 参数: mode:true/false 用途:设置运算公式序列化 参考实例: mygrid.enableMathSerialization(true); 3.2.161 serialize 版本:专业版 参数:  用途:返回构建当前grid的xml数据字符串 参考实例: var str=mygrid.serialize(); 3.2.162 serializeToCSV (textmode) 版本:专业版 需要dhtmlxgrid_nxml.js支持 参数:  textmode:true/false 用途:返回构建当前grid的csv数据 参考实例: var csv=mygrid.serializeToCSV(); //只有text内容被序列化,忽略html元素 var csv=mygrid.serializeToCSV(true); 3.2.163 setFieldNam (mask) 暂时没用到 3.2.164 setSerializableColumns (list) 版本:专业版 参数:  list:是否序列化当前列 用途:设置grid各列是否序列化 参考实例: mygrid.setSerializableColumns("true,false,false,true,false,false,false"); 3.2.165 setSerializationLevel (userData, selectedAttr, config, changedAttr, onlyChanged, asCDATA) 版本:专业版 参数:  userData:true/false  是否使用当前数据序列化 selectedAttr:true/false 在被选中的xml节点中包含selected属性标识被选中  如 config:true/false  是否包含节点,罗列各列配置信息 changedAttr:true/false 是否修改的单元格中,在节点中包含是否修改属性 onlyChanged:true/false 是否仅包含修改过的row节点 asCDATA:true/false 是否使用CDATA格式,避免无效字符 用途:设置grid序列化配置 参考实例: mygrid.setSerializationLevel(true,true,false,true,false,true); 1.3 个人使用后记 使用发现bug修改记录: 1.在dhtmlxgrid.js中有这么一句: var imUrl=label.replace(/.*\[([^>]+)\]/,"$1"); 真确应该写为:var imUrl=label.replace(/.*\[([^>]+)\].*/,"$1");不然没法子替换]With Icon后的字符串。即image的路径就不对了。 2. 注意在2.5版本中 dhtmlxgrid.js 中503行处 var next=Math.max((this._drsclmW ? this._drsclmW[fcols[i]]: 0),ms); 这里没有增加对this._drsclmW[fcols[i]]是否可用校验。 应改为: var next=Math.max((this._drsclmW ? (this._drsclmW[fcols[i]]? this._drsclmW[fcols[i]]:0) : 0),ms); 3.由于parse采用的是同步加载数据的模式,所以可以自行扩展支持当前grid加载完毕后相应处理函数,不过实际上parse也提供回调函数接口 4 虽然grid提供了丰富的列格式定义,但这里可以自行定义,主要是修改dhtmlxgridcell.js即可。给个参考,新增一个带下划线的格式edu,这样可以配合onRowSelect事件实现单元值下划线连接方式 在dhtmlxgridcell.js中新增如下: function eXcell_edu(cell) { if (cell) { this.cell = cell; this.grid = this.cell.parentNode.grid; } this.getValue = function () { if ((this.cell.firstChild) && ((this.cell.atag) && (this.cell.firstChild.tagName == this.cell.atag))) { return this.cell.firstChild.value; } if (this.cell._clearCell) { return ""; } return (_isIE ? this.cell.innerText : this.cell.textContent); }; this.setValue = function (val) { if (!val || val.toString()._dhx_trim() == "") { val = " "; this.cell._clearCell = true; } else { this.cell._clearCell = false; } this.setLabel("" + val + ""); }; } eXcell_edu.prototype = new eXcell_ed; 5 对于需要隐藏的数据列,也可以采用定义列宽为0的方式 6 getRowId(ind),如果数据没有指定id值,则返回 id = 当前行索引+1; 四、 Dhtmlxgrid操作 4.1 dhtmlxgrid 行操作 4.1.56 addRow (new_id, text, ind) 版本:大众版  参数:  new_id:行id grid中唯一 text:行内容,多列数据以分隔符合隔开字符串,或以数组形式提供 inx:行索引,行序号等,选填,默认在最后一行新增 用途:在grid中新增一行 参考实例: grid.addRow(newId,"text1,text2",1); grid.addRow(newId,["text1","text2"],2); 4.1.57 changeRowId (oldRowId, newRowId) 版本:大众版  参数:  oldRowId:原id值 newRowId:新id值 grid 中唯一 用途:修改某行id值 参考实例: mygrid.changeRowId("old_rowID","new_rowID"); 4.1.58 copyRowContent (from_row_id, to_row_id) 版本:大众版  参数:  from_row_id:源行id to_row_id:目标行id 用途:拷贝某行数据到目标行 参考实例: mygrid.copyRowContent("from_row_id","to_row_id"); 4.1.59 deleteRow(row_id) 版本:大众版  参数:  row_id:行id 用途:通过行id删除目标行 参考实例: mygrid.deleteRow("row1"); 4.1.60 deleteSelectedRows 版本:大众版  参数:  用途:删除当前选中行数 参考实例: mygrid.deleteSelectedRows(); 4.1.61 doesRowExist(row_id) 版本:大众版  参数:  row_id: 行id 用途:通过row_id检查是否行存在 参考实例: var exist=mygrid.doesRowExist("some_row_ID"); 4.1.62 enableAlterCss (cssE, cssU, perLevel, levelUnique) 版本:大众版  参数:  cssE:偶数行样式名称(序号为准) cssU:奇数行样式名称 perLevel:是否排序、分层。默认为true,但在treegrid默认为false levelUnique:否成存在唯一层 用途: 参考实例: 4.1.63 enableMultiline(state) 版本:大众版  参数:  state:true/false 用途:是否多选行模式 参考实例: mygrid.enableMultiline(true); 4.1.64 enableRowsHover (mode, cssClass) 版本:大众版  参数:  mode:true/false cssClass:样式名称,样式 用途:鼠标滑过当前行是否改变样式 参考实例: 4.1.65 enableRowspan 版本:专业版 需要dhtmlxgrid_rowspan.js   参数:  用途:设置当前grid跨行可用 参考实例: mygrid.enableRowspan(); 4.1.66 forEachRow (custom_code) 版本:大众版   参数: custom_code:自定义js操作 用途:遍历当前行操作,提供rowid,供用户扩展自定义js操作 参考实例: mygrid.forEachRow(function(id){       //自定义js操作       //id - row's id }); 4.1.67 getAllRowIds(separator) 版本:大众版   参数: separator:分隔符,默认为逗号 用途:获得所有行id,并与分隔符组合 参考实例: //默认分隔符 var ids=mygrid.getAllRowIds(); //retrun list of row ids with dot delimiter var ids=mygrid.getAllRowIds("."); 4.1.68 getChangedRows (and_added) 版本:专业版   参数: and_added:true/false 用途:获得当前修改行的所有rowid组合,是否包含新增行 参考实例: //获得修改行的rowid的组合 var ids=mygrid.getChangedRows(); //获得修改行的rowid的组合,包含新增行 var ids=mygrid.getChangedRows(true); 4.1.69 getCheckedRows (col_ind) 版本:大众版   参数: col_ind:ck所在列索引 用途:获得当前选中行的所有rowid组合 参考实例: var checked=mygrid.getCheckedRows(0); 4.1.70 getRowId(ind) 版本:大众版   参数: ind:行索引 用途:通过行索引获得行id 参考实例: var rowID=mygrid.getRowId(0); 4.1.71 getRowIndex(row_id)  版本:大众版   参数: row_id:行id 用途:通过行id获得行索引 参考实例: var rowID=mygrid.getRowId(0); 4.1.72 getRowsNum 版本:大众版   参数: 用途:通过grid中行数量 参考实例: 4.1.73 getSelectedRowId 版本:大众版   参数: 用途:获得当前选中行id,多个以分隔符组合 参考实例: 4.1.74 lockRow(rowId,mode) 版本:大众版   参数: rowid:行id mode:true/false 用途:是否锁定当前行,锁定后不可再编辑 参考实例: mygrid.lockRow("row1",true); 4.1.75 moveRow (rowId,mode,targetId,targetGrid) 版本:专用版 dhtmlxgrid_drag.js支持 参数: rowId:源rowid mode:移动方向 up,down,row_sibling targetId:目标rowid(跨grid),则移动到顶部 targetGrid:目标grid(跨grid) 用途:一个或多个grid间移动row 参考实例: //向上移动row mygrid1.moveRow("row1","up"); //移动row1到mygrid2的row2之后 mygrid1.moveRow("row1","row_sibling","row2",mygrid2); 4.1.76 moveRowDown(row_id) 版本:大众版  参数: rowId:行id 用途:向下移动当前行 参考实例: 4.1.77 moveRowTo(srowId,trowId,mode,dropmode,sourceGrid,targetGrid) 版本:专业版 dhtmlxgrid_drag.js 参数: srowId:源rowid trowId:目标rowid 为空,则移动到顶部 mode:操作方式“move” or “copy”:copy是源grid保留当前row,反之则删除 dropmode:移动方式 同级或子级“sibling” or “child” (默认同级下方) sourceGrid:源grid,默认当前grid中 targetGrid:目标grid默认当前grid中 用途:一个或多个grid间移动row 参考实例: //同一grid中移动 mygrid1.moveRowTo("row1","row2","move"); //不同grid中拷贝 var movedId=mygrid1.moveRowTo("row1","row2","copy","child",mygrid1,mygrid2); 4.1.78 moveRowUp(row_id) 版本:大众版 参考 moveRowDown 4.1.79 selectRow (rIndex, fl, preserve, show) 版本:大众版 参数: rIndex:行索引或行对象 fl:true/false是否触发选中事件function preserve:true/false 是否保存原有选中行,true时必须保证多选模式可用 show:是否自动滚动显示选中行,默认true 用途:行选择 参考实例: mygrid.selectRow(0); mygrid.selectRow(0,true,true,true); 4.1.80 selectRowById (row_id, preserve, show, call) 版本:大众版 参数: row_id:行id call:true/false是否触发选中事件function preservel:true/false 是否保存原有选中行,true时必须保证多选模式可用 show:是否自动滚动显示选中行,默认true 用途:行选择 参考实例: 4.1.81 setCheckedRows (cInd,v) 版本:大众版 参数: cInd:列索引 v:是否选中 0 不选中,1 选中 用途:设置grid中行是否全选中 参考实例: mygrid.setCheckedRows(0,1);//全选中 mygrid.setCheckedRows(0,0); //全不选 4.1.82 setRowColor(row_id,color) 版本:大众版 参数: row_id:行id color:颜色 用途:设置某行背景颜色,grid加载后使用 参考实例: mygrid.setRowColor("row1","red"); 4.1.83 setRowExcellType (rowId, type) 版本:专业版 参数: rowId:行id type:excell类型(cp\calck\dhxCalendar\dhxCalendarA\calendar\clist) 用途:设置某行数据为复杂的扩展类型 参考实例: mygrid.setRowExcellType("row1","ra_str"); 4.1.84 setRowHidden (id, state) 版本:大众版 参数: id:行id state:true/false 用途:设置某行是否显示 参考实例: mygrid.setRowHidden("row1",false); 4.1.85 setRowId (ind, row_id) 版本:大众版 参数: Ind: 行索引 row_id:行id 用途:设置某行id值,grid内唯一 参考实例: mygrid.setRowId(0,"new_row_id"); 4.1.86 setRowTextBold (row_id) 版本:大众版 参数: row_id:行id 用途:设置某行数据为粗体 参考实例: mygrid.setRowTextBold("row1"); 4.1.87 setRowTextNormal(row_id) 版本:大众版 参数: row_id:行id 用途:设置某行数据为标准字体 参考实例: mygrid.setRowTextNormal("row1"); 4.1.88 setRowTextStyle (row_id, styleString) 版本:大众版 参数: row_id:行id styleString:样式字符串,以分隔符组合 用途:设置某行数据样式 参考实例: grid.setRowTextStyle("r123", "background-color: red; font-family: arial;"); 4.1.89 showRow (rowID) 版本:大众版 参数: row_id:行id 用途:显示某行 参考实例: 4.2 dhtmlxgrid 列操作 4.2.90 adjustColumnSize(cind) 版本:大众版 参数: cind:列索引 用途:调整某列宽,使列所有数据可见,但需要在制定列宽的情况下,即不能设定列宽为 * 参考实例: mygrid.adjustColumnSize(0); 4.2.91 deleteColumn(ind) 版本:专业版 dhtmlxgrid_mcol.js支持 参数: cind:列索引 用途:调整某列宽,使列所有数据可见 参考实例: mygrid.adjustColumnSize(0); 4.2.92 enableColumnMove (mode,columns) 版本:专业版 dhtmlxgrid_mcol.js支持 参数: mode:true/false columns:设定某列是否可以 用途:设置所有列或某列是否可以移动 参考实例: //全部列可移动 mygrid.enableColumnMove(true); //某列可移动 mygrid.enableColumnMove(true,"false,true,true,true,true,true"); 4.2.93 enableHeaderMenu 版本:专业版 dhtmlxgrid_hmenu.js支持 参数: 用途:设置表头右键菜单可用 参考实例: 4.2.94 enableResizing(list) 版本:大众版 参数: list:设置当前grid中各列size是否可变参数组合 用途:设置当前grid中各列size是否可变 参考实例: mygrid.enableResizing("false,true,true,true,true,true,true"); 4.2.95 enableTooltips(list) 版本:大众版 参数: list:设置当前grid中各列tooltip是否可用参数组合 用途:设置当前grid中各列tooltip是否可用,即当前列title是否显示 参考实例: mygrid.enableResizing("false,true,true,true,true,true,true"); 4.2.96 getColIndexById (id) 版本:大众版 参数: id:列id 用途:通过列id获得列索引 参考实例: var colIndex=mygrid.getColIndexById("col1"); 4.2.97 getColType(index) 版本:大众版 参数: index:列索引 用途:通过列id索引获得列数据类型 参考实例: var type=mygrid.getColType(0); 4.2.98 getColTypeById (cID) 版本:大众版 参数: cID:列ID 用途:通过列列ID获得列数据类型 参考实例: var type=mygrid.getColTypeById("column1"); 4.2.99 getColWidth (ind) 版本:大众版 参数: index:列索引 用途:通过列id索引获得列数据宽 参考实例: var width=mygrid.getColWidth(0); 4.2.100 getColumnId (cin) 版本:大众版 参数: cin:列索引 用途:通过列id索引获得列Id 参考实例: var colId=mygrid.getColumnId(0); 4.2.101 getColumnLabel (cin, ind) 版本:大众版 参数: cin:列索引 ind: 表头行索引,默认为0,只有在多表头下有用 用途:获得列标题 参考实例: //第一列标题 var colLabel=mygrid.getColumnLabel(0); //第一列第二个表头标题 var colLabel=mygrid.getColumnLabel(0,1); 4.2.102 getColumnsNum 版本:大众版 参数: 用途:获得列的数量 参考实例: var colNum=mygrid.getColumnsNum(); 4.2.103 getFooterLabel (cin, ind) 参考getColumnLabel (cin, ind) 4.2.104 insertColumn(ind,header,type,width,sort,align,valign,reserved,columnColor) 版本:专业版 需要dhtmlxgrid_mcol.js 参数: ind:列索引 header:列表头标题 type:列数据类型 width:列宽度 sort:排序方式 align:水平布局方式 valign:垂直布局方式 reserved:无效参数 columnColor:列背景颜色 用途:获得列的数量 参考实例: //最小设置 mygrid.insertColumn(10);  //最大参数设置 mygrid.insertColumn(11,"Some text","ed",120,"na","left","top",null,"red") 4.2.105 isColumnHidden (ind) 版本:专业版  参数: ind:列索引 用途:判断当前索引列是否隐藏 参考实例: var isHidden=mygrid.isColumnHidden(0);//隐藏返回true,反之false 4.2.106 moveColumn (oldInd,newInd) 版本:专业版 需要dhtmlxgrid_mcol.js 参数: oldInd:原列索引 newInd:新列索引 用途:通过列索引调整列位置 参考实例: mygrid.mygrid.moveColumn(0,2); 4.2.107 setColumnColor (clr) 版本:大众版 参数: clr:颜色定义字符串 用途:定义列背景色 参考实例: mygrid.setColumnColor("white,#d5f1ff,#d5f1ff"); 4.2.108 setColumnExcellType (colIndex, type) 版本:专业版 参数: colIndex:列索引 type: 扩展类型 用途:定义列数据为扩展类型 参考实例: mygrid.setColumnExcellType(2,"ch"); 4.2.109 setColumnHidden (ind, state) 版本:专业版  参数: ind:列索引 state:true/false 用途:设置当前索引列是否隐藏 参考实例: mygrid.setColumnHidden(0,false); 4.2.110 setColumnId (ind, id) 版本:大众版  参数: ind:列索引 id:列id 用途:通过索引设置列id 参考实例: mygrid.setColumnId(0,"column1"); 4.2.111 setColumnIds (ids) 版本:大众版  参数: ids:列id组合 用途:设置grid内所有列的id,可重复定义,但通过id读取索引时,仅对第一个设置有效 参考实例: mygrid.setColumnIds("sales,book,author,price,store,shipping,best,date"); 4.2.112 setColumnLabel (col, label, ind) 版本:大众版  参数: col:表头索引 lable:标题 ind:多表头时索引 用途:设置grid表头标题 参考实例: //单表头设置 mygrid.setColumnLabel(0,"New Column Label"); //多行表头设置 mygrid.setColumnLabel(0,"New Column Label",1); 4.2.113 setColumnMinWidth (width, ind) 版本:大众版  参数: width:宽度 ind:列索引 用途:设置grid某列、各列最小宽度 参考实例: //设置第一列 mygrid.setColumnMinWidth(50,0); //设置所有列 mygrid.setColumnMinWidth("50,100,100,150,200,100,150"); 4.2.114 setColumnsVisibility (list) 版本:专业版  参数: list:各列是否可见参数组合,false可见,true隐藏 用途:设置各列是否可见 参考实例: mygrid.setColumnsVisibility("false,true,true,true,true"); 4.2.115 setFooterLabel (c, label, ind) 版本:大众版  参数: c: 列索引 lable:标题内容,可包含 img:[imageUrl] 图片引用格式 lnd:多表脚时,行索引 用途:设置表脚标题信息 参考实例:  4.3 dhtmlxgrid 单元格操作 4.3.116 cellById (row_id, col) 版本:大众版  参数: row_id: rowId col:列索引 用途:获得单元格对象,无参数时返回当前选中cell对象 参考实例:  var cellObj = grid.cellById(row_id, col); 4.3.117 cellByIndex (row_index, col) 通过行索引获得cell对象,参考cellById (row_id, col) 4.3.118 cells(row_id, col) 通过行id,列索引获得cell对象,参考cellById (row_id, col) 4.3.119 cells2 (row_index, col) 通过行索引,列索引获得cell对象,参考cellById (row_id, col) 4.3.120 checkAll(mode) 版本:大众版  参数: mode: true/false 用途:设置grid内所有checkbox是否全部选中 参考实例:  mygrid.checkAll(true); 4.3.121 clearChangedState 版本:专业版  参数: 用途:清除grid内所有改变状态 参考实例:  mygrid.clearChangedState(); 4.3.122 editCell 版本:大众版  参数: 用途:清除grid内单元格为编辑状态 参考实例: 4.3.123 editStop 版本:大众版  参数: 用途:清除grid内单元格为编辑状态 参考实例: 4.3.124 enableColSpan (mode) 版本:专业版  参数: mode:true/false 用途:是否支持跨行操作 参考实例: 4.3.125 enableEditEvents (click, dblclick, f2Key) 版本:大众版  参数: click:true|false 是否单击进入编辑状态 dbclick:true|false是否双击进入编辑状态 f2Key:true|false是否按F2进入编辑状态 用途:触发编辑模式的方法 参考实例: mygrid.enableEditEvents(true,false,true); 4.3.126 enableMarkedCells (mode) 版本:大众版 需要dhtmlxgrid_markers.js 参数: mode:true|false 是否允许标记 用途:单元格设置标记 参考实例:  4.3.127 enableMathEditing (mode) 版本:专业版dhtmlxgrid_math.js 参数: mode:true|false 是否允许编辑 用途:计算单元格是否允许编辑 参考实例:  mygrid.enableMathEditing(true); 4.3.128 forEachCell (rowId, custom_code) 版本:大众版 参考foreachrow_custom_code 4.3.129 getCombo (col_ind) 版本:大众版 参数: col_ind:列索引 用途:获得当前列的combo对象 参考实例:  var combo=mygrid.getCombo(0); 4.3.130 getCustomCombo (id, ind) 版本:大众版 参数: id: 行id ind:列索引 用途:当前自定义的combo对象 参考实例:  var combo=mygrid.getCustomCombo("row1",0); 4.3.131 getMarked 版本:大众版 需要dhtmlxgrid_markers.js 参数: 用途:当前mark单元格数组(行id\列索引) 参考实例:  var markedArray = mygrid.getMarked(); 4.3.132 getSelectedCellIndex 版本:大众版  参数: 用途:返回当前选中cell索引,无选中则返回-1 参考实例:  var ind=mygrid.getSelectedCellIndex(); 4.3.133 mark (rid,cindex,fl) 版本:大众版 需要 dhtmlxgrid_markers.js 参数: rid:行id cindex:列索引 fl:true/false 用途:设置单元格是否为标志状态 参考实例:  4.3.134 selectCell (r, cInd, fl, preserve, edit, show) 版本:大众版 参数: r:行索引或行对象 cind:单元格索引 fl:true/false 是否调用onRowSelect事件 preserve:true/false是否保存原有状态 edit:true/false 选中cell是否转为编辑状态 show:true/false 是否自动滚动选择 用途:选择某个单元格 参考实例:  4.3.135 setCellExcellType (rowId, cellIndex, type) 版本:专业版 参数: rowid:行id cellindex:单元格索引 type:单元格类型 用途:设置单元格类型 参考实例:  mygrid.setCellExcellType("row1",1,"txt"); 4.3.136 setCellTextStyle (row_id, ind, styleString) 版本:大众版 参数: rowid:行id cellindex:单元格索引 styleString:样式字符串 用途:设置单元格样式 参考实例:  mygrid.setCellTextStyle("row1",0,"color:red;border:1px solid gray;"); 4.3.137 setColspan (row_id, col_ind, colspan) 版本:专业版 参数: row_id:行id col_index:列索引 colspan:合并单元格数量 用途:设置单元格样式 参考实例: mygrid.enableColSpan(true);  //merge first 2 cells in the row with id "row1"  mygrid.setColspan("row1",0,2); 4.3.138 setDateFormat (mask) 版本:专业版 参数: mask:时间格式 用途:设置单元格时间格式,仅作用于“dhxCalendar” and “dhxCalendarA” 参考实例: mygrid.setDateFormat("%m/%d/%Y"); 4.3.139 setEditable (mode) 版本:大众版 参数: mode:true/false 用途:设置grid是否可编辑 参考实例: 4.3.140 setMathRound (digits) 版本:专业版 参数: digits:true/false 用途:设置grid中数字表格精确位数 参考实例: mygrid.setMathRound(2); 4.3.141 setNumberFormat (mask, cInd, p_sep, d_sep) 版本:专业版 参数: mask:格式 cind:列索引 p_sep: 小数为格式符号 d_sep: 整数分组符号 用途:设置grid中数字格式化 参考实例: mygrid.setNumberFormat("0,000.00",index,".",","); 4.3.142 setRowspan (rowID,colInd,length) 设置跨行数setColspan 4.3.143 uncheckAll 版本:大众版 参数: 用途:设置grid中checkbox全部不选 参考实例: 4.3.144 unmarkAll 版本:大众版 参数: 用途:清除grid中单元格 参考实例: 4.4 dhtmlxgrid 选择过滤操作 4.4.144 clearSelection 版本:大众版 参数: 用途:清除grid中选中的行数据 参考实例: mygrid.clearSelection(); 4.4.145 enableBlockSelection(mode) 版本:大众版 需要dhtmlxgrid_selection.js支持 参数: mode:true/false 用途: grid中选中的行数据是否变黑 参考实例: 4.4.146 enableMultiselect (state) 版本:大众版 需要dhtmlxgrid_selection.js支持 参数: mode:true/false 用途: 是否支持多选行模式 参考实例: 4.4.147 forceLabelSelection(mode) 版本:大众版 需要dhtmlxgrid_selection.js支持 参数: mode:true/false 用途: 当前选择值是否只绑定可视化的内容,不包含全部值 参考实例: 4.4.148 selectAll 版本:大众版  参数: 用途: 全选当前grid中的row,但不会触发任何事件,并且需要在所有row加载后调用 参考实例: 排序操作 4.4.149 enableStableSorting (mode) 版本:大众版  参数: mode: true/false 用途: 是否固定的排序算法 参考实例: 4.4.150 getSortingState 版本:大众版  参数: 用途: 获得各列排序方式的数组,列索引 + 排序方向 参考实例: 4.4.151 setCustomSorting (func, col) 版本:专业版  参数: func:自定义处理函数 col:列索引 用途:用户自定义的排序处理 参考实例: mygrid.setCustomSorting(sort_custom,1);    ...    function sort_custom(a,b,order){         var n=a.length;         var m=b.length; if(order=="asc") return n>m?1:-1; else return n

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档