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

时间:2016-12-06 20:21:05

标签: javascript jquery w2ui

我第一次使用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' }
    ]

1 个答案:

答案 0 :(得分: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 });
            }
        }
    },
    ...
});