MVC 3的WebGrid使整个行可点击(MVC 3 Webgrid make entire row

我使用的WebGrid在MVC 3，我的Razor视图下面是我的WebGrid的样子，我想使整个行可点击和点击值传递给JavaScript方法也。

我能够实现我的调用JavaScript方法对所有列的文本。 我希望同样的情况发生在整个行上的任何位置的点击。

请指导我在此。 谢谢

           @grid.GetHtml(

            columns: grid.Columns(

            grid.Column("CompanyName", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "ABC"),

            grid.Column("CompanyAddress", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "DEF"),

            ))      

         }

Answer 1:

你必须使用jQuery来添加行点击功能

在新的WebGrid {ID = “MainTable”：加htmlAttributes。

<script type="text/javascript">
   $(function () {
        var tr = $('#MainTable').find('tr');
        tr.bind('click', function (event) {
            var values = '';
            var tds = $(this).find('td');


            $.each(tds, function (index, item) {
                values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
            });
            alert(values);


        });
    }); 


</script>

Answer 2:

我已经在我的项目中和添加类来完成这个style: "click_able"像特定列。

grid.Column("CompanyName", style: "click_able", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "ABC"),

然后添加点击功能等。

<script type="text/javascript">
$(".click_able").click(function () {
    // Do something 
});

它在我的情况下正常工作。

文章来源: MVC 3 Webgrid make entire row clickable