JQGrid Master Detail选择/ MultiSelect在细节网格上不起作用

时间：2010-11-07 17:59:05

标签： jquery asp.net-mvc-2 jqgrid

我在ASP.NET MVC 3（默认视图引擎）中尝试Master Detail场景。

我能够在http://www.trirand.com/blog/jqgrid/jqgrid.html处查看以下代码并获取主要详细信息。问题是当我在细节中选择任何行时 第一行似乎被选中/未被选中 点击链接查找所选id的返回，null，null，null，null，nul

你们中的任何人都有同样的经历。

如果您能指出我使用JQGrid Master Details工作ASP.NET MVC示例，我们将不胜感激。

此致

月

修改 - 代码

1-查看页面

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/default.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Orders Available
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/themes/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="../../Scripts/js/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="scriptContent" runat="server">
    <script type="text/javascript">
        jQuery(document).ready(function () {

            jQuery("#list10").jqGrid({
                url: '/order/list/',
                datatype: "json",
                mtype: 'post',
                colNames: ['PurchaseOrder', 'SalesOrder', 'OrderDate', 'Supplier', 'Status', "Details"],
                colModel: [
      { name: 'PurchaseOrder', index: 'PurchaseOrder', width: 100, align: 'left' },
                            { name: 'SalesOrder', index: 'SalesOrder', width: 100, align: 'left' },
                            { name: 'OrderDate', index: 'OrderDate', width: 75, align: 'left' },
                            { name: 'Supplier', index: 'Supplier', width: 150, align: 'left' },
                            { name: 'Status', index: 'Status', width: 50, align: 'left' },                          
                            { name: 'Details', index: 'Details', width: 50, align: 'left' }
    ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager10',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                multiselect: false,
                caption: "Invoice Header",
                onSelectRow: function (ids) {
                    if (ids == null) {
                        ids = 0;
                        if (jQuery("#list10_d").jqGrid('getGridParam', 'records') > 0) {
                            jQuery("#list10_d").jqGrid('setGridParam', { url: "/order/detail/id=" + ids, page: 1 });
                            jQuery("#list10_d").jqGrid('setCaption', "Invoice Detail: " + ids)
                .trigger('reloadGrid');
                        }
                    } else {
                        jQuery("#list10_d").jqGrid('setGridParam', { url: "/order/detail/id=" + ids, page: 1 });
                        jQuery("#list10_d").jqGrid('setCaption', "Invoice Detail: " + ids)
            .trigger('reloadGrid');
                    }
                }
            });
            jQuery("#list10").jqGrid('navGrid', '#pager10', { add: false, edit: false, del: false });
            jQuery("#list10_d").jqGrid({
                height: 100,
                url: "/order/detail/",
                datatype: "json",
                colNames: ['Stock Number', 'Description', 'Available', 'Required'],
                colModel: [
        { name: 'PartNumber', index: 'StockNumber', width: 100, align: 'left' },
                            { name: 'Description', index: 'Description', width: 200, align: 'left' },
                            { name: 'Available', index: 'Available', width: 75, align: 'left' },
                            { name: 'Required', index: 'Required', width: 75, align: 'left' }
    ],
                rowNum: 5,
                rowList: [5, 10, 20],
                pager: '#pager10_d',
                sortname: 'item',
                viewrecords: true,
                sortorder: "asc",
                multiselect: true,
                caption: "Invoice Detail",
                beforeSelectRow: function(rowid, e) { return true; }

            }).navGrid('#pager10_d', { add: false, edit: false, del: false });
            jQuery("#ms1").click(function () {
                var s;
                s = jQuery("#list10_d").jqGrid('getGridParam', 'selarrrow');
                alert(s);
            });

        });
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="mainContent" runat="server">
    <div class="orderSelSum">
        <h3>
            Summary</h3>
        <p>
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
            in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
            Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
            up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
            and going through the cites of the word in classical literature, discovered the
            undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
            Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
            This book is a treatise on the theory of ethics, very popular during the Renaissance.
            The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
            in section 1.10.32</p>
    </div>
    <div id="orderMain">
        <table id="list10">
        </table>
        <div id="pager10">
        </div>
        <br />
        Invoice Detail
        <table id="list10_d">
        </table>
        <div id="pager10_d">
        </div>
        <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
    </div>
</asp:Content>

2- JSon结果

a）对于主表

{"total":10,"page":1,"records":4,"rows":[{"id":"4cf2c07d-1f13-4add-8bf9-3e7bca441a69","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]},{"id":"54f3b266-dd14-4137-ab76-6d4a1fd7fe7c","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]},{"id":"ab63a5ae-1f00-43ed-a50e-d8fb60ff2df2","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]},{"id":"484c0e05-80c6-4259-8a29-ca6be83037e4","cell":["NV32653-A","23434324","03/01/2010","MY Supplier","Ready for Use","\u003ca href=\u0027#\u0027\u003eDetails\u003c/a\u003e"]}]}

b）细节

{"rows":[{"id":null,"cell":["PART A","Apple ","10","0"]},{"id":null,"cell":["PART B","Orange","12","0"]},{"id":null,"cell":["PART C","Banana","8","0"]},{"id":null,"cell":["PART D","Bread","10","0"]},{"id":null,"cell":["Part E","Jam","9","0"]}]}

一些图片

alt text alt text alt text

更新1 发现细节json包含ID字段的null。我很快就会纠正。

1 个答案:

答案 0 :(得分：2)

在Master / Detail场景中您必须考虑的唯一问题是在两个表中选择id。重要的是要理解，jqGrid使用从服务器返回的id作为网格的<tr>元素的id。因此，如果您对两个表使用相同的ID（重复），则会产生冲突。

您仍然遇到Master / Detail场景的实施问题，您应该使用代码示例和一些测试数据附加您的问题。可以将测试JSON数据保存到文本文件中以模拟服务器响应，因此不需要服务器代码。

相关问题
最新问题