现在的位置: 首页 > 综合 > 正文

通过绘制在datagridview控件列头添加一个checkbox控件

2013年09月03日 ⁄ 综合 ⁄ 共 14495字 ⁄ 字号 评论关闭

 众所周知,datagridview控件是CS架构中用的比较频繁的一个控件,里面提供了checkbox列的功能,可是却没有在列头给出checkbox控件用于全选/全部取消所有行的功能,确实是个遗憾,这里就通过绘制实现这个功能.

      该程序参考codeproject上的程序,网址如下:

      http://www.codeproject.com/KB/grid/CheckBoxHeaderCell.aspx  向其致敬!

 

一.创建一个表,里面包含bit字段,datagridview的DataGridViewCheckBoxColumn列会自动将其转换成checkbox列

见表语句如下,数据库名为testDB

CREATE TABLE [dbo].[UserInfo] (
 [RID] [varchar] (32) COLLATE Chinese_PRC_CI_AS NOT NULL ,
 [username] [varchar] (10) COLLATE Chinese_PRC_CI_AS NULL ,
 [gendar] [bit] NULL
) ON [PRIMARY]

 

二.主要代码

datagridviewCheckboxHeaderEventArgs类,用在在checkbox单击事件中提供类头checkbox的选择状态

 

Code

 

datagridviewCheckboxHeaderCell类,这是个关键列,用于绘制列头checkbox和创建鼠标单击事件

 

Code

 

 

还要定义和事件相关的委托:

    //定义触发单击事件的委托
    public delegate void datagridviewcheckboxHeaderEventHander(object sender, datagridviewCheckboxHeaderEventArgs e);

 

 

另外是界面操作代码:

 

Code
此功能在客户端的实现代码(javascript实现)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">   
    // 判断多选是否与选中项(没有选中的返回false)
    function slcNo_click()
    {
        if (document.form1.checkboxname.length)
        {
            for (var i=0;i<document.form1.checkboxname.length;i++)
            {
                if(document.form1.checkboxname[i].checked)
                {
                    return true;
                }
            }
        }
        else
        {
            if(document.form1.checkboxname.checked)
            {
                return true;
            }
        }
        alert("请选择后再操作!");
        return false;
    }
   
    // 鼠标经过改变行的颜色
    if (!objbeforeItem)
    {
        var objbeforeItem=null;
        var objbeforeItembackgroundColor=null;
    }   
    function ItemOver(obj)
    {
        if(objbeforeItem)
        {
            objbeforeItem.style.backgroundColor = objbeforeItembackgroundColor;
        }
        objbeforeItembackgroundColor = obj.style.backgroundColor;
        objbeforeItem = obj;
        obj.style.backgroundColor = "#B9D1F3";    
    }
    //       
    // 多选的全选与取消
    function checkJs(boolvalue)
    {
        if(document.all.checkboxname.length>1)
        {
            for(var i=0;i<document.all.checkboxname.length;i++)
            {
                document.all.checkboxname[i].checked = boolvalue;           
            }
        }
        else
            document.all.checkboxname.checked = boolvalue;
    }
    //
   
    // 只有全部选中时“全选”选中
    function SingleCheckJs()
    {
        var flag1=false;
        var flag2=false;
       
        if (document.form1.checkboxname.length)
        {
        //
            for (var i=0;i<document.form1.checkboxname.length;i++)
            {
                if(document.form1.checkboxname[i].checked)
                    flag1 = true;
                else
                    flag2 = true;
            }
        }
        else
        {
            if(document.form1.checkboxname.checked)
                flag1 = true;
            else
                flag2 = true;
        }
        //
        if(flag1==true&&flag2==false)
            document.getElementById("chk").checked = true;
        else
            document.getElementById("chk").checked = false;
    }
    //
    </script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
