jquery显示详细信息

<!--为车辆使用记录查询添加的弹出对话框开始-->
    <link type="text/css" href="../jquery/themes/base/ui.all.css" rel="stylesheet" />

    <script type="text/javascript" src="../jquery/jquery-1.3.2.js"></script>

    <script type="text/javascript" src="../jquery/ui/ui.core.js"></script>

    <script type="text/javascript" src="../jquery/ui/ui.draggable.js"></script>

    <script type="text/javascript" src="../jquery/ui/ui.resizable.js"></script>

    <script type="text/javascript" src="../jquery/ui/ui.dialog.js"></script>

    <script type="text/javascript" src="../jquery/external/bgiframe/jquery.bgiframe.js"></script>

    <link type="text/css" href="../jquery/demos.css" rel="stylesheet" />

    <script type="text/javascript">
        $(function() {
            $("#dialog").dialog({
                bgiframe: true,
                //autoOpen: false,
                modal: true,
                width: 630,
                height:250,
                buttons: {
                    确定: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() { $("#v1").val('0'); }
            });
            if ($("#v1").val() == '0') $("#dialog").dialog('close');
        });

        $('#btnShowDetails').click(function() {
            $('#dialog').dialog('open');
        });
 </script>

    <!--为车辆使用记录查询添加的弹出对话框结束-->

...

<div id="clcx" class="hide" runat="server">
        <fieldset>
            <legend>车辆使用记录查询</legend>
            <table>
                <tr>
                    <td>
                        出车日期自
                    </td>
                    <td>
                        <input id="tbQS" type="text" runat="server" style="width: 111px; height: 20px;" />
                    </td>
                    <td>
                        至
                    </td>
                    <td>
                        <input id="tbJZ" type="text" runat="server" style="width: 111px; height: 20px;" />
                    </td>
                    <td>
                        车牌号
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlCPH" runat="server" AutoPostBack="True" Height="25px" Width="90px">
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:Button ID="btnQuery" runat="server" Text="查询" OnClick="btnQuery_Click" />
                    </td>
                </tr>
            </table>
        </fieldset>
        <asp:DataGrid ID="dgYCCX" runat="server" Width="100%" ForeColor="Black" BackColor="White"
            BorderColor="#7FB1E2" CellPadding="4" BorderWidth="1px" BorderStyle="None" PagerStyle-Mode="NumericPages"
            DataKeyField="ID" AutoGenerateColumns="false" Font-Size="Small" AllowPaging="True"
            OnPageIndexChanged="dgYCCX_PageIndexChanged" OnEditCommand="dgYCCX_EditCommand">
            <SelectedItemStyle ForeColor="#404040"></SelectedItemStyle>
            <AlternatingItemStyle Height="20px" ForeColor="Black" BorderColor="#D7E8F8" BackColor="White">
            </AlternatingItemStyle>
            <ItemStyle HorizontalAlign="Center" Height="20px" ForeColor="#404040"></ItemStyle>
            <HeaderStyle Font-Bold="True" HorizontalAlign="Center" Height="20px" ForeColor="#4355BE"
                BorderColor="White" BackColor="#D8EAF5"></HeaderStyle>
            <Columns>
                <asp:TemplateColumn HeaderText="编号">
                    <ItemTemplate>
                        <%#Container.DataSetIndex+1 %>
                    </ItemTemplate>
                    <ItemStyle Width="5%" />
                </asp:TemplateColumn>
                <asp:BoundColumn DataField="派车车牌号" HeaderText="车牌号">
                    <ItemStyle Width="10%" />
                </asp:BoundColumn>
                <asp:BoundColumn DataField="用车部门" HeaderText="用车部门">
                    <ItemStyle Width="10%" />
                </asp:BoundColumn>
                <asp:BoundColumn DataField="用车人" HeaderText="用车人">
                    <ItemStyle Width="10%" />
                </asp:BoundColumn>
                <asp:BoundColumn DataField="用车时间" HeaderText="用车时间" DataFormatString="{0:yyyy-MM-dd}">
                    <ItemStyle Width="15%" />
                </asp:BoundColumn>
                <asp:BoundColumn DataField="估计用时" HeaderText="估计用时">
                    <ItemStyle Width="10%" />
                </asp:BoundColumn>
                <asp:BoundColumn DataField="还车时间" HeaderText="还车时间" DataFormatString="{0:yyyy-MM-dd}">
                    <ItemStyle Width="15%" />
                </asp:BoundColumn>
                <asp:TemplateColumn HeaderText="操作">
                    <ItemTemplate>
                        <asp:Button ID="btnShowDetails" runat="server" Text="查看详细" CommandName="Edit" CausesValidation="false">
                        </asp:Button>
                    </ItemTemplate>
                    <ItemStyle Width="10%" />
                </asp:TemplateColumn>
            </Columns>
            <PagerStyle HorizontalAlign="Right" ForeColor="#4A3C8C" BackColor="#E7E7FF" Mode="NumericPages">
            </PagerStyle>
        </asp:DataGrid>
        <div id="dialog" runat="server" title="车辆使用详细情况">
            <asp:FormView ID="fvShowDetails" runat="server" CellPadding="0" Height="150px"
                Width="600px">
                <ItemTemplate>
                    <table width="100%" class="tablesingle">
                        <tr>
                            <td class="tablesingletdlable" style="width:10%">
                                用车人
                            </td>
                            <td class="tablesingletdinput" style="width:20%">
                                <asp:Label ID="lblYCR" runat="server" Text='<%#Eval("用车人") %>'></asp:Label>
                            </td>
                            <td class="tablesingletdlable" style="width:13%">
                                用车部门
                            </td>
                            <td class="tablesingletdinput" style="width:20%">
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("用车部门") %>'></asp:Label>
                            </td>
                            <td class="tablesingletdlable" style="width:10%">
                                用车时间
                            </td>
                            <td class="tablesingletdinput" style="width:27%">
                                <asp:Label ID="Label2" runat="server" Text='<%#Eval("用车时间") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td class="tablesingletdlable">
                                目的地
                            </td>
                            <td class="tablesingletdinput">
                                <asp:Label ID="Label3" runat="server" Text='<%#Eval("目的地") %>'></asp:Label>
                            </td>
                            <td class="tablesingletdlable">
                                用车原因
                            </td>
                            <td class="tablesingletdinput">
                                <asp:Label ID="Label4" runat="server" Text='<%#Eval("用车理由") %>'></asp:Label>
                            </td>
                            <td class="tablesingletdlable">
                                随车人员
                            </td>
                            <td class="tablesingletdinput">
                                <asp:Label ID="Label5" runat="server" Text='<%#Eval("随车人员") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td class="tablesingletdlable">
                                是否长途
                            </td>
                            <td class="tablesingletdinput">
                                <asp:Label ID="Label6" runat="server" Text='<%#this.IsLongTourist(Eval("是否长途").ToString()) %>'></asp:Label>
                            </td>
                            <td class="tablesingletdlable">
                                派车车牌号
                            </td>
                            <td class="tablesingletdinput">
                                <asp:Label ID="Label7" runat="server" Text='<%#Eval("派车车牌号") %>'></asp:Label>
                            </td>
                            <td class="tablesingletdlable">
                                还车时间
                            </td>
                            <td class="tablesingletdinput">
                                <asp:Label ID="Label8" runat="server" Text='<%#Eval("还车时间") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td class="tablesingletdlable">
                                备注信息
                            </td>
                            <td colspan="5" class="tablesingletdinput">
                                <asp:Label ID="Label9" runat="server" Text='<%#Eval("备注信息") %>'></asp:Label>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:FormView>
        </div>
        <input runat="server" id="vvv" style="display:none; " value="0" />
    </div>

...

#region 用车查询----第六个Tab

    //所有车牌号绑定
    public void BindAllCPH()
    {
        DataSet ds = null;
        DM dm = new DM();
        string strSQL = "select distinct(车牌号) from yc_车辆档案表";
        ds = dm.getsql(strSQL);
        //进行下拉列表框的数据绑定
        this.ddlCPH.DataTextField = "车牌号";
        this.ddlCPH.DataValueField = "车牌号";
        this.ddlCPH.DataSource = ds;
        this.ddlCPH.DataBind();
        this.ddlCPH.Items.Insert(0, "全部车辆");
    }

    //绑定用车查询的DataGrid事件
    public void BindDataGridYCCX()
    {
        DM dm = new DM();
        string strSQL = "select * from yc_用车申请审核表 where 科室审核=2 and 领导审核=2 order by 用车时间 desc ";
        DataSet ds = dm.getsql(strSQL);
        this.dgYCCX.DataSource = ds;
        this.dgYCCX.DataBind();
    }

    //查看详细信息
    protected void dgYCCX_EditCommand(object source, DataGridCommandEventArgs e)
    {
        int index = e.Item.ItemIndex;
        int braID = Convert.ToInt16(dgYCCX.DataKeys[index].ToString(), 10);
        DM dm = new DM();
        string strSQL = "select * from yc_用车申请审核表 where ID=" + braID.ToString();
        DataSet ds = dm.getsql(strSQL);
        this.fvShowDetails.DataSource = ds;
        this.fvShowDetails.DataBind();
        //控制tab显示
        this.clzt1.Attributes.Add("class", "off");
        this.clzt.Attributes.Add("class", "hide");
        this.ycsq1.Attributes.Add("class", "off");
        this.ycsq.Attributes.Add("class", "hide");
        this.sqcx1.Attributes.Add("class", "off");
        this.sqcx.Attributes.Add("class", "hide");
        this.jydj1.Attributes.Add("class", "off");
        this.jydj.Attributes.Add("class", "hide");
        this.hcgl1.Attributes.Add("class", "off");
        this.hcgl.Attributes.Add("class", "hide");
        this.wxdj1.Attributes.Add("class", "off");
        this.wxdj.Attributes.Add("class", "hide");
        this.bxjf1.Attributes.Add("class", "off");
        this.bxjf.Attributes.Add("class", "hide");
        this.clxx1.Attributes.Add("class", "off");
        this.clxx.Attributes.Add("class", "hide");
        this.clcx1.Attributes.Add("class", "on");
        this.clcx.Attributes.Add("class", "show");
        //this.dxtx1.Attributes.Add("class", "off");
        //this.dxtx.Attributes.Add("class", "hide");
        this.vvv.Value = "1";
    }

    //是否长途
    public string IsLongTourist(string flag)
    {
        string ct = string.Empty;
        if (flag.Trim().ToLower()=="true")
        {
            ct = "是";
        }
        else
        {
            ct = "否";
        }
        return ct;
    }

    //分页事件代码
    protected void dgYCCX_PageIndexChanged(object source, DataGridPageChangedEventArgs e)
    {
        //分页代码
        this.dgYCCX.CurrentPageIndex = e.NewPageIndex;
        this.dgYCCX.DataBind();
        BindDataGridYCCX();
        //控制tab显示
        this.clzt1.Attributes.Add("class", "off");
        this.clzt.Attributes.Add("class", "hide");
        this.ycsq1.Attributes.Add("class", "off");
        this.ycsq.Attributes.Add("class", "hide");
        this.sqcx1.Attributes.Add("class", "off");
        this.sqcx.Attributes.Add("class", "hide");
        this.jydj1.Attributes.Add("class", "off");
        this.jydj.Attributes.Add("class", "hide");
        this.hcgl1.Attributes.Add("class", "off");
        this.hcgl.Attributes.Add("class", "hide");
        this.wxdj1.Attributes.Add("class", "off");
        this.wxdj.Attributes.Add("class", "hide");
        this.bxjf1.Attributes.Add("class", "off");
        this.bxjf.Attributes.Add("class", "hide");
        this.clxx1.Attributes.Add("class", "off");
        this.clxx.Attributes.Add("class", "hide");
        this.clcx1.Attributes.Add("class", "on");
        this.clcx.Attributes.Add("class", "show");
        //this.dxtx1.Attributes.Add("class", "off");
        //this.dxtx.Attributes.Add("class", "hide");
       
    }

    public DataSet getResultByCondition(DateTime dt1, DateTime dt2, string cph)
    {
        DataSet ds = null;
        string strSQL = string.Empty;
        if (cph == "全部车辆")
        {
            strSQL = "select * from yc_用车申请审核表 where 科室审核=2 and 领导审核=2 and 用车时间 between '" + dt1 + "' and '" + dt2 + "'order by 用车时间 desc ";
        }
        else
        {
            strSQL = "select * from yc_用车申请审核表 where 科室审核=2 and 领导审核=2 and 用车时间 between '" + dt1 + "' and '" + dt2 + "' and 派车车牌号='" + cph + "' order by 用车时间 desc ";
        }
        DM dm = new DM();
        ds = dm.getsql(strSQL);
        return ds;
    }

    //按照条件进行查询
    protected void btnQuery_Click(object sender, EventArgs e)
    {
        DateTime dt1 = DateTime.ParseExact(tbQS.Value, "yyyy-MM-dd", System.Globalization.CultureInfo.CurrentCulture);
        DateTime dt2 = DateTime.ParseExact(tbJZ.Value, "yyyy-MM-dd", System.Globalization.CultureInfo.CurrentCulture);
        //对输入的时间先后做下简单判断
        if (dt1 > dt2)
        {
            ClientScript.RegisterClientScriptBlock(GetType(), "", "<script>alert(/'起始时间不能比结束时间滞后.../'); </script>");
            return;
        }
        string cph = this.ddlCPH.SelectedItem.Text.Trim();
        DataSet ds = getResultByCondition(dt1, dt2, cph);
        this.dgYCCX.DataSource = ds;
        this.dgYCCX.DataBind();
        //控制tab显示
        this.clzt1.Attributes.Add("class", "off");
        this.clzt.Attributes.Add("class", "hide");
        this.ycsq1.Attributes.Add("class", "off");
        this.ycsq.Attributes.Add("class", "hide");
        this.sqcx1.Attributes.Add("class", "off");
        this.sqcx.Attributes.Add("class", "hide");
        this.jydj1.Attributes.Add("class", "off");
        this.jydj.Attributes.Add("class", "hide");
        this.hcgl1.Attributes.Add("class", "off");
        this.hcgl.Attributes.Add("class", "hide");
        this.wxdj1.Attributes.Add("class", "off");
        this.wxdj.Attributes.Add("class", "hide");
        this.bxjf1.Attributes.Add("class", "off");
        this.bxjf.Attributes.Add("class", "hide");
        this.clxx1.Attributes.Add("class", "off");
        this.clxx.Attributes.Add("class", "hide");
        this.clcx1.Attributes.Add("class", "on");
        this.clcx.Attributes.Add("class", "show");
        //this.dxtx1.Attributes.Add("class", "off");
        //this.dxtx.Attributes.Add("class", "hide");
    }

    #endregion

...

显示效果如下图：