扩展GridView控件-复选框的选取
【IT168 技术频道】扩展GridView控件（四）——每行复选框的全选与取消全选
作者：webabcd
介绍
平时使用GridView的时候经常要给每行加一个复选框，然后还需要放置一个单独的全选复选框，通过单击它来让这些复选框全选或取消全选，每次实现这样的功能都要写一段javascript，麻烦，所以扩展它。
控件开发
1、新建一个继承自GridView的类。
/**//// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public class SmartGridView : GridView
{
}
2、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里
using System;
using System.Collections.Generic;
using System.Text;
namespace YYControls.SmartGridView
{
/**//// <summary>
/// javascript
/// </summary>
public class JavaScriptConstant
{
internal const string jsCheckAll = @"<script type=""text/javascript"">
//<![CDATA[
// 隐藏字段的ID，用于存每组的全选复选框ID
var hdnAllName = '[$AllName$]';
// 隐藏字段的ID，用于存每的项复选框ID
var hdnItemName = '[$ItemName$]';
// 组分隔符，一个 全选复选框 和其对应的n个 项复选框 为一个组
var groupSeparator = '[$GroupSeparator$]';
// 项分隔符，项复选框 每个项之间的分隔符
var itemSeparator = '[$ItemSeparator$]';
var strAlls = GetObject(hdnAllName).value;
var strItems = GetObject(hdnItemName).value;
// 全选复选框数组
var aryAlls = strAlls.split(groupSeparator);
// 项复选框数组，每行有一个组的所有项复选框
var aryItems = strItems.split(groupSeparator);
// 全选复选框被单击，参数为 该全选复选框这个对象
function ClickCheckAll(objAll)
{
// 每个全选复选框
for (var i=0; i<aryAlls.length; i++)
{
// 该全选复选框是所单击的全选复选框
if (aryAlls[i] == objAll.id)
{
// 该全选复选框同组下的项复选框数组
aryItem = aryItems[i].split(itemSeparator);
for (var j=0; j<aryItem.length; j++)
{
// 单击的全选复选框是选中状态，并且项复选框不是disabled，则选中
if (objAll.checked && !GetObject(aryItem[j]).parentElement.disabled)
{
GetObject(aryItem[j]).checked = true;
}
// 否则
else
{
GetObject(aryItem[j]).checked = false;
}
}
break;
}
}
}
// 项复选框被单击
function ClickCheckItem()
{
// 每组项复选框
for (var i=0; i<aryItems.length; i++)
{
// 该组的所有项复选框数组
aryItem = aryItems[i].split(itemSeparator);
// 标记，是否同组的项复选框都被选中
var bln = true;
for (var j=0; j<aryItem.length; j++)
{
// 如果该项复选框没被选中，并且不是disabled，则bln设为false
if (!GetObject(aryItem[j]).checked && !GetObject(aryItem[j]).parentElement.disabled)
{
bln = false;
break;
}
}
// bln为true，则设置同组的全选复选框为选中
if (bln)
{
GetObject(aryAlls[i]).checked = true;
}
// 否则
else
{
GetObject(aryAlls[i]).checked = false;
}
}
}
function GetObject(param)
{
return document.getElementById(param);
}
//]]>
</script>";
}
}
作者：webabcd
介绍
平时使用GridView的时候经常要给每行加一个复选框，然后还需要放置一个单独的全选复选框，通过单击它来让这些复选框全选或取消全选，每次实现这样的功能都要写一段javascript，麻烦，所以扩展它。
控件开发
1、新建一个继承自GridView的类。
/**//// <summary>/// 继承自GridView/// </summary>[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]public class SmartGridView : GridView{}2、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里
using System;using System.Collections.Generic;using System.Text;namespace YYControls.SmartGridView{ /**//// <summary> /// javascript /// </summary> public class JavaScriptConstant { internal const string jsCheckAll = @"<script type=""text/javascript""> //<![CDATA[ // 隐藏字段的ID，用于存每组的全选复选框ID var hdnAllName = '[$AllName$]'; // 隐藏字段的ID，用于存每的项复选框ID var hdnItemName = '[$ItemName$]'; // 组分隔符，一个 全选复选框 和其对应的n个 项复选框 为一个组 var groupSeparator = '[$GroupSeparator$]'; // 项分隔符，项复选框 每个项之间的分隔符 var itemSeparator = '[$ItemSeparator$]'; var strAlls = GetObject(hdnAllName).value; var strItems = GetObject(hdnItemName).value; // 全选复选框数组 var aryAlls = strAlls.split(groupSeparator); // 项复选框数组，每行有一个组的所有项复选框 var aryItems = strItems.split(groupSeparator); // 全选复选框被单击，参数为 该全选复选框这个对象 function ClickCheckAll(objAll) { // 每个全选复选框 for (var i=0; i<aryAlls.length; i++) { // 该全选复选框是所单击的全选复选框 if (aryAlls[i] == objAll.id) { // 该全选复选框同组下的项复选框数组 aryItem = aryItems[i].split(itemSeparator); for (var j=0; j<aryItem.length; j++) { // 单击的全选复选框是选中状态，并且项复选框不是disabled，则选中 if (objAll.checked && !GetObject(aryItem[j]).parentElement.disabled) { GetObject(aryItem[j]).checked = true; } // 否则 else { GetObject(aryItem[j]).checked = false; } } break; } } } // 项复选框被单击 function ClickCheckItem() { // 每组项复选框 for (var i=0; i<aryItems.length; i++) { // 该组的所有项复选框数组 aryItem = aryItems[i].split(itemSeparator); // 标记，是否同组的项复选框都被选中 var bln = true; for (var j=0; j<aryItem.length; j++) { // 如果该项复选框没被选中，并且不是disabled，则bln设为false if (!GetObject(aryItem[j]).checked && !GetObject(aryItem[j]).parentElement.disabled) { bln = false; break; } } // bln为true，则设置同组的全选复选框为选中 if (bln) { GetObject(aryAlls[i]).checked = true; } // 否则 else { GetObject(aryAlls[i]).checked = false; } } } function GetObject(param) { return document.getElementById(param); } //]]> </script>"; }}0
相关文章
关注我们
