在MVC4中显示JQGrid的行内容

时间:2013-07-08 12:38:07

标签: jquery asp.net-mvc-4 jqgrid

我目前在ASP MVC4 Razorview页面中使用JQGrid。我的页面结构是

<body onload="TimeStamp();">
    <h2>Events as of <div id="timestampDiv"></div></h2>

    <div>
        @Html.Trirand().JQGrid(Model.EventsGrid, "JQGrid1")
    </div>
</body>

我想要做的是在JQGrid中单击一行时显示页面上记录的各个元素。想想Windows事件查看器,当您单击某个事件时,表单的其余部分将填充特定的事件信息。理想情况下,网格和记录信息将位于同一页面上。

我的问题:我是JQuery和JQGrid的新手。我怎样才能做到这一点?我可能正在考虑它的方式,还是有另一种更好的方式来获得类似于我想要的东西?

谢谢。

更新:我试过了:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#JQGrid1").jqGrid({
                onSelectRow: function (id) {
                    // using id here to get details from server and display them
                    jQuery('#appDiv').text("test");
                }
            });
        });
    </script>

这会导致我的网格从页面中消失。

UPDATE2:在我看来(告诉我,如果我错了)上面的代码重建了一个jqgrid(就像一个构造函数),需要更多代码才能工作。由于我的JQGrid已经创建并传递到视图中,因此我必须在控制器中设置onselectrow事件处理程序。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

是的,这是可能的。您必须挂钩行单击事件并使用它来填充表单。 更具体地说,你必须挂钩jqGrid的onSelectRow事件

例如:您的网格标识为JQGrid1

我们将在JavaScript代码中使用此ID来挂钩onSelectRow事件,如下所示:

$("#JQGrid1").jqGrid({
   onSelectRow: function(id){ 
      // using id here to get details from server and display them
   }
});

<强>更新

由于您已使用服务器端包装器创建了网格,因此上述代码将尝试重新初始化网格。请尝试以下代码,看看它是否有帮助。

$('#JQGrid1').jqGrid('setGridParam', 
 { 
    onSelectRow: function(id){ alert(id); } 
 });
相关问题