将Id传递给Jqgrid的Subgrid

Question

在这里，我将使用InvoiceId扩展subgrid，但我不知道如何获取InvoiceId并将其传递给子网格url.my主网格有InvoiceId.This is JqGrid.When，我将发票ID硬编码到子网格url，然后它就可以工作了。

 <script type="text/javascript">
    $(function () {

        $('#jqgrid').jqGrid({

            url: 'Sales/GetAllSalesOrders/',

            datatype: 'json',
            mtype: 'GET',
            //columns names
            colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
            //columns model
            colModel: [
                        { name: 'InvoiceId', index: 'InvoiceId' },
                        { name: 'CustomerId', index: 'CustomerId',align:'center' },
                        { name: 'SubTotal', index: 'SubTotal', align: 'right' },
                        { name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
                        { name: 'Vat', index: 'Vat', align: 'right' },
                        { name: 'Nbt', index: 'Nbt', align: 'right' },
                        //{ name: 'Total', index: 'Total', align: 'left' },
                        { name: 'NetAmount', index: 'NetAmount', align: 'right' },
                        { name: 'Balance', index: 'Balance', align: 'right' }
            ],

            pager: '#jqgrid',
            rowNum: 10,
            sortname: 'InvoiceId',
            sortorder: 'asc',
            viewrecords: true,
            width: 'auto',
            height: 'auto',
            gridview: true,
            rowNum: 50,
            rowTotal: 200,
            rowList: [20, 30, 50, 100],
            rownumbers: false,
            rownumWidth: 40,
            loadonce: true,
            subGrid: true,
            subgridtype: "json",
            //subrid model
            subGridModel: [{
                //subgrid columns names
                // name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
                name: ['InvoiceItemId', 'Quantity','Amount'],
                width: [100, 100,100],
                align: ['left', 'right','right'],

                //postData: { id: 22 }
            }],
            //url from which subgrid data should be requested
            subGridUrl: '/Sales/GetSalesItemsByInvoiceId/'

        });

我的控制器接受Id，

 [HttpGet]
    public JsonResult GetSalesItemsByInvoiceId(int InvoiceId)
    {
    //Some code here
    }

Answer 1

您可以使用subGridBeforeExpand来设置subGridUrl：$(this).jqGrid("setGridParam", {subGridUrl: newValue});的新值。

或者，您可以考虑使用subGridRowExpanded来实现grid as subgrid。作为子网格的网格允许你对子网格的内容进行最大限度的控制。jqGrid只需为在expended one下添加的附加行的右侧部分创建空<div>。对于子网格，需要在内部放置空的<table>，对于寻呼机，需要放置可选的<div>。在此之后，只需创建新的网格。grdi的url是subgrid的URL。我看到您在主网格中使用loadonce: true。也许你可以在加载主网格的过程中直接为每个网格下载完整的子网格。The answer提供了此类实现的一个示例。

Answer 2

在jqGrid中，子网格url的默认查询字符串参数是id。您可以使用以下代码更改此设置：

...
prmNames: {
    subgridid: "InvoiceId",
}
...

因此，您的子网格url将是

/Sales/GetSalesItemsByInvoiceId?InvoiceId=

而不是

/Sales/GetSalesItemsByInvoiceId?id=

你也可以使用下面的代码更改行的唯一id，你可以给出"colModel“中指定的任何一个名称(在本例中它将是"InvoiceId")：

...
jsonReader: {
   id: 'InvoiceId'
}
...

因此您的最终代码将如下所示：

<script type="text/javascript">
$(function () {

    $('#jqgrid').jqGrid({

        url: 'Sales/GetAllSalesOrders/',

        datatype: 'json',
        mtype: 'GET',
        //columns names
        colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
        //columns model
        colModel: [
                    { name: 'InvoiceId', index: 'InvoiceId' },
                    { name: 'CustomerId', index: 'CustomerId',align:'center' },
                    { name: 'SubTotal', index: 'SubTotal', align: 'right' },
                    { name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
                    { name: 'Vat', index: 'Vat', align: 'right' },
                    { name: 'Nbt', index: 'Nbt', align: 'right' },
                    //{ name: 'Total', index: 'Total', align: 'left' },
                    { name: 'NetAmount', index: 'NetAmount', align: 'right' },
                    { name: 'Balance', index: 'Balance', align: 'right' }
        ],

        pager: '#jqgrid',
        rowNum: 10,
        sortname: 'InvoiceId',
        sortorder: 'asc',
        viewrecords: true,
        width: 'auto',
        height: 'auto',
        gridview: true,
        rowNum: 50,
        rowTotal: 200,
        rowList: [20, 30, 50, 100],
        rownumbers: false,
        rownumWidth: 40,
        loadonce: true,
        subGrid: true,
        subgridtype: "json",
        //subrid model
        subGridModel: [{
            //subgrid columns names
            // name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
            name: ['InvoiceItemId', 'Quantity','Amount'],
            width: [100, 100,100],
            align: ['left', 'right','right'],

            //postData: { id: 22 }
        }],
        //url from which subgrid data should be requested
        subGridUrl: '/Sales/GetSalesItemsByInvoiceId/',
        prmNames: {
          subgridid: "InvoiceId",
        },
        jsonReader: {
          id: 'InvoiceId'
        }
    });