MVC的Contrib网格复选框 [英] Mvc Contrib grid with checkbox

问题描述

我在寻找如何在支持我girdview中选中或取消选中我所有的复选框列的标题添加一个复选框的方式。

 ＆LT;表类=网格＆GT;
    百分位＆GT;＆LT;输入类型=复选框NAME =chkall/＆GT;＆LT; /第i
    ＆LT;第i个姓名和LT; /第i
     ＆所述; TR＆GT;
         ＆所述; TD＆GT;
            ＆LT;输入类型=复选框ID =chkItem_1/＆GT;
         ＆LT; / TD＆GT;
         ＆所述; TD＆GT;
             第1类
         ＆LT; / TD＆GT;
     ＆LT; / TR＆GT;
     ＆所述; TR＆GT;
         ＆所述; TD＆GT;
            ＆LT;输入类型=复选框ID =chkItem_2/＆GT;
         ＆LT; / TD＆GT;
          ＆所述; TD＆GT;
             第2类
         ＆LT; / TD＆GT;
     ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

解决方案

  column.For（X =＆GT; Html.CheckBox（mycheckbox，新{@class =富 }））
    .DoNotEn code（）
    .Header（＆​​LT;第i＆LT;输入类型= \\复选框\\ID =chkHeader/＆GT;＆LT; /第i）;
 

然后你可以使用jQuery来处理头复选框的更改事件选中/取消所有其他：

  $（函数（）{
    $（'＃chkHeader'）。改变（函数（）{
        如果（$（本）。是（'：检查'））{
            $（'富'）ATTR（'检查'，'检查'）。
        }其他{
            $（'富'）removeAttr（'检查'）。
        }
    }）;
}）;
 

I'm looking for the way how to add a checkbox on the header that support checked or unchecked all my checkbox column of my girdview.

    <table class="grid">
    <th><input type="checkbox" name="chkall"/></th>
    <th>Name</th>
     <tr>
         <td>       
            <input type="checkbox" id="chkItem_1"/>
         </td>
         <td>
             Category 1
         </td> 
     </tr>
     <tr>
         <td>       
            <input type="checkbox" id="chkItem_2"/>
         </td>
          <td>
             Category 2
         </td>
     </tr>
</table>  

解决方案

column.For(x => Html.CheckBox("mycheckbox", new { @class = "foo" }))
    .DoNotEncode()
    .Header("<th><input type=\"checkbox\" id="chkHeader" /></th>");

And then you could use jquery to handle the change event of the header checkbox and check/uncheck all the others:

$(function() {
    $('#chkHeader').change(function() {
        if ($(this).is(':checked')) {
            $('.foo').attr('checked', 'checked');
        } else {
            $('.foo').removeAttr('checked');
        }
    });
});

这篇关于MVC的Contrib网格复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！