OSITION:absolute;HEIGHT:300px;"></div>
接着我们需要一个TextBox和一个Button，TextBox是服务器控件，Button是一个客户端控件代码如下：
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<INPUT type="button" value="6" style="FONT-FAMILY: marlett" >
我们将Button的字体设置成marlett这样可以使用“6”来显示一个下拉箭头当然你也可以使用一个图片。
接着就是DataGrid了，DataGrid的代码如下：
<div style='DISPLAY:none'>
<asp
ataGrid id="grdContent" runat="server" ShowHeader="False" BackColor="#FFFFFF"></aspataGrid>
</div>
我们使用了一个层来隐藏该DataGrid，这样用户就看不到这个DataGrid了，只有在选择的时候才显示该DataGrid。
此处还可以使用PowerDataGrid来显示一个漂亮的DataGrid对象，同时可以固定表头。（有关PowerDataGrid请到www.foxhis.com/powermjtest/处下载）
固定表头的DataGrid的实现可以参考我的另一篇文章（http://www.csdn.net/Develop/read_article.asp?id=25538）
上面是客户端的表示，下面就是为了实现该效果而做的客户端逻辑，该逻辑由3个js函数实现。代码如下：
<SCRIPT LANGUAGE="JavaScript">
// 显示datagrid提供详细内容
function ShowDetail(txt,grd){
var datagridParent = document.getElementById('divParent');//首先找到datagrid的容器
var txtobj = document.getElementById(txt);//找到需要需要显示选择内容的TextBox
var datagrid = document.getElementById(grd);//找到DataGrid呈现的客户端表格
// 下面就是显示datagrid和隐藏datagrid时候做的显示开关
if(datagridParent.innerHTML == ''){
document.getElementById('divParent').innerHTML = datagrid.outerHTML;
}
else{
HideLayer();
}
// 定位要显示的层的位置
document.getElementById('divParent').style.pixelLeft=txtobj.offsetLeft;
document.getElementById('divParent').style.pixelTop=txtobj.offsetTop txtobj.offsetHeight;
}
// 当选择表格中的行的时候将感兴趣的内容显示到文本框中
// txt显示内容的目标控件,row用户点击的行对象，colID用户要显示的列的内容
// 使用row和ColID可以定位一个单元格
function GetRowData(txt,row,colID){
var txtobj = document.getElementById(txt);
txtobj.value = row.cells[colID].innerText;
HideLayer();//选择完以后隐藏层
}
// 隐藏层
function HideLayer(){
document.getElementById('divParent').innerHTML = '';
}
</SCRIPT>
代码的详细解释请看代码注释。
下面是CS部分的代码，首先我们需要给DataGrid绑定数据代码，我们在Page_Load里面写如下代码：
if(!this.IsPostBack){
SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=sa;");
SqlDataAdapter da = new SqlDataAdapter("select au_lname ' ' au_fname,city from authors",con);
DataSet ds = new DataSet();
da.Fill(ds);
this.grdContent.DataSource = ds.Tables[0];
this.grdContent.DataBind();
}
最后我们需要在该DataGrid绑定数据的时候做点什么，下面是我们做的事情，代码如下：
private void grdContent_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) {
e.Item.Attributes.Add("onmouseover", "this.bgColor='#f1f1f1'");
e.Item.Attributes.Add("onmouseout", "this.bgColor='#ffffff'");
e.Item.Attributes.Add("onclick", "GetRowData('" this.TextBox1.ClientID "',this,1)");
}
我们首先需要给用户一个醒目的鼠标移动的效果所以我们使用将onmouseover和onmouseout指定到tr对象上，之后我们将给tr编写onclick
事件相应所要激发的函数。（tr是DataGrid呈现在客户端以后的行对象）
好了，到此我们的程序就写完了。
对该工程有任何问题请发送邮件到wu_jian830@hotmail.com。如果您需要源代码，您也可以发送邮件。
<
| 欢迎光临 江西广告网 (http://bbs.jxadw.com/) | Powered by Discuz! X3.2 |