将Id传递给Jqgrid的子网格

时间:2014-09-25 04:19:07

标签: javascript jquery asp.net-mvc jqgrid

在这里我将使用InvoiceId扩展子网格,但我不知道如何获取InvoiceId并将其传递给子网格url.my主网格具有InvoiceId。这是JqGrid。当我将发票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
    }

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

在jqGrid中,子网格URL的默认querystring参数是id。您可以使用以下代码进行更改:

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

因此,您的子网格网址将是

/ 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'
        }
    });