首页 > 开发 > 综合 > 正文

关于datagrid的几点简单应用

2024-07-21 02:22:43
字体：大 中 小
来源：转载
供稿：网友
  • 本文来源于网页设计爱好者web开发社区http://www.html.org.cn收集整理，欢迎访问。
    • 关于datagrid的几点简单应用，功能包括radio的单选，checkbox的多选，鼠标移动到行上颜色变深，链接传递多参数等功能。这里radio和checkbox都使用的是html控件。
            有关checkbox的几个功能：全部选种、取消选种、没选中操作的检测等，这几个均使用js脚本实现。
        
            运行效果图： 
                 

            testdatagrid.aspx页面代码： 
      1<%@ page language="c#" codebehind="testdatagrid.aspx.cs" autoeventwireup="false" inherits="localhost.fenpage.testdatagrid" %>
      2<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
      3<html>
      4    <head>
      5        <title></title>
      6        <meta name="generator" content="microsoft visual studio .net 7.1">
      7        <meta name="code_language" content="c#">
      8        <meta name="vs_defaultclientscript" content="javascript">
      9        <meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
     10        <script language="javascript">
     11        //全部选中
     12        function quanxuan_click()
     13        {
     14            if (document.form1.checkboxname.length){
     15                for (var i=0;i<document.form1.checkboxname.length;i++){
     16                    document.form1.checkboxname[i].checked = true;
     17                }
     18            }else{
     19                document.form1.checkboxname.checked = true;
     20            }
     21        }
     22        
     23        //取消选中
     24        function quxiao_click()
     25        {
     26            if (document.form1.checkboxname.length){
     27                for (var i=0;i<document.form1.checkboxname.length;i++){
     28                    document.form1.checkboxname[i].checked = false;
     29                }
     30            }else{
     31                document.form1.checkboxname.checked = false;
     32            }
     33        }
     34        
     35        ///////////////判断没有选中的返回false
     36        function slcno_click()
     37        {
     38            if (document.form1.checkboxname.length){
     39                for (var i=0;i<document.form1.checkboxname.length;i++){
     40                    if(document.form1.checkboxname[i].checked)
     41                    {
     42                        return true;
     43                    }
     44                }
     45            }else{
     46                if(document.form1.checkboxname.checked)
     47                {
     48                    return true;
     49                }
     50            }
     51            alert("请选择后再操作！");
     52            return false;
     53        }
     54        
     55        //////////////////////////////////////改变行的颜色
     56        if (!objbeforeitem)
     57        {
     58            var objbeforeitem=null;
     59            var objbeforeitembackgroundcolor=null;
     60        }
     61        function itemover(obj)
     62        {
     63            objbeforeitembackgroundcolor=obj.style.backgroundcolor;
     64            obj.style.backgroundcolor="#b9d1f3";                                        
     65            objbeforeitem=obj;
     66        }
     67        
     68        function itemout(obj)
     69        {            
     70            if(objbeforeitem)
     71            {
     72                objbeforeitem.style.backgroundcolor=objbeforeitembackgroundcolor;
     73            }    
     74        }
     75        </script>
     76    </head>
     77    <body ms_positioning="gridlayout">
     78        <form id="form1" method="post" runat="server">
     79            <table>
     80                <tr>
     81                    <td><font face="宋体"><asp:datagrid id="mydatagrid" runat="server" width="550px" allowpaging="true" autogeneratecolumns="false"
     82                                onpageindexchanged="mydatagrid_page" pagesize="10" cellpadding="2" horizontalalign="left" bordercolor="gray"
     83                                font-size="14px" font-names="新宋体">
     84                                <alternatingitemstyle backcolor="#f2f2f2"></alternatingitemstyle>
     85                                <itemstyle wrap="false" horizontalalign="left" height="22px" verticalalign="middle"></itemstyle>
     86                                <headerstyle wrap="false" height="25px" backcolor="#dee6f6"></headerstyle>
     87                                <columns>
     88                                    <asp:boundcolumn visible="false" datafield="id" sortexpression="id" headertext="id"></asp:boundcolumn>
     89                                    <asp:templatecolumn>
     90                                        <headertemplate>
     91                                            选择
     92                                        </headertemplate>
     93                                        <itemtemplate>
     94                                            <input type=radio name="radioname" value='<%# databinder.eval(container.dataitem, "id")%>'/>
     95                                        </itemtemplate>
     96                                    </asp:templatecolumn>
     97                                    <asp:templatecolumn>
     98                                        <headertemplate>
     99                                            选择
    100                                        </headertemplate>
    101                                        <itemtemplate>
    102                                            <input type="checkbox" name="checkboxname" value='<%# databinder.eval(container.dataitem, "id")%>'>
    103                                        </itemtemplate>
    104                                    </asp:templatecolumn>
    105                                    <asp:templatecolumn>
    106                                        <headertemplate>
    107                                            模板列
    108                                        </headertemplate>
    109                                        <itemtemplate>
    110                                            <asp:label id="lblid" runat="server" text=''>
    111                                            </asp:label>
    112                                            <a href="abc.aspx?id=<%#databinder.eval(container.dataitem,  "id") %>&name=<%#databinder.eval(container.dataitem,  "name") %>" target="_blank">连接</a>
    113                                        </itemtemplate>
    114                                    </asp:templatecolumn>
    115                                    <asp:hyperlinkcolumn datanavigateurlfield="id" datanavigateurlformatstring="aa.aspx?id={0}" datatextfield="name"
    116                                        sortexpression="name" headertext="姓名" target="_blank">
    117                                    </asp:hyperlinkcolumn>
    118                                    <asp:boundcolumn datafield="card" sortexpression="card" headertext="身份证号" dataformatstring="{0:yyyy-mm-dd hh:mm:ss}"></asp:boundcolumn>
    119                                    <asp:boundcolumn datafield="price" sortexpression="price" headertext="价格"></asp:boundcolumn>
    120                                    <asp:boundcolumn datafield="shijian" sortexpression="shijian" headertext="shijian" dataformatstring="{0:yyyy年mm月dd日}"></asp:boundcolumn>
    121                                </columns>
    122                                <pagerstyle mode="numericpages"></pagerstyle>
    123                            </asp:datagrid></font></td>
    124                </tr>
    125                <tr>
    126                    <td>
    127                        <asp:button id="button1" runat="server" text="radio得到选择的行"></asp:button>
    128                        <input type="button" value="全部选中" >
    129                        <input type="button" value="取消选中" >
    130                        <asp:button id="button2" runat="server" text="checkbox得到选择的行"></asp:button>
    131                    </td>
    132                </tr>
    133            </table>
    134        </form>
    135    </body>
    136</html>
    137
            testdatagrid.aspx.cs页面代码：
      1using system;
      2using system.collections;
      3using system.componentmodel;
      4using system.data;
      5using system.data.sqlclient;
      6using system.drawing;
      7using system.web;
      8using system.web.sessionstate;
      9using system.web.ui;
     10using system.web.ui.webcontrols;
     11using system.web.ui.htmlcontrols;
     12using system.configuration;
     13
     14namespace localhost.fenpage
     15{
     16    /**//// <summary>
     17    /// testdgradio 的摘要说明。
     18    /// </summary>
     19    public class testdatagrid : system.web.ui.page
     20    {
     21        protected system.web.ui.webcontrols.radiobutton radiobutton1;
     22        protected system.web.ui.webcontrols.button button1;
     23        protected system.web.ui.webcontrols.button button2;
     24        protected system.web.ui.webcontrols.datagrid mydatagrid;
     25    
     26        private void page_load(object sender, system.eventargs e)
     27        {            
     28            if (!ispostback)
     29            {
     30                bindgrid();
     31            }
     32
     33            button2.attributes.add("onclick","return slcno_click();");
     34        }
     35
     36        public void mydatagrid_page(object sender, datagridpagechangedeventargs e)
     37        {
     38            mydatagrid.currentpageindex = e.newpageindex;
     39            bindgrid();
     40        }
     41
     42        private void bindgrid()
     43        {
     44            string strsql="";
     45            dataset ds  = new dataset();
     46            
     47            strsql="select * from testdg";
     48            sqlconnection conn = new  sqlconnection(configurationsettings.appsettings["connstr"]);  
     49            if (conn.state.tostring() == "closed")
     50            {
     51                conn.open();
     52            }
     53            
     54            sqldataadapter da  = new sqldataadapter(strsql, conn);
     55            da.fill(ds, "testdg");
     56            mydatagrid.datasource = ds.tables["testdg"].defaultview;
     57            mydatagrid.databind();
     58            
     59            da.dispose();
     60            if(conn.state.tostring()=="open")
     61            {
     62                conn.close();
     63            }
     64            conn.dispose();
     65        }
     66
     67        private void mydatagrid_itemcreated(object sender, system.web.ui.webcontrols.datagriditemeventargs e)
     68        {
     69            //配合前台脚本实现鼠标移动到每行上变颜色#region    //配合前台脚本实现鼠标移动到每行上变颜色
     70            if(e.item.itemindex>=0)
     71            {
     72                e.item.attributes.add("onmouseover","itemover(this)");/**///////在每行上增加脚本处理 onmouseover
     73                e.item.attributes.add("onmouseout","itemout(this)");/**///////在每行上增加脚本处理 onmouseout
     74            }
     75            #endregion
     76        }
     77
     78        web 窗体设计器生成的代码#region web 窗体设计器生成的代码
     79        override protected void oninit(eventargs e)
     80        {
     81            //
     82            // codegen: 该调用是 asp.net web 窗体设计器所必需的。
     83            //
     84            initializecomponent();
     85            base.oninit(e);
     86        }
     87        
     88        /**//// <summary>
     89        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
     90        /// 此方法的内容。
     91        /// </summary>
     92        private void initializecomponent()
     93        {    
     94            this.mydatagrid.itemcreated += new system.web.ui.webcontrols.datagriditemeventhandler(this.mydatagrid_itemcreated);
     95            this.button1.click += new system.eventhandler(this.button1_click);
     96            this.button2.click += new system.eventhandler(this.button2_click);
     97            this.load += new system.eventhandler(this.page_load);
     98
     99        }
    100        #endregion
    101
    102        private void button1_click(object sender, system.eventargs e)
    103        {
    104            page.response.write(page.request.form.get("radioname"));
    105        }
    106
    107        private void button2_click(object sender, system.eventargs e)
    108        {
    109            string str="";
    110            string []ckb=null;
    111
    112            str=page.request.form.get("checkboxname");
    113            ckb=str.split(new char[]{','});
    114
    115            page.response.write("直接在页面中得到的值为："+str+"<br>");
    116
    117            page.response.write("处理后存放在数组中，如下：<br>");
    118            for(int i=0;i<ckb.length;i++)
    119            {
    120                page.response.write("ckb["+i+"]的值为："+ckb[i]+"<br>");
    121            }
    122        }
    123    }
    124}
    125
            生成数据库表用到的sql语句：
    create table [dbo].[testdg] (
        [id] [decimal](18, 0) identity (1, 1) not null ,
        [name] [varchar] (50) collate chinese_prc_ci_as null ,
        [card] [varchar] (50) collate chinese_prc_ci_as null ,
        [price] [numeric](18, 2) null ,
        [shijian] [datetime] null 
    ) on [primary]
    go

    alter table [dbo].[testdg] add 
        constraint [df_testdg_shijian] default (getdate()) for [shijian],
        constraint [pk_testdg] primary key  clustered 
        (
            [id]
        )  on [primary] 
    go

    上一篇：SQLServer 工具箱（脚本排序+清除日志+更多实用功能）

    下一篇：用SqlCommandBuilder 实现批量更新

    发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表
    学习交流
    更多

    如何查找有故障的配件

    如何查找有故障的配件...
    热门图片
    更多
    猜你喜欢的新闻
    猜你喜欢的关注

    新闻热点

    最牛同桌！我考了696分我同桌考了703分
    2024-06-26 22:28:41
    650分！高二女生考入北大：遗憾不能上高三
    2024-06-26 22:26:16
    男生估分600只考了397 妈妈：高考虽重要，但不代表所有
    2024-06-26 22:23:01
    唐尚珺回应是否会直播带货：有人出100万想和他合作！
    2024-06-25 19:29:23
    名校抢人名场面：清华、北大太拼了！
    2024-06-25 19:22:14
    男生高考语文满分！网友：第一次听说
    2024-06-25 19:19:15

    疑难解答

    图片精选

    网友关注

    关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
    Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有