Question

我正在使用bootstrap开发基于Web的应用程序。我正在尝试在页面加载时在网格中实现内联编辑，但是当我单击网格上的编辑按钮时，所有单元格都变为可编辑文本，之后我单击“保存”按钮，它会显示我在特定单元格中键入的文本。但是在保存按钮的onclick上，我无法调用在DB中执行数据更新的功能。

这是我的代码：

  $(document).ready(function () {
    var GetUrl = Web_Path + '/Test/TestHandler/GetTestData/' + AjaxHandlerName;

                jQuery("#jqGrid-container").jqGrid({
                    url: GetUrl,
                    datatype: 'json',
                    mtype: 'POST',
                    postData: { SearchInfo: function () { return getSearchPostData() } },
                    colNames: [' ', 'ID', 'Name', 'ContactNo', 'EmpId', 'MailId', 'RoleName'],
                    colModel: [
                    { name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {
                            keys: true,
                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback }
                        }
                    },
                                { name: 'Id', index: 'Id', hidden: true, editable: true },
                                { name: 'Name', index: 'Name', validation: { required: true }, sortable: true, editable: true, editoptions: { size: "40", maxlength: "50"} },
                                { name: 'ContactNo', index: 'ContactNo', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} },
                                { name: 'EmpId', index: 'EmpId', sortable: false, editable: true, editoptions: { size: "20", maxlength: "30"} },
                                { name: 'MailId', index: 'MailId', sortable: false, editable: true, editoptions: { size: "40", maxlength: "50"} },
 {name: 'RoleName', index: 'RoleName', sortable: false }
  ],
                    jsonReader: {
                        id: 'Id',
                        repeatitems: false
                    },
                    height: "100%",
                    pager: '#jqGrid-pager',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'Id',
                    sortorder: 'desc',
                    viewrecords: true,
                    caption: "JQ grid data",
                    loadComplete: function () {
                        var table = this;
                        updatePagerIcons(table);                       
                    }
                });
});

 function getSearchPostData() {
            var searchData = {};
            searchData.Id=1;

            return JSON.stringify(searchData);
        }
 function updatePagerIcons(table) {
            var replacement =
                    {
                        'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
                        'ui-icon-seek-prev': 'icon-angle-left bigger-140',
                        'ui-icon-seek-next': 'icon-angle-right bigger-140',
                        'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
                    };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            })
}

 <div class="row">
        <div class="col-xs-12">           
            <table id="jqGrid-container" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all">
            </table>
            <div id="jqGrid-pager">
            </div>           
        </div>
    </div>

我使用过 jquery.jqGrid.min.js 。

当我尝试保存时，无法将数据传输到数据库..请帮帮我。

Answer 1

您需要使用jqgrid的editurl属性，它基本上是您服务器的控制器URL。触发保存操作后，将调用editurl。

根据jqgrid documentation，

将调用editurl以下数据发送到服务器

如何组织数据

编辑行并创建输入元素时，我们设置以下规则：

表格行变为属性editable =“1”
数组savedRow（网格中的选项）填充了值在编辑之前。这是一个名称：值对数组，附加 pair id：rowid
不包含隐藏字段
可编辑元素的id构造为'rowid _'+名称来自colModel数组。例如，如果我们编辑id = 10的行和只有editable元素是'myname'（来自colModel）然后id变为 10_myname。
可编辑元素的名称是根据名称构造的 colModel array - property - 保存或恢复行之后的名称 editable属性设置为“0”，savedRow项设置为 id = rowid已删除

发布到服务器的内容是什么？

当数据发布到服务器时，我们构造一个包含（s）：

的对象{}

name：value对，其中name是input元素的名称在行中表示（这适用于所有输入元素）
另外我们添加一对id：rowid，其中rowid是id的id 行
如果extraparam参数不为空，我们用。扩展此数据发布数据

因此，您需要设置服务器端以获取编辑/保存操作时从jqGrid发送的值。

无法在jqgrid内联编辑中将编辑数据传送到DB

1 个答案: