显示基于父网格的子网格

时间:2017-11-03 15:08:25

标签: c# jquery asp.net-mvc visual-studio jqgrid

我有一个要求,我需要显示父网格。 根据父项中选择的项目,获取数据并显示在子网格中。我目前正在做一个UI模型,并且还没有建立所有模型。因此,您在下面看到的模型只是样本。

我可以使用我需要的数据显示父网格。我还有代码在父网格中选择一行,并使用ajax post将行数据发送到控制器。我需要使用这些数据来填充子网格。这是我不确定我做错了什么的一步。

我的控制器和视图如下:你能帮忙吗? --controller:

public ActionResult GetData()
{

    List<Hierarchy> lh = new List<Hierarchy>();
    Hierarchy m = new Hierarchy();
    m.Hierarchy1 = 1;
    m.Hierarchy2 = 2;
    m.Hierarchy3 = 3;
    lh.Add(m);

    Hierarchy n = new Hierarchy();
    n.Hierarchy1 = 11;
    n.Hierarchy2 = 22;
    n.Hierarchy3 = 33;
    lh.Add(n);

    Hierarchy o = new Hierarchy();
    o.Hierarchy1 = 111;
    o.Hierarchy2 = 222;
    o.Hierarchy3 = 333;
    lh.Add(o);

    return Json(new { rows = lh }, JsonRequestBehavior.AllowGet);
}


public ActionResult EditDescription(Hierarchy info)
{

    List<Product> plist = new List<Product>();

    if (info.Hierarchy1 == 1 && info.Hierarchy2 == 2 && info.Hierarchy3 == 3)
    {
        Product p = new Product();
        p.ProductId = 1;
        p.Productdesc = "ABC";
        plist.Add(p);

        Product q = new Product();
        q.ProductId = 2;
        q.Productdesc = "DEF";
        plist.Add(q);
    }

    if (info.Hierarchy1 == 11 && info.Hierarchy2 == 22 && info.Hierarchy3 == 33)
    {
        Product p = new Product();
        p.ProductId = 11;
        p.Productdesc = "ABCD";
        plist.Add(p);

        Product q = new Product();
        q.ProductId = 22;
        q.Productdesc = "DDEF";
        plist.Add(q);
    }


    return Json(new { rows = plist }, JsonRequestBehavior.AllowGet);

    //return Json("Response from Edit"); 
}

查看:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table id="jqGrid"></table>
    <div id="jqGridpager"></div>

<table id="jqSubGrid"></table>

<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />

@section scripts{

<script src="~/Scripts/jqGrid/grid.locale-en.js"></script>  
<script src="~/Scripts/jqGrid/jquery.jqGrid.js"></script>

    <script>
        $(function () {
            $grid = $("#jqGrid").jqGrid({
                url: '@Url.Action("GetData","TEST")',
                mtype: 'GET',
                datatype: 'json',
                colModel: [
                    { label: 'Hierarchy1', name: 'Hierarchy1' },
                    { label: 'Hierarchy2', name: 'Hierarchy2' },
                    { label: 'Hierarchy3', name: 'Hierarchy3' },
                ],
                loadonce: true,
                pager: '#jqGridPager',
                rowNum: 10,
                rowList: [10, 20, 30, 50],
                viewrecords: true,
                height: 250,

            });
            $("#jqGrid").jqGrid('navGrid', '#jqGridPager', { edit: false, add: false, del: false })

            $("#jqGrid").jqGrid('setGridParam', {
                onSelectRow: function (rowid, iRow, iCol, e) {
                    var rowData = $("#jqGrid").jqGrid("getRowData", rowid);
                    //alert(rowData.Key);
                    var data0 = { Hierarchy1: rowData.Hierarchy1, Hierarchy2: rowData.Hierarchy2, Hierarchy3: rowData.Hierarchy3 };
                  //  var data0 = { numberId: "1", companyId: "531" };
                    //  var roles = ["role1", "role2", "role3"];

                    jQuery.ajax({
                        type: "POST",
                        url: "@Url.Action("EditDescription")",
                        dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data0),
                    success: function (data) {
                        //alert(data);
                    },
                    failure: function (errMsg) {
                        alert(errMsg);
                    }
                });

                    $grid1 = $("#jqSubGrid").jqGrid({
                        url: '@Url.Action("EditDescription", "TEST")',
                        mtype: 'GET',
                        datatype: 'json',
                        colModel: [
                            { label: 'ProductId', name: 'ProductId' },
                            { label: 'Productdesc', name: 'Productdesc' },
                        ],
                        loadonce: true,
                        pager: '#jqGridPager',
                        rowNum: 10,
                        rowList: [10, 20, 30, 50],
                        viewrecords: true,
                        height: 250,

                    });




                }
            });

        });
    </script>
    }

0 个答案:

没有答案