动态设置 dojox.grid.datagrid 标题列宽 [英] Set dojox.grid.datagrid header column width dynamically

问题描述

• 我有一个带有初始标题列宽度的声明性 dojox.grid.datagrid.我有一个文本框.我的需要是

• 在 UI 中，如果用户在文本框中输入任何值，则应将该值设置为列标题的动态宽度.

• I have a declarative dojox.grid.datagrid with initial header column width. And i have a textbox. my need is

• In UI, if user enters any value to textbox, that value should be set as the dynamic width of column's header.

<div class="claro" id="dfgdfgd" name="dataGrid" onclick="setWidgetproperty(this.id,'xy','inner__dfgdfgd');" ondblclick="editCustomGrid(this.id)" onmouseup="setDocStyle(this.id)" style="height:200px; left:42px; position:absolute; top:89px; width:950px;">
 <table class="claro" dojotype="dojox.grid.DataGrid" id="inner__dfgdfgd" rowselector="10px" style="height: 180px; width: 300px;">
      <thead>
           <tr>
                <th field="Column1" id="Column1" noresize="true" width="100px">
                     <label id="Column1" onclick="getCustomGridColName(this.id,'inner__dfgdfgd');" style="cursor:pointer; font-family: Times; font-size:12pt;">
                          Column1
                     </label>
                </th>
                <th field="Column2" id="Column2" noresize="true" width="100px">
                     <label id="Column2" onclick="getCustomGridColName(this.id,'inner__dfgdfgd');" style="cursor:pointer; font-family: Times; font-size:12pt;">
                          Column2
                     </label>
                </th>
           </tr>
      </thead>
 </table>
 <input id="hidden__dfgdfgd" name="dataGrid" style="display:none;" type="hidden">

我可以使用以下代码获取特定列的宽度.如何将此宽度设置回文本框值.

I am able to get the particular column's width using below code. How to set back this width to textbox value.

dojo.forEach(dijit.byId(tableID).layout.cells, function(cell,idx){
                if(cell.field == id){
                    headerWidth = cell.width;
                    alert(headerWidth);
                }
            });

推荐答案

有一个方法叫做 setCellWidth()(你可以在 API 文档)，可用于更改单元格的宽度.

There is a method called setCellWidth() (you can read about it in the API Documentation) which you can use to change the width of the cells.

然后您需要完成的唯一步骤是更新列(以便更改可见).这一步可以通过cell.view.update();完成.

The only step you then need to complete is to update the column (so that the changes become visible). This step can be completed with cell.view.update();.

注意:使用 grid.update() 或 grid.sizeChange() 更新完整的网格是不够的，因为它只会更新列标题.(这是我注意到的.)

Be aware: updating the complete grid with grid.update() or grid.sizeChange() is not enough because it will only update the column headers. (That's something I noticed.)

因此在您的 forEach 循环中，您将执行以下操作:

So in your forEach loop you would do something like:

grid.setCellWidth(idx, "200px");
cell.view.update();

我还制作了一个可用的 JSFiddle，您可以在此处查看.

I also made a working JSFiddle which you can view here.

这篇关于动态设置 dojox.grid.datagrid 标题列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！