var   s = "";
s += "/r/n网页可见区域宽:"+ document.body.clientWidth;
s += "/r/n网页可见区域高:"+ document.body.clientHeight;
s += "/r/n网页可见区域宽:"+ document.body.offsetWidth   +" (包括边线和滚动条的宽)";
s += "/r/n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "/r/n网页正文全文宽:"+ document.body.scrollWidth;
s += "/r/n网页正文全文高:"+ document.body.scrollHeight;
s += "/r/n网页被卷去的高:"+ document.body.scrollTop;
s += "/r/n网页被卷去的左:"+ document.body.scrollLeft;
s += "/r/n网页正文部分上:"+ window.screenTop;
s += "/r/n网页正文部分左:"+ window.screenLeft;
s += "/r/n屏幕分辨率的高:"+ window.screen.height;
s += "/r/n屏幕分辨率的宽:"+ window.screen.width;
s += "/r/n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "/r/n屏幕可用工作区宽度:"+ window.screen.availWidth;
s += "/r/n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "/r/n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
alert(s);
</SCRIPT>
    <form id="form1" runat="server">
   
        <div>
            <table cellpadding="0" cellspacing="0" border="0" width="80%" style="font-size: 11px">
                <tr>
                    <td align="center">
                        <asp:GridView ID="GridView1" runat="server" Width="100%" CellPadding="4" ForeColor="#333333"
                            AutoGenerateColumns="False" AllowPaging="True" PageSize="12" BorderColor="Silver"
                            BorderStyle="Solid" BorderWidth="1px" OnRowDataBound="GridView1_RowDataBound"
                            ShowFooter="True" EmptyDataText="没有数据记录!!" AllowSorting="True" OnSorting="GridView1_Sorting">
                            <Columns>
                                <asp:BoundField HeaderText="编号" DataField="id" Visible="False" />
                                <asp:TemplateField HeaderText="<input type='checkbox'  id='chk' name='chk' onclick='checkJs(this.checked);'  />全选" FooterText="全选">
                                    <ItemTemplate>
                                        <input type="checkbox" id="checkboxname" name="checkboxname" value='<%# DataBinder.Eval(Container.DataItem, "id")%>' onclick='SingleCheckJs();' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="单选" FooterText="单选">
                                    <ItemTemplate>
                                         <img src='Images/updown.gif'   id='imgNavigator' name='imgNavigator'/>
                                        <input type="radio" id="RadioName" name="RadioName" value='<%# Eval("id")%>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField  HeaderText= '出货数量<img src="Images/updown.gif" runat="server"    id="imgNavigator" />' >
                                    <ItemTemplate>
                                        <%# (Container.DataItemIndex+1).ToString()%>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="姓名" FooterText="姓名" DataField="name" SortExpression="name" />
                                <asp:BoundField HeaderText="身份证号" FooterText="身份证号" DataField="card" SortExpression="card" />
                                <asp:BoundField HeaderText="价格" FooterText="价格" DataField="price" DataFormatString="{0:¥#,##0.00}"
                                    HtmlEncode="False" SortExpression="price" />
                                <asp:BoundField HeaderText="数字" FooterText="数字" DataField="price" DataFormatString="{0:0.00}"
                                    HtmlEncode="False" SortExpression="price" />
                                <asp:BoundField HeaderText="建立时间" FooterText="建立时间" DataField="createdate" DataFormatString="{0:yyyy年MM月dd日 hh时mm分ss秒}"
                                    HtmlEncode="False" SortExpression="createdate" />
                            </Columns>
                            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                            <EditRowStyle BackColor="#999999" />
                            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <PagerSettings Visible="False" />
                            <FooterStyle Font-Bold="True" />
                            <HeaderStyle Font-Bold="False" Font-Italic="False" />
                        </asp:GridView>
                    </td>
                </tr>
                <tr>
                    <td align="center" style="height: 25px">
                        <asp:LinkButton ID="btnFirst" CommandArgument="first" OnClick="PagerButtonClick"
                            runat="server">首 页</asp:LinkButton>
                        <asp:LinkButton ID="btnPrev" CommandArgument="prev" OnClick="PagerButtonClick" Text="上一页" runat="server">上一页</asp:LinkButton>
                        <asp:LinkButton ID="btnNext" CommandArgument="next" OnClick="PagerButtonClick" Text="下一页" runat="server">下一页</asp:LinkButton>
                        <asp:LinkButton ID="btnLast" CommandArgument="last" OnClick="PagerButtonClick" Text="尾页" runat="server">尾 页</asp:LinkButton>
                        <asp:Label ID="LblCurrentIndex" runat="server"></asp:Label>
                        <asp:Label ID="LblPageCount" runat="server"></asp:Label>
                        <asp:Label ID="LblRecordCount" runat="server"></asp:Label></td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button2" runat="server" Text="checkbox得到选择的行" OnClick="Button2_Click">
                        </asp:Button>
                        <asp:Button ID="Button1" runat="server" Text="radio得到选择的行" OnClick="Button1_Click"></asp:Button>
                        <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="btnPrint" Width="130px" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
 

 

抱歉!评论已关闭.