MVC 3 Webgrid使整个行都可单击 [英] MVC 3 Webgrid make entire row clickable

问题描述

我在MVC 3的razor视图中使用的是webgrid. 以下是我的webGrid的外观，我想使整行都可单击，并且在单击时也将值传递给javascript方法.

I am using webgrid in my razor view in MVC 3. Below is how my webGrid looks, I want to make the entire row clickable and on click pass values to the javascript method also.

我能够对所有列的文本调用javascript方法.我希望在整行中的任何位置单击都发生同样的事情.

I am able to achieve calling my javascript method on text of all columns. I want the same to happen for click of anywhere on the entire row.

请指导我.谢谢

           @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"),

            ))      

         }

推荐答案

您必须使用JQuery添加行点击功能

You have to use JQuery to add row click functionality

在您的网络网格中添加htmlAttributes:新的{id ="MainTable"}.

Add htmlAttributes: new { id="MainTable" } in your webgrid.

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

这篇关于MVC 3 Webgrid使整个行都可单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！