javascript - 如何使用添加新按钮在 w2ui 网格中添加新项目？

Question

我w2ui第一次使用网格。我想在网格中添加新项目。为此，我展示toolbarAdd的是工具栏。但是当我点击它时，什么也没有发生。我如何添加新项目？

$('#grid').w2grid({
    name: 'grid',
    header: 'List of Names',
    show: {
      toolbar: true,
      footer: true,
      toolbarAdd: true,
      toolbarEdit: true,
      toolbarDelete: true,
      toolbarSave: true
    },
    columns: [
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' }
    ]

Answer 1

您需要自己实现逻辑。

网格如何知道您要添加什么？

例如：

function addRecord() {
    var g = w2ui['grid'].records.length;
    w2ui['grid'].add( { recid: g + 1, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' } );
}

$('#grid').w2grid({
    name: 'grid',
    ...
    onAdd: function (event) {
        addRecord();
    },
    ...
});

您基本上想向您的grid.records.

这是工具栏单击处理程序实现的另一个示例：

http://w2ui.com/web/demos/#!grid/grid-21

$('#grid').w2grid({
    name: 'grid',
    ...
    toolbar: {
        items: [
            { id: 'add', type: 'button', caption: 'Add Record', icon: 'w2ui-icon-plus' }
        ],
        onClick: function (event) {
            if (event.target == 'add') {
                w2ui.grid.add({ recid: w2ui.grid.records.length + 1 });
            }
        }
    },
    ...
});