w2uiGrid:禁用行选择上的删除按钮

时间:2015-05-04 10:56:26

标签: w2ui

这与我的问题有关:https://github.com/vitmalina/w2ui/issues/882#event-295994680

感谢您的回复。我按照您的建议添加了代码,但仍然无效。通过查看id集合,我发现删除按钮的w2ui-deletetoolbar.items。我相信我仍然缺少某些东西,但不确定是什么。

   onSelect: function(event) {
    event.onComplete = function() {
      if(this.records[event.index].deletable)
        this.toolbar.enable('w2ui-delete');
      else {
        this.toolbar.disable('w2ui-delete');
        $(this.toolbar.items).last().disabled = true;
      }
    }
  }

2 个答案:

答案 0 :(得分:1)

我查看了代码,我发现删除按钮在内部自动启用/禁用(与编辑和保存按钮相同)。如果选择了一个或多个记录,它将启用,否则禁用。因此,在我们的自定义条件下创建自定义删除按钮并启用/禁用会更容易。我创建了一个jsFiddle示例

$(function () {    
    $('#grid').w2grid({ 
        name: 'grid', 
        show: { 
            toolbar: true,
            footer: true
        },
        toolbar: {
            items: [
                { type: 'break' },
                { type: 'button', id: 'my-delete', caption: 'My Delete', icon: 'w2ui-icon-cross' }
            ],
            onClick: function () {
                console.log('My Delete Clicked');
            }
        },
        searches: [                
            { field: 'lname', caption: 'Last Name', type: 'text' },
            { field: 'fname', caption: 'First Name', type: 'text' },
            { field: 'email', caption: 'Email', type: 'text' },
        ],
        columns: [                
            { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
            { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
            { field: 'fname', caption: 'First Name', size: '30%', sortable: true },
            { field: 'email', caption: 'Email', size: '40%' },
            { field: 'sdate', caption: 'Start Date', size: '120px' },
        ],
        onSelect: function(event) {
            event.onComplete = function() {
              if (event.recid > 0 && event.recid < 5) {
                this.toolbar.disable('my-delete');
              } else {
                this.toolbar.enable('my-delete');
              }
            }
        },
        records: [
            { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 27, fname: 'Shashi', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
        ]
    });    
});

如果您选择任何低于5的记录,它将禁用该按钮。请注意,您仍然可以调用网格删除方法,该方法将继续使用现有的删除功能。请参阅grid.delete()方法。

答案 1 :(得分:0)

这将使删除按钮始终处于禁用状态:

Queue.put()

因此使它像这样:

onSelect: function(event) {
   setTimeout(function(that) { that.toolbar.disable('w2ui-delete'); }, 1, this);
}

在需要时禁用按钮。