javascript - 使不可编辑的列对于新添加的行可编辑

Question

我创建了增强型网格，其中 Column1 不可编辑，但用户可以编辑其他列并可以更新。但是当我添加新行时，新行是空白的，我应该允许编辑和键入所有列中的数据。但由于第一列的可编辑性不正确，因此我无法编辑新添加的行的第 1 列来提供信息。请建议我如何编辑新添加的空白行而不是现有行的column1。请找到 fiddle :http://jsfiddle.net/Q9GYv/77/

下面是代码:

require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/domReady!'],

function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom) {
    /*set up data store*/
    var data = {
          items: [{
            col1 : "John",
            col2 : "aa",
            col3 : "bb",
            col4 : "cC"
         }]
    };

    var store = new ItemFileWriteStore({
        data: data
    });

    /*set up layout*/
    var layout = [
        [{
            'name': 'FirstName',
                'field': 'col1',
                'width': '100px'
        }, {
            'name': 'LastName', editable: 'true',
                'field': 'col2',
                'width': '100px'
        }, {
            'name': 'Designation',editable:'true',
                'field': 'col3',
                'width': '200px'
        }, {
            'name': 'Address',editable:'true',
                'field': 'col4',
                'width': '150px'
        }]
    ];

    /*create a new grid*/
    var grid = new EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px',
        canEdit: function(inCell, inRowIndex) {
            if(inRowIndex === 0) {
                return true;
            }
            return this._canEdit;
        }
    });

    /*append the new grid to the div*/
    grid.placeAt("gridDiv");

    /*Call startup() to render the grid*/
    grid.startup();


    var button = new Button({
        onClick: function () {
            console.log(arguments);
            store.newItem({
                col1: "",editable:true,
                col2: "",
                col3: "",
                col4: "New Row"
            });

        }
    }, "addRow");
});

--编辑--

请建议我如何使Column1可编辑添加新行时和编辑网格中现有行时为只读 。请找到 fiddle http://jsfiddle.net/Q9GYv/77/ .

Answer 1

创建网格时，您可以重写 canEdit 函数，以便指定哪些行不能修改。见下文:

canEdit: function(inCell, inRowIndex) {
   if(inRowIndex === 0) { //Note that you can apply any conditions you want to this
      return false;
   }
   return this._canEdit;
}

默认情况下，您还需要使行可编辑，我建议您在运行 ItemFileWriteStore 时不要允许“id”行可变，并且不允许在插入项目后更改项目的 ID 。

我已使用以下更新更新了您的 JSFiddle:http://jsfiddle.net/Q9GYv/75/

新的 fiddle ，第 1 列对于现有行不可编辑:http://jsfiddle.net/Q9GYv/78/