datagrid - 动态控制dojo DataGrid列的编辑模式

Question

我刚开始使用 dojo 并开始玩弄它。基本上我想要做的是我有一个包含 2 列 A 和 B 的表。B 列中的单元格将被锁定或可编辑，具体取决于 A 列的值。

有没有办法在单元格级别而不是在布局中定义的列级别设置可编辑属性？

我尝试使用格式化程序，但无法使其正常工作。

Answer 1

您可以覆盖网格功能onCellDblClick- 但这是特定于版本的代码。如果你的页面中 dojo.version 发生了变化，那么网格 Event.js 可能会有其他的行为。以下片段取自... /dojox/grid/_Event.js版本1.7.2。

如果您的编辑设置为通过双击单元格触发（默认行为），您可以选择简单地忽略它，并return在以下位置放置好：

    var customOnEditActivate = function(e){
            // summary:
            //              Event fired when a cell is double-clicked.
            // e: Event
            //              Decorated event object contains reference to grid, cell, and rowIndex
            var event;
            if(this._click.length > 1 && has('ie')){
                    event = this._click[1];
            }else if(this._click.length > 1 && this._click[0].rowIndex != this._click[1].rowIndex){
                    event = this._click[0];
            }else{
                    event = e;
            }
////
// entrypoints of interest: event.cell & event.cellNode(.innerHTML)
// As example we could ignore editing mode if cell contains 'NON_EDITABLE'

if(cell.innerHTML.match("NON_EDITABLE"))
     return;

//
////
            this.focus.setFocusCell(event.cell, event.rowIndex);
            this.onRowClick(event);
            this.edit.setEditCell(event.cell, event.rowIndex);
            this.onRowDblClick(e);
    },

因此，在初始化网格时，将配置参数设置onCellDblClick为上述函数：

require(["dojox/grid/DataGrid"], function(DataGrid) {
  var grid = new DataGrid({
    onCellDblClick: customOnEditActivate
  });
});

或者

<div 
      data-dojo-type="dojox.grid.DataGrid" 
      data-dojo-props="onCellDblClick: customOnEditActivate"
></div>

Answer 2

我得到了以下工作（类似于 Ed Jellard 的建议）：

<script type="dojo/require">
    jsonRestStore : "dojox/data/JsonRestStore",
    contentPane   : "dijit/layout/ContentPane",
    dataGrid      : "dojox/grid/DataGrid"
</script>

<div dojoType="dijit.layout.ContentPane">
  <script type="dojo/method">
      configStore = new dojox.data.JsonRestStore
        ( { target : "/data/config",
            idAttribute : "propertyName" } );

      configStructure =
          [ {field:'propertyName', name:'Property - Name',
               width:20},
            {field:'value', name:'Value',
               editable:true},
            {field:'guiConfigurable', name:'Property Type'},
            {field:'description', name:'Description'}
          ];
  </script>
</div>

<table data-dojo-type="dojox.grid.DataGrid"
       store="configStore"
       structure=configStructure>
    <script type="dojo/method" event="canSort" args="sortInfo">
        return false;
    </script>
    <script type="dojo/method" event="onApplyCellEdit" >
        configStore.save();
    </script>
    <script type="dojo/method" event="canEdit" args="inCell, inRowIndex">
        var gc = this.getItem(inRowIndex).guiConfigurable;
        return gc == 'W' || gc == 'D';
    </script>
    <tbody/>
</table>

Answer 3

你可以覆盖

canEdit: function(inCell, inRowIndex)

数据网格的方法。从那里，你可以得到项目：

this.getItem(inRowIndex)

然后确定它是否应该是可编辑的，并返回真/假。