C#中的GridView嵌套实例
前言:
在Windows开发和Web开发中,经常需要使用父子网格控件,即用父子两个网格显示相关联的信息,点击父网格即在子网格中显示与之有关的信息。使用父子网格控件,既可以合理显示信息,又可以简化操作。下面笔者以一个显示物料和物料下每个包装的案例介绍父子网格控件的使用。
在Windows开发和Web开发中,经常需要使用父子网格控件,即用父子两个网格显示相关联的信息,点击父网格即在子网格中显示与之有关的信息。使用父子网格控件,既可以合理显示信息,又可以简化操作。下面笔者以一个显示物料和物料下每个包装的案例介绍父子网格控件的使用。
一、 本案例需求
现在程序上需要实现:以网格显示已经治疗的病人,点击该病人(选中改行),显示该病人下所以得医嘱,入再次选中改行,该病人的医嘱是隐藏的
二,效果图;
三
、
程序设计要点
实现这个功能比较简单,主要在于父子网格嵌套,子网格根据父网格的行进行数据查询,子网格的显示和隐藏。
本程序开发语言用C#,网格控件用GridView,在Asp.Net环境下实现,为了显示和隐藏子网格,还需要用到Javas cript。下面分别对本程序的实现要点进行说明:
本程序开发语言用C#,网格控件用GridView,在Asp.Net环境下实现,为了显示和隐藏子网格,还需要用到Javas
1、 父子网格控件的嵌套
要把子网格嵌套到父网格中,其实就相当于在父网格中指定一列,通过点击该列就能在子控件中显示或隐藏与该行有关的详细信息。
在父网格中显示的信息病人的信息。另还需增加一列作为与子网格的链接。
要把子网格嵌套到父网格中,其实就相当于在父网格中指定一列,通过点击该列就能在子控件中显示或隐藏与该行有关的详细信息。
在父网格中显示的信息病人的信息。另还需增加一列作为与子网格的链接。
2、 子网格的数据查询
当点击父网格中一行的链接时,即要展开子网格(假设子网格为隐藏),并在子网格中显示与病人相关的医嘱信息。这里有两个个因素:一是什么情况下触发该展开事件,二是父子网格怎么传递参数------来保证子网格显示的是病人信息的所有医嘱
对于第一个问题,GridView控件中有专门的事件 On RowDataBound 来达到此目的,此事件在父网格中执行。
第二个问题,需要在父网格中指定关键字,用DataKeyNames参数,可以指定多个,中间以 , 隔开。
3、 子网格的显示和隐藏
父子网格显示的信息应以父网格为主,而子网格则作为参照性退居其次。因此,子网格应能方便的显示和隐藏,想要就显示,不想要就隐藏,以免影响主网格中信息的感染力。
显示和隐藏子网格,本案例用的是 Javas cript中的层(div)来实现的。将子网格放在一个 Div 中,且初始化为隐藏。
父网格中的信息由很多条,则显示或隐藏的子网格应是与父网格中所点击的信息有关的。所以,包含子网格的Div 的名称应是动态的,而且应与父网格的DataKeyNames内容一致。
下面贴出详细代码(代码中省略了部分不重要内容),并在代码中对关键点做解释说明:
下面是源码:
当点击父网格中一行的链接时,即要展开子网格(假设子网格为隐藏),并在子网格中显示与病人相关的医嘱信息。这里有两个个因素:一是什么情况下触发该展开事件,二是父子网格怎么传递参数------来保证子网格显示的是病人信息的所有医嘱
对于第一个问题,GridView控件中有专门的事件 On
第二个问题,需要在父网格中指定关键字,用DataKeyNames参数,可以指定多个,中间以 , 隔开。
3、 子网格的显示和隐藏
父子网格显示的信息应以父网格为主,而子网格则作为参照性退居其次。因此,子网格应能方便的显示和隐藏,想要就显示,不想要就隐藏,以免影响主网格中信息的感染力。
显示和隐藏子网格,本案例用的是 Javas
父网格中的信息由很多条,则显示或隐藏的子网格应是与父网格中所点击的信息有关的。所以,包含子网格的Div 的名称应是动态的,而且应与父网格的DataKeyNames内容一致。
下面贴出详细代码(代码中省略了部分不重要内容),并在代码中对关键点做解释说明:
下面是源码:
前台:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="bpis_barcodePrint.aspx.cs" Inherits="IS_bpis_barcodePrint" %> <!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 runat="server"> <base target="_self" /> <title>条码打印</title> <link rel="stylesheet" type="text/css" href="../css/table.css" /> <link rel="stylesheet" type="text/css" href="../css/Treatment.css" /> <script type="text/javascript" src="../Js/input_select/jquery-1.8.2.js"></script> <script type="text/javascript" src="../../Js/input_select/jquery.cookie.js"></script> <script type="text/javascript" src="../Js/input_select/jquery.input_select_control.js"></script> <script type="text/javascript" src="../Js/ext/ext-jquery-adapter.js"></script> <link rel="Stylesheet" type="text/css" href="../Js/ext/ext-all.css" /> <script type="text/javascript" src="../Js/ext/ext-all.js"></script> <script type="text/javascript" src="../Js/ext/ContentWindow.js"></script> <script type="text/javascript" src="../Js/CommonDateFormat.js"></script> <script type="text/javascript" src="../Js/DatePicker/WdatePicker.js"></script> <script type="text/javascript" > prevselitem = null; function checkAll(item) { if ($(item).attr('checked') == 'checked') { $('#gv_patient').find('input[type=checkbox]').attr('checked', true); } else { $('#gv_patient').find('input[type=checkbox]').attr('checked', false); } } function ChkSelected(item, flag) { var $tr_matter = $("#" + item.id); $tr_matter.find('input[type=checkbox]').attr('checked', flag.checked); $tr_matter.attr("display", "block"); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> <div id="top"> <table> <tr> <td>病人姓名</td> <td><input type="text" value="" id="txt_patientName" runat="server" /> </td> <td>日期</td> <td> <input type="text" name="txtTreatmeny_Date" id="txtTreatmeny_Date" class="inputstyles" style="width: 68px;" οnfοcus="WdatePicker({isShowWeek:true,skin:'whyGreen'});" runat="server" /> </td> <td> <asp:DropDownList runat="server" ID="ddl_treatmentClass"> <asp:ListItem Value="-1" Text="所有" Selected="True"></asp:ListItem> <asp:ListItem Value="1" Text="第一班" ></asp:ListItem> <asp:ListItem Value="2" Text="第二班"></asp:ListItem> <asp:ListItem Value="3" Text="第三班"></asp:ListItem> <asp:ListItem Value="4" Text="加班"></asp:ListItem> </asp:DropDownList> </td> <td>途经</td> <td> <asp:DropDownList runat="server" ID="ddl_track"> <asp:ListItem Value="-1" Text="静脉推注"></asp:ListItem> </asp:DropDownList> </td> <td>方式</td> <td> <asp:DropDownList runat="server" ID="ddl_methods" Width="80px"> <asp:ListItem Value="-1" Text="--请选择--"></asp:ListItem> </asp:DropDownList> </td> <td><input type="button" id="btn_query" onserverclick="btn_query_click" runat="server" class="two-bu" value="查询"/> <input type="button" id="btn_barcodePrint" class="four-bu" value="条码打印"/></td> </tr> </table> </div> <div id="content" style="width:900px"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td valign="top" style="padding: 0px;"> <asp:GridView ID="gv_patient" runat="server" AutoGenerateColumns="false" Width="100%" RowStyle-HorizontalAlign="Left" BorderWidth="1" OnRowDataBound="gv_patient_RowDataBound" DataKeyNames="patient_id,treatment_id"> <RowStyle CssClass="GridItem" /> <AlternatingRowStyle CssClass="GridAltItem" /> <HeaderStyle CssClass="GridHeader" /> <SelectedRowStyle CssClass="GridSelItem" /> <Columns> <asp:TemplateField HeaderStyle-Width="10px" ItemStyle-Width="15px"> <ItemTemplate> <asp:Image ID="imgFlag" runat="server" ImageUrl="~/Images/ICO/rplus.gif" /> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderText="NO" HeaderStyle-Width="10px" ItemStyle-Width="10px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"> <ItemTemplate> <%# this.gv_patient.Rows.Count + 1%> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="15px" ItemStyle-Width="15px"> <HeaderTemplate> <input type="checkbox" id="checkAll" runat="server" οnclick="checkAll(this)" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="ChkSelected" runat="server" /> <%-- <input type="checkbox" id="ChkSelected" runat="server" οnclick="ChkSelected(this)" />--%> <%-- <input type="hidden" id="hid_assess_id" runat="server" value='<%# Eval("assess_id") %>' />--%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="姓名"> <ItemTemplate> <asp:Label ID="lb_patient_name" runat="server" Text='<%#Eval("patient_name")%>'></asp:Label> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderText="年龄"> <ItemTemplate> <asp:Label ID="lb_age_input" runat="server" Text='<%#Eval("age_input")%>'></asp:Label> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderText="身高"> <ItemTemplate> <asp:Label ID="lb_patient_height" runat="server" Text='<%# Eval("patient_height")%>'></asp:Label> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderText="床位"> <ItemTemplate> <asp:Label ID="lb_patient_sex" runat="server" Text='<%#Eval("bed_id")%>'></asp:Label> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderText="性别" > <ItemTemplate> <%#Eval("patient_sex")%> <tr runat="server" id="tr_matter" style="display: none"> <td> </td> <td colspan="16" style="padding: 0px;" class="tableheadstyleh"> <asp:GridView ID="gv_matter" runat="server" AutoGenerateColumns="false" ShowHeader="true" DataKeyNames="treatment_id" OnRowDataBound="gv_matter_RowDataBound" Width="100%"> <HeaderStyle CssClass="GridHeader-two" HorizontalAlign="Center" /> <SelectedRowStyle CssClass="GridSelItem" /> <Columns> <asp:TemplateField HeaderText="NO" HeaderStyle-Width="20px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-BackColor="#D8F0F5"> <ItemTemplate> <%#Eval("ROW_COUNT")%> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="15px" ItemStyle-BackColor="#D8F0F5"> <HeaderTemplate> <input type="checkbox" id="checkAllChild" runat="server" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="ChkChildSelectedChild" runat="server" /> <%-- <input type="hidden" id="hid_assess_id" runat="server" value='<%# Eval("assess_id") %>' />--%> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="matter_property" HeaderText="属性" ItemStyle-HorizontalAlign="left" ItemStyle-Width="60" ItemStyle-BackColor="#D8F0F5" /> <asp:BoundField DataField="order_time" HeaderText="时间" ItemStyle-HorizontalAlign="left" ItemStyle-Width="100" ItemStyle-BackColor="#D8F0F5" /> <asp:BoundField DataField="matter_name" HeaderText="医嘱内容" ItemStyle-Width="180" ItemStyle-HorizontalAlign="Left" ItemStyle-BackColor="#D8F0F5"/> <asp:BoundField DataField="amount" HeaderText="数量" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="25" ItemStyle-BackColor="#D8F0F5" /> <asp:BoundField DataField="dosage" HeaderText="剂量" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="85" ItemStyle-BackColor="#D8F0F5" /> <asp:BoundField DataField="dosage_unit" HeaderText="单位" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="70" ItemStyle-BackColor="#D8F0F5" /> <asp:BoundField DataField="track" HeaderText="途经" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="60" ItemStyle-BackColor="#D8F0F5" /> <asp:BoundField DataField="methods" HeaderText="方法" ItemStyle-HorizontalAlign="Left" ItemStyle-BackColor="#D8F0F5"/> <asp:BoundField DataField="order_person" HeaderText="医生" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="25" ItemStyle-BackColor="#D8F0F5"> <HeaderStyle CssClass="hidden" /> <ItemStyle CssClass="hidden" /> </asp:BoundField> <asp:BoundField DataField="matter_content" HeaderText="治疗观察" ItemStyle-HorizontalAlign="Left" ItemStyle-BackColor="#D8F0F5" /> </Columns> </asp:GridView> </td> </tr> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </td> </tr> </table> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btn_query" EventName="serverclick" /> </Triggers> </asp:UpdatePanel> </form> </body> </html>
后台:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using Common; using CommonWS; using System.Web.UI.HtmlControls; using System.Text; public partial class IS_bpis_barcodePrint : System.Web.UI.Page { CommonWebService commonWS=new CommonWebService(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { txtTreatmeny_Date.Value = DateTime.Now.ToString("yyyy-MM-dd"); InitDDL(); //bindHeader(); BindPatient(); } } private void InitDDL() { try { using (DataSet ds = commonWS.GetDsSql("rdlc", "获取医嘱途经和用法的基础数据")) { if (ds.Tables[0].Rows.Count > 0) { DataView dv1 = ds.Tables[0].DefaultView; dv1.RowFilter = "class_id='医嘱途径'"; dv1.Sort = "base_data_sort"; AppGlobal.AppControl.BindDropDownList(ddl_track, dv1.ToTable(), "chinese_name", "base_data_id"); ddl_track.Items.Remove(ddl_track.Items.FindByValue("-1")); ddl_track.Items.FindByText("静脉推注").Selected = true; DataView dv2 = ds.Tables[0].DefaultView; dv2.RowFilter = "class_id='医嘱用法'"; dv2.Sort = "base_data_sort"; AppGlobal.AppControl.BindDropDownList(ddl_methods, dv2.ToTable(), "chinese_name", "base_data_id"); } } } catch { } } #region gridview 操作 private void bindHeader() { string strModule = "BPIS"; //模组代号 string strMenu_Name = "treatment_list"; //名称 string strGroup_No = Session[AppGlobal.OPER_GROUP_ID].ToString(); //分组号 string[] arr = { strModule, strMenu_Name, strGroup_No }; try { using(DataSet ds=commonWS.GetDs("公用信息", "清单列表配置查询", arr)) { if (ds.Tables[0].Rows.Count>0) { HtmlGrid(gv_patient, ds.Tables[0], 650, 3); } } } catch { } } private void BindPatient() { string where = "where"; where += " f.track='" + ddl_track.SelectedItem.Text.Trim() + "'"; if (ddl_treatmentClass.SelectedValue != "-1") where += "and a.treatment_class='" + ddl_treatmentClass.SelectedItem.Text.Trim() + "'"; if (txt_patientName.Value != "") where += "and b.patient_name='" + txt_patientName.Value + "' "; if (txtTreatmeny_Date.Value != "") where += "and a.treatment_date='" + txtTreatmeny_Date.Value + "'"; if (ddl_methods.SelectedValue != "-1") where += "and f.methods='" + ddl_methods.SelectedItem.Text + "'"; DataSet ds = commonWS.GetDsWhere("透析治疗", "治疗记录信息查询条码打印",where); AppGlobal.AppControl.GridViewDataBind(gv_patient, ds.Tables[0]); } protected void gv_patient_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { string treatment_id = gv_patient.DataKeys[e.Row.RowIndex].Values["treatment_id"].ToString(); e.Row.Attributes.Add("onmouseover", "if(this!=prevselitem){oldcolor=this.style.backgroundColor;this.style.backgroundColor='#FEFFC5'}");//当鼠标停留时更改背景色 e.Row.Attributes.Add("onmouseout", "if(this!=prevselitem){this.style.backgroundColor=oldcolor}");//当鼠标移开时还原背景色 //e.Row.Attributes.Add("onclick", "rowsel('" + gv_patient.DataKeys[e.Row.RowIndex].Values["assess_id"].ToString() + "','" + e.Row.RowIndex + "');"); //e.Row.Attributes.Add("onclick", "document.getElementById('" + hid_assess_id + "').value='" + assess_id + "'"); //try //{ //二级列表绑定 string where = " and a.matter_class!='体征' order by a.order_time"; DataSet ds = commonWS.GetDsWhere_Param("透析治疗", "登记医嘱查询1", where, new string[] { treatment_id }); if (ds.Tables[0].Rows.Count > 0) { HtmlTableRow htr = e.Row.FindControl("tr_matter") as HtmlTableRow; Image imgbflag = e.Row.FindControl("imgFlag") as Image; CheckBox chk = e.Row.FindControl("ChkSelected") as CheckBox; int count = 0; GridView gv_matter = (GridView)e.Row.FindControl("gv_matter"); AppGlobal.AppControl.GridViewDataBind(gv_matter, ds.Tables[0]); count += ds.Tables[0].Rows.Count; StringBuilder strScript = new StringBuilder(); if (count > 0) { strScript.Append("var obj = document.getElementById('" + htr.ClientID + "');"); strScript.Append("var objimg = document.getElementById('" + imgbflag.ClientID + "');"); strScript.Append("if (objimg == null) { return;}"); strScript.Append("if (obj.style.display == 'none') {"); if (count > 0) { strScript.Append(" obj.style.display = 'block';"); } strScript.Append(" objimg.src = '../Images/ICO/dashminus.gif';"); strScript.Append("}else{"); strScript.Append(" obj.style.display = 'none';"); strScript.Append(" objimg.src = '../Images/ICO/rplus.gif';"); strScript.Append("}"); } else { imgbflag.ImageUrl = "~/Images/ICO/dashminus.gif"; } e.Row.Attributes.Add("onclick", strScript.ToString()); StringBuilder strScriptMatter = new StringBuilder(); strScriptMatter.Append("ChkSelected(" + htr.ClientID + "," + chk.ClientID + ");"); chk.Attributes.Add("onclick", strScriptMatter.ToString()); } //} //catch //{ } } } protected void gv_matter_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFB6C1';this.style.color='buttontext';this.style.cursor='default';"); e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='';this.style.color='';"); } } #endregion protected void btn_query_click(object sender, EventArgs e) { BindPatient(); } public void HtmlGrid(GridView gv, DataTable dt, int width, int startcolumn) { int index = startcolumn; int k = 0; foreach (DataRow dr in dt.Rows) { BoundField bf0 = new BoundField(); bf0.HeaderText = dr["field_name"].ToString().Trim(); bf0.DataField = dr["field_code"].ToString().Trim(); //bf0.HeaderStyle.Width = Convert.ToInt32(dr["format"].ToString().Trim()); bf0.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; bf0.SortExpression = dr["field_code"].ToString().Trim(); // gv.Columns.Add(bf0); gv.Columns.Insert(index,bf0); index++; //长度为0则不显示 if (dr["if_display"].ToString().Trim() == "0") gv.Columns[startcolumn].Visible = false; else k = k + int.Parse(dr["format"].ToString().Trim()); startcolumn++; } gv.Width =width+k; } }