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 enableCSV AutoID(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.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.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,JA V A的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,和https://www.doczj.com/doc/5c12662502.html,与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中文翻译,今天终于鼓起勇气来做这件事情,纯属个人爱好,大伙见笑了,其实我的英文不好,大学四年,英语就挂过四次。好,不废话了,这就开始。
中文操作手册部份来源于:https://www.doczj.com/doc/5c12662502.html,/warison1981感谢“刀光剑影”。2.1 表格操作API
2.1.1 attachEvent(evName , evHandler)
版本:大众版
参数:
evName 可定义事件名称
evHandler 用户自定义处理函数.
用途:对当前grid事件绑定用户的自定义的处理js函数,这里支持两种格式定义
1)匿名函数定义
grid.attachEvent("onRowSelect",function(rowId,cellIndex){
alert("Row with id="+rowId+" was selected");
});
2)命名函数定义
grid.attachEvent("onEditCell",doOnEditCell);
function doOnEditCell(stage,rowId,cellIndex,newValue,oldValue){
if ((stage==2)&&(newValue!=oldValue)){
alert("Cell with id="+rowId+" and index="+cellIndex+" was edited"); return true;
}
return true;
}
这里也支持一个事件绑定多个处理函数的方法
grid.attachEvent("onCheck",doOnCheck1);
grid.attachEvent("onCheck",doOnCheck2);
function doOnCheck1(rowId,cellIndex,state){
if (state){
alert("Checkbox in the row with id="+rowId+" was checked");
}
}
function doOnCheck2(rowId,cellIndex,state){
if (state){
alert("Checkbox in column with index="+cellIndex+" was checked");
}
}
执行顺序为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发现,原有容器和新绑定容器值一致
参考实例:
style="width=350px;height:150px;background-color:white;"> | style="width=350px;height:150px;background-color:white;border:1px solid blue;" align="right"> |