MVC 3 Webgrid如何使整行可点击

Question

我在MVC 3的Razor视图中使用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"),

            ))      

         }

- Yasser Shaikh

---

LoL！这个问题被授予TumbleWeed：一个问题在一周内没有得到任何投票、回答、评论和浏览量很低。希望现在会有答案涌现！:P - Yasser Shaikh

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>

- Raj Kumar

---

我该如何将'@item.Col1'，'@item.Col2'，'@item.Col'这些值传递给我的JavaScript函数？ - Yasser Shaikh

你已经在传递参数了。上面的代码只会突出显示该行。其余的代码会继续执行。 - Raj Kumar

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 
});

在我的案例中它运行良好。

- Syed Ali hassan