asp.net-mvc-3 - MVC 3 Webgrid 使整行可点击

Question

我在 MVC 3 的 Razor View 中使用 webgrid。
下面是我的 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 中添加 htmlAttributes: new { id="MainTable"}。

<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>