jqrid模态框增加数据

jQuery UI Dialog（简称jqGrid Modal框）是一种基于jQuery UI库的功能，它可以帮助你在弹出窗口（modal dialog）中显示和编辑jQuery Grid的数据。如果你想在jqGrid的模态框里增加数据，可以按照以下步骤操作：

1. **创建或加载数据**：首先确保你已经有一个jqGrid实例并且初始化了数据。你可以通过`$.ajax`, `load`方法或者直接在grid配置中提供数据。

$( "#your_grid_id" ).jqGrid({
    url: 'your_server_url',
    datatype: 'json',
    data: {id: 'new_data'}, // 新增数据的初始值
    ...其他jqGrid选项...
});

2. **启用模态编辑功能**：在`colModel`配置中添加`edittype: 'button'`属性，并在相应的列上设置`click`事件，打开弹窗：

{
    name: 'action',
    index: '',
    width: 50,
    edittype: 'button', // 添加此行
    formatter: function(cellvalue, options) {
        return '<a href="#" class="edit" data-key="' + cellvalue + '">Edit</a>';
    },
    onClick: function(e) {
        var key = $(e.target).data('key');
        $('#your_dialog_id').dialog({ modal: true }).load('dialog.html?key=' + key);
    }
}

这里假设`dialog.html`是一个包含jqGrid模态编辑模板的HTML文件。

3. **处理模态框中的数据提交**：在`dialog.html`中，当你完成编辑并点击保存按钮时，通过AJAX向服务器发送更新请求，比如使用jQuery的`.serialize()`方法加上当前键值对（`key`），然后关闭对话框：

<form id="dialog-form">
    <!-- 编辑表单 -->
</form>
<button onclick="saveChanges()">保存</button>

<script>
function saveChanges() {
    $.ajax({
        type: "POST",
        url: 'update_action.php',
        data: $('#dialog-form').serialize() + '&key=' + $('#your_key_input').val(), // 获取key和其他修改后的字段
        success: function(response) {
            $('#your_dialog_id').dialog("close");
            // 更新主网格中的数据
            $("#your_grid_id").setGridParam({data: response.data}); // 假设response.data包含了更新后的数据
        }
    });
}
</script>