如何在我的 dojo GridX 中将我的按钮置于我选择的特定列中？

Posted 2023-02-26

【中文标题】如何在我的 dojo GridX 中将我的按钮置于我选择的特定列中？

【英文标题】：How do I center my buttons in specific columns of my choosing in my dojo GridX?

【发布时间】：2014-11-05 19:51:24

【问题描述】：

我能够使用以下方法使标题中的文本居中：

[colid="startstop"].gridxCell 
    text-align: center; 

我认为这会使属于 startstop 列的所有行单元格居中，但事实并非如此。我的 startstop 列在每一行中包含一个按钮。我还有另外两列就像这样。如何将我选择的三列中的按钮居中？

这是我的结构的一部分：

                      id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px', 
                        widgetsInCell: true, 
                        navigable: true, 
                        allowEventBubble: true, 
                        decorator: function() 
                                //Generate cell widget template string 
                                return [ 
                                        '<button data-dojo-type="dijit.form.Button" ', 
                                        'data-dojo-attach-point="btn" ', 
                                        'class="startStopButton" ', 
                                        'data-dojo-props= ', 
                                        '"onClick: function()', 
                                                'alert(\'Start/Stop\');', 
                                        '"><img src="images/1413390026_control.png" /></button>' 
                                ].join(''); 
                        , 
                        setCellValue: function(data) 
                                //"this" is the cell widget 
                                this.btn.set('label', data); 
                         
                    , 

这是我的 css 类 - 它现在只处理按钮的大小，因为我在让它自己工作时遇到其他麻烦 - 但这是另一个问题。

.startStopButton .dijitButtonNode 
  width: 16px;
  height: 16px;
  text-align: center;

【问题讨论】：

我在装饰器周围放了一个 ，但我不确定这是否是最正确的方法。

【参考方案1】：

如果您想在单元格中包含小部件，建议使用widgetsInCell 标志以及onCellWidgetCreated 和setCellValue 方法（如here 所述）。

这是我如何使用带有水平滑块的单元格：

  id: 'scoreColId',
  field: 'score',
  name: 'Score',
  width: '15%',

  // flag there are widgets in cell so that they are destroyed when grid is destroyed
  widgetsInCell: true,

  // method to create the widget (no cell-specific data yet)
  onCellWidgetCreated: function(cellWidget, column) 
    // outer div to center align the widget inside placed in the cell
    var outerDiv = domConstruct.create('div', 
      style: 
        'text-align': 'center'
      
    , cellWidget.domNode);

    // create the widget and place it in the div (already inside the cell)
    cellWidget.slider = new HorizontalSlider(
      minumum: 0,
      maximum: 10,
    );
    cellWidget.slider.placeAt(outerDiv);
  ,

  // set each cell with it's specific data
  setCellValue: function(gridData, storeData, cellWidget) 
    var score = gridData.docScore;
    cellWidget.slider.set('value', score);
  
,