Question

使用jqGrid作为SubGrid，编辑SubGrid行可以正常工作但是在尝试添加SubGrid行时，idDiscount（FK）应该使用SubGrid表单发布。
我试过在网上搜索这个并没有发现这个主题。

如您所见，在我的主网格中，主键为idDiscount，在SubGrid上，主键为cdDiscount，FK为idDiscount

使用的代码（修剪过）

jQuery(gridSelector).jqGrid({
url: '',
        postData: {
        action: "MainGrid"
        },
        editurl: "default.aspx?action=MainGrid",
        datatype: 'json',
        colNames: ['idDiscount'],
        colModel: [{
        name: 'idDiscount',
                index: 'idDiscount',
                hidden: true,
                soratable: false,
                key: true,
        },
                subGrid: true,
                subGridRowExpanded: function (subgridId, rowId) {

                var currentRow = $(gridSelector).jqGrid('getRowData', rowId);
                var idDiscount = currentRow.idDiscount;
                var subgridTableId, pagerId;
                subgridTableId = subgridId + "_t";
                pagerId = "p_" + subgridTableId;
                $("#" + subgridId).html("<table id='" + subgridTableId + "' class='scroll'></table><div id='" + pagerId + "' class='scroll'></div>");
                jQuery("#" + subgridTableId).jqGrid({
        url: '',
                editurl: 'default.aspx?action=SubGrid',
                datatype: 'json',
                postData: {
                action: "SubGrid",
                        idDiscount: rowId
                },
                colNames: ['idDiscount', 'cdDiscount'],
                colModel: [{
                name: 'idDiscount',
                        index: 'idDiscount',
                        hidden: true,
                        editable: true,
                        editoptions: {
                        disabled: false,
                                value: idDiscount,
                        },
                }, {
                name: "cdDiscount",
                        index: "cdDiscount",
                        key: true,
                        editable: true,
                        editrules: {
                        required: true
                        }
                ]
                });
                });

我的subGrudRowExpanded

subGridRowExpanded: function (subgridId, rowId) {
                var subgridTableId, pagerId;
                subgridTableId = subgridId + "_t";
                pagerId = "p_" + subgridTableId;
                $("#" + subgridId).html("<table id='" + subgridTableId + "' class='scroll'></table><div id='" + pagerId + "' class='scroll'></div>");
                jQuery("#" + subgridTableId).jqGrid({
                    url: '',
                    editurl: 'default.aspx?action=SubGrid',
                    datatype: 'json',
                    postData: { action: "SubGrid", idDiscount: rowId },
                    colNames: ['Code', 'Percent', 'Title', 'Uses', 'Used', 'From', 'To', 'CreatedBy', ' '],
                    colModel: [
                        { name: "cdDiscount", index: "cdDiscount", key: true, editable: true, editrules: { required: true } },
                        { name: "pcDiscount", index: "pcDiscount", editable: true, editrules: { required: true, number:true } },
                        { name: "txDescription", index: "txDescription", editable: true },
                        { name: "ctUses", width: '60px', classes: 'center', index: "ctUses", editable: false },
                        { name: "ctUsed", width: '60px', classes: 'center', index: "ctUsed", editable: false },
                        { name: "dtValidFr", width: '100px', classes: 'center', index: "dtValidFr", editable: true, editoptions: { dataInit: function (el) { datePick(el); } }, editrules: { required: true }, sorttype: 'date', formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "ShortDate" } },
                        { name: "dtValidTo", width: '100px', classes: 'center', index: "dtValidTo", editable: true, editoptions: { dataInit: function (el) { datePick(el); } }, editrules: { required: true }, sorttype: 'date', formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "ShortDate" } },
                        { name: "idUserCreatedBy", index: "idUserCreatedBy" },
                        {
                            name: 'actions',
                            index: '',
                            width: 80,
                            fixed: true,
                            sortable: false,
                            search: false,
                            resize: false,
                            formatter: 'actions',
                            formatoptions: {
                                keys: true,
                                delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                                editformbutton: true,
                                editOptions: {
                                    recreateForm: true, beforeShowForm: beforeEditCallback,
                                    addEditOptions: {
                                        onclickSubmit: function () {
                                            return { idDiscount: rowId };
                                        }
                                    }
                                }

                            }
                        }
                    ],

                    rowNum: 10,
                    rowList: [10, 20, 30],
                    pager: pagerId,
                    height: 'auto',
                    width: '100%',
                    autowidth: true,
                    loadComplete: function () {
                        var table = this;
                        setTimeout(function() {
                            styleCheckbox(table);
                            updatePagerIcons(table);
                            enableTooltips(table);
                        }, 0);
                    }
                });
                jQuery("#" + subgridTableId).jqGrid('navGrid', "#" + pagerId, jqIcons, jqEditForm, jqNewForm, jqDeleteForm, jqSearchForm, jqViewForm);
            },

Answer 1

如果您使用jqGrid的subgrid as grid功能，那么您实施了subGridRowExpanded回调。回调的第二个参数是父网格的id。如果您在主网格中使用idPrefix（建议您确保没有ID重复项），可以使用$.jgrid.stripPref剪切ID前缀并获取纯idDiscount值

如果使用表单编辑，您可以使用onclickSubmit回调来扩展在编辑期间将发布到服务器的数据。 onclickSubmit回调的确切用法取决于您使用表单编辑的方式。下面的代码片段显示了您可以做的主要想法

subGridRowExpanded: function (subgridDivId, rowId) {
    var mainGridPrefix = $(this).jqGrid("getGridParam", "idPrefix"),
        pagerId = subgridDivId + "_p",
        $subgrid = $("<table id='" + subgridDivId + "_t'></table><div id='" +
                      pagerId + "'></div>"),
        pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
        addEditOptions = {
            onclickSubmit: function () {
                return { idDiscount: pureRowId };
            }
        };

    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
    $subgrid.jqGrid({
        colModel: [
            { name: "cdDiscount", key: true, editable: true,
                editrules: { required: true } }
        ],
        pager: pagerId,
        ....
    }).jqGrid("navGrid", pagerId, {}, addEditOptions, addEditOptions);

onclickSubmit回调返回的数据应该是对象，哪些属性将与发布到服务器的主数据相结合。返回{idDiscount: rowId}只会添加idDiscount参数和父网格行的rowid。

在创建新行时将父行ID添加到SubGrid作为jqGrid

1 个答案: