【问题标题】:adding the parent row id to SubGrid as jqGrid when creating new row在创建新行时将父行 ID 作为 jqGrid 添加到 SubGrid
【发布时间】:2014-01-01 13:50:48
【问题描述】:

将 jqGrid 用作子网格,编辑子网格行就可以了。
但是当尝试添加 SubGrid 行时,idDiscount (FK) 应该与 SubGrid 表单一起发布。
我试过在网上搜索这个,但没有找到关于这个主题的任何内容。

如您所见,在我的主网格中,主键是idDiscount, 在子网格上,主键是 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);
            },

【问题讨论】:

  • 您发布的代码未显示您使用的哪种编辑模式(内联编辑、表单编辑或单元格编辑)。带有subGridRowExpanded 回调的行也被删除。是subGridRowExpanded(subgridId, rowId)吗?您同时使用idDiscount(参见editoptions: {value: idDiscount} ???)和rowId。奇怪的是,您在子网格中包含 'idDiscount' 列。你真的需要它还是只是为了解决你的主要问题?
  • 是表单编辑。我确实根据需要使用subGridRowExpanded。我添加了editoptions:{value:idDiscount} 作为尝试解决它(从我在网上找到的东西。只是为了让事情清楚,一切正常,唯一的问题是,当向子网格添加一行时,idDiscount 没有与父行的值。

标签: jquery jqgrid


【解决方案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。

【讨论】:

  • ty 对于那个 oleg,但我似乎仍然无法弄清楚。你能看看我的编辑并告诉我需要改变什么吗?我尝试添加 addEditOptions 但失败了。也,但删除我自己的subGridRowExpanded 并应用你的,我得到一个Element is not a table 错误。
  • @Dementic:了解如何使用编辑非常重要。如果您将formatter: 'actions' 与editformbutton: true 一起使用,那么您应该在formatoptions.editOptions 中包含onclickSubmit。顺便说一句,如果您使用key: true 属性为idDiscount,那么currentRow = $(gridSelector).jqGrid('getRowData', rowId) 将始终返回rowId
  • 所以rowId 将是父行的ID?
  • @Dementic:我不确定我是否理解你的问题。 subGridRowExpanded 的第二个参数(代码中的rowId)是父网格的行(&lt;tr&gt;)的id 属性的值。如果您对主网格中的idDiscount 列使用key: true 属性,则行的值id 属性(&lt;tr&gt;) 将与idDiscount 列中的值相同 (在隐藏的&lt;td&gt; 单元格中)。通常不需要使用任何隐藏列并将重复信息保存在隐藏的&lt;td&gt; 和id 的&lt;tr&gt; 中。仅将其保存在 id 中就足够了。
  • 仍然无法使用 SubGrid Add 方法发布idDiscount...打算放弃(18 小时后...)我不明白我做错了什么,请按照您的步骤操作(请参阅已编辑的问题)但仍然没有。将搜索另一个网格。
猜你喜欢
  • 1970-01-01
  • 2011-08-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多