TopJUI通过简单的代码实现复杂的批量提交功能

业务系统的批量提交是常用的操作功能，使用传统的EasyUI开发时需要写不少代码才能实现，该功能在TopJUI中是如何实现的呢？本篇我们将通过简单的代码，把批量操作的具体实现分享给大家参考。

<a href="javascript:void(0)"
    data-toggle="topjui-menubutton"
    data-options="method: 'openDialog',
    extend: '#productDg-toolbar',
    iconCls: 'fa fa-pencil',
    btnCls: 'topjui-btn-green',
    grid: {
        type: 'datagrid',
        id: 'productDg',
        param:'uuid:uuid,code'
    },
    dialog: {
        width: 950,
        height: 500,
        href: _ctx + '/html/complex/dialog_edit.html',
        buttonsGroup: [
            {
                text: '更新',
                url: _ctx + '/json/response/success.json',
                iconCls: 'fa fa-cog',
                handler: 'multiAjaxForm',
                btnCls: 'topjui-btn-green'
            }
        ]
    }">批量提交</a>

 

点击“批量提交”按钮会打开一个对话框窗口，“更新”按钮中的handler属性值为multiAjaxForm，即提交多行数据，点击“更新”按钮后从表格中获取的参数为勾选行的uuid和code字段的值，通过grid中的param参数设置param:'uuid:uuid,code:code'，冒号前面为参数名，冒号后面为相应勾选行的字段值，当要传递的参数名和字段名相同时可以只写字段名即可，所以param:'uuid:uuid,code'也可简写为param:'uuid,code'，需要更新的内容在对话窗口的表单中填写即可。

通过以上代码即可批量更新表格数据了，是不是很简单呢？