dhtmlxGridk介绍及使用手册(中文).doc

dHtmlxGrid使用手册Phoenixjava 整理于2011-11-02目录 一、dhtmlxGrid介绍71.自定义XML:72.支持多行表头、表尾展现73.移动、添加、删除列84.处理大型数据集-支持分页85.处理大型数据集-智能渲染96.与数据库交互97.扩展单元格-EXCEL108.拆分模式（冻结栏）109.控制于一体的网络和树11二、dhtmlxgrid配置部分122.1 表格操作API122.1.1 attachEvent(evName , evHandler)122.1.2 attachFooter(values, style)142.1.3 attachHeader(values, style)152.1.4 attachToObject(obj)162.1.5 destructor172.1.6 detachEvent(id)172.1.7 detachFooter(index)182.2 表格样式API192.2.1 detachHeader(index)192.2.2 enableAutoHeight(mode,maxHeight, countFullHeight)192.2.3 enableAutoWidth (mode, max_limit, min_limit)202.2.4 enableCellIds(mode)212.2.5 enableHeaderImages(fl)212.2.6 init222.2.7 setAwaitedRowHeight(height)222.2.8 setCSVDelimiter(str)222.2.9 setColAlign(alStr)232.2.10 setColSorting(sortStr)232.2.11 setColTypes(typeStr)242.2.12 setColVAlign(valStr)242.2.13 setColWidth (ind, value)242.2.14 setDelimiter (delim)252.2.15 setHeader (hdrStr, splitSign, styles)252.2.16 setIconPath (path)262.2.17 setImagePath (path)262.2.18 setInitWidths (wp)272.2.19 setInitWidthsP(wp)272.2.20 setNoHeader(fl)282.2.21 setSkin(name)282.2.22 setStyle (ss_header, ss_grid, ss_selCell, ss_selRow)292.2.23uid29三、数据处理部分303.1 dhtmlxgrid数据加载部分303.1.31 changePage(pageNum)303.1.32 changePageRelative(ind)303.1.33 clearAll(header)303.1.34 clearAndLoad (url, call, type)303.1.35 enableCSVAutoID(mode)313.1.36 enableCSVHeader(mode)313.1.37 enableDistributedParsing(mode, count, time)313.1.38 enablePaging313.1.39 enableSmartRendering (mode,buffer,reserved)323.1.40 getRowAttribute (rId, name)323.1.41 getStateOfView323.1.43 load (url, call, type)333.1.44 loadCSVFile (path,afterCall)333.1.45 loadCSVString(str)343.1.46 parse(data,call,type)343.1.47 preventIECaching(mode)343.1.48 setPagingSkin(name)343.1.49 setPagingTemplates(navigation_template,info_template)353.1.50 setPagingWTMode(navButtons,navLabel,pageSelect,perPageSelect)353.1.51 setRowAttribute(rId, name, value)353.1.52 setUserData (row_id, name, value)353.1.53 startFastOperations363.1.54 stopFastOperations363.1.55 updateFromXML (url, insert_new, del_missed, afterCall)363.2 dhtmlxgrid保存数据操作363.2.160 enableMathSerialization (mode)373.2.161 serialize373.2.162 serializeToCSV (textmode)373.2.163 setFieldNam (mask)373.2.164 setSerializableColumns (list)373.2.165 setSerializationLevel (userData, selectedAttr, config, changedAttr, onlyChanged, asCDATA)38四、Dhtmlxgrid操作394.1 dhtmlxgrid行操作394.1.56 addRow (new_id, text, ind)394.1.57 changeRowId (oldRowId, newRowId)404.1.58 copyRowContent (from_row_id, to_row_id)404.1.59 deleteRow(row_id)404.1.60 deleteSelectedRows404.1.61 doesRowExist(row_id)414.1.62 enableAlterCss (cssE, cssU, perLevel, levelUnique)414.1.63 enableMultiline(state)414.1.64 enableRowsHover (mode, cssClass)424.1.65 enableRowspan424.1.66 forEachRow (custom_code)424.1.67 getAllRowIds(separator)434.1.68 getChangedRows (and_added)434.1.69 getCheckedRows (col_ind)434.1.70 getRowId(ind)434.1.71 getRowIndex(row_id)444.1.72 getRowsNum444.1.73 getSelectedRowId444.1.74 lockRow(rowId,mode)444.1.75 moveRow (rowId,mode,targetId,targetGrid)444.1.76 moveRowDown(row_id)454.1.77 moveRowTo(srowId,trowId,mode,dropmode,sourceGrid,targetGrid)454.1.78 moveRowUp(row_id)454.1.79 selectRow (rIndex, fl, preserve, show)464.1.80 selectRowById (row_id, preserve, show, call)464.1.81 setCheckedRows (cInd,v)464.1.82 setRowColor(row_id,color)464.1.83 setRowExcellType (rowId, type)474.1.84 setRowHidden (id, state)474.1.85 setRowId (ind, row_id)474.1.86 setRowTextBold (row_id)474.1.87 setRowTextNormal(row_id)484.1.88 setRowTextStyle (row_id, styleString)484.1.89 showRow (rowID)484.2 dhtmlxgrid列操作484.2.90 adjustColumnSize(cind)484.2.91 deleteColumn(ind)494.2.92 enableColumnMove (mode,columns)494.2.93 enableHeaderMenu494.2.94 enableResizing(list)494.2.95 enableTooltips(list)494.2.96 getColIndexById (id)504.2.97 getColType(index)504.2.98 getColTypeById (cID)504.2.99 getColWidth (ind)504.2.100 getColumnId (cin)514.2.101 getColumnLabel (cin, ind)514.2.102 getColumnsNum514.2.103 getFooterLabel (cin, ind)514.2.104 insertColumn(ind,header,type,width,sort,align,valign,reserved,columnColor)514.2.105 isColumnHidden (ind)524.2.106 moveColumn (oldInd,newInd)524.2.107 setColumnColor (clr)524.2.108 setColumnExcellType (colIndex, type)534.2.109 setColumnHidden (ind, state)534.2.110 setColumnId (ind, id)534.2.111 setColumnIds (ids)534.2.112 setColumnLabel (col, label, ind)534.2.113 setColumnMinWidth (width, ind)544.2.114 setColumnsVisibility (list)544.2.115 setFooterLabel (c, label, ind)544.3 dhtmlxgrid单元格操作554.3.116 cellById (row_id, col)554.3.117 cellByIndex (row_index, col)554.3.118 cells(row_id, col)554.3.119 cells2 (row_index, col)554.3.120 checkAll(mode)554.3.121 clearChangedState564.3.122 editCell564.3.123 editStop564.3.124 enableColSpan (mode)564.3.125 enableEditEvents (click, dblclick, f2Key)564.3.126 enableMarkedCells (mode)574.3.127 enableMathEditing (mode)574.3.128 forEachCell (rowId, custom_code)574.3.129 getCombo (col_ind)574.3.130 getCustomCombo (id, ind)574.3.131 getMarked584.3.132 getSelectedCellIndex584.3.133 mark (rid,cindex,fl)584.3.134 selectCell (r, cInd, fl, preserve, edit, show)584.3.135 setCellExcellType (rowId, cellIndex, type)594.3.136 setCellTextStyle (row_id, ind, styleString)594.3.137 setColspan (row_id, col_ind, colspan)594.3.138 setDateFormat (mask)604.3.139 setEditable (mode)604.3.140 setMathRound (digits)604.3.141 setNumberFormat (mask, cInd, p_sep, d_sep)604.3.142 setRowspan (rowID,colInd,length)614.3.143 uncheckAll614.3.144 unmarkAll614.4 dhtmlxgrid选择过滤操作614.4.144 clearSelection614.4.145 enableBlockSelection(mode)624.4.146 enableMultiselect (state)624.4.147 forceLabelSelection(mode)624.4.148 selectAll624.4.149 enableStableSorting (mode)624.4.150 getSortingState634.4.151 setCustomSorting (func, col)634.4.152 setSortImgState (state, ind, order, row)634.4.153 sortRows (col, type, order)644.4.154 collectValues (column)644.4.155 filterBy (column, value, preserve)644.4.156 filterByAll654.4.157 findCell (value, c_ind, first)654.4.158 getFilterElement (index)654.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 dhtmlxGrid包中包含的类型。例如，表上现场演示使用一个特定的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中文翻译，今天终于鼓起勇气来做这件事情，纯属个人爱好，大伙见笑了，其实我的英文不好，大学四年，英语就挂过四次。好,不废话了，这就开始。中文操作手册部份 来源于：/warison1981 感谢“刀光剑影”。2.1 表格操作API2.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发现，原有容器和新绑定容器值一致参考实例： function dotacche() ckmygrid.attachToObject(document.getElementByIdx(gridbox2); function doctacche() ckmygrid.attachToObject(document.getElementByIdx(gridbox); / ckmygrid.attachToObject(document.getElementByIdx(listdiv);这里执行没有效果 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 表格样式API2.2.1 detachHeader(index)版本：大众版参数：index 表头索引用途：删除grid的某个表头，与attachHeader配对使用参考实例：无2.2.2 enableAutoHeight(mode,maxHeight, countFullHeight)版本：大众版参数：mode: true/falsemaxHeight: 最大无滚动高度，默认为无限制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/falsemax_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.gifWith Icon ); /img:imgs/true.gifWith 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:13n21:22:23n31: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: 分隔标志 默认为 #cspanstyle: 表头各列样式用途：设置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中各列初始化宽度百分比参考实例：/明确设置各列宽度百分比，即保证设置值相加为100mygrid.setInitWi