Я пытаюсь выполнить сценарий Master Detail в ASP.NET MVC 3 (механизм просмотра по умолчанию).
Мне удалось пройти по следующему коду на http://www.trirand.com/blog/jqgrid/jqgrid.html и получить рабочие детали мастера. Проблема в том, что когда я выбираю любую строку в деталях
первый ряд кажется выбранным / невыбранным
щелкнув по ссылке, можно найти возвращение выбранного идентификатора , ноль, ноль, ноль, ноль, ноль
Кто-нибудь из вас испытывал то же самое?
Если вы можете указать мне на пример ASP.NET MVC с JQGrid Master Details, это будет очень цениться.
С уважением,
Mar
Редактировать - Код
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 результат
а) Для мастер-стола
{"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"]}]}
б) Подробности
{"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"]}]}
Некоторые изображения
Обновление 1
обнаружил, что детали JSON содержит ноль для поля идентификатора. Я исправлю это в ближайшее время.