如何?可以帶詳細表格的DropDownList

來源:互聯網
上載者:User
本文詳細介紹了如何?在點擊DropDownList的時候彈出DataGrid,然後從DataGrid裡面選擇相應的項。
很早就發現在網上有很酷的下拉選擇框,今天我在這裡也寫一個,該方法旨在說明問題的一個解決方案,該方法可以擴充為自訂控制項,由於時間有限所以在這裡我只提供一個該方法的頁面實現。當然你可以發揮你的才能作出更漂亮的。
問題描述:我們在使用DropDownList的時候經常會碰到這樣的問題(至少我碰到了),在一個很小的地區顯示一個比較複雜的內容,希望讓選擇的人對要選擇的東西有比較清晰的認識,我們需要在點擊下拉框的時候可以顯示給使用者非常詳細的資訊,可是由於布局的限制或者由於下拉框本身的限制,我們很難做到。
解決方案:我們希望有一個層來顯示一個豐富的內容,既然是豐富的內容,我們首先想到的應該是DataGrid控制項,那麼好,我們就用DataGrid和TextBox以及Button來實現該功能。
需要瞭解的知識:一點點js的東西,一點點ASP.NET的東西,還有一點點耐心
下面是代碼:
我們需要一個層用來放我們的DataGrid,我們叫他divParent。代碼如下:
<div id="divParent" style="OVERFLOW:auto;POSITION: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" onclick="ShowDetail('TextBox1','grdContent')">
我們將Button的字型設定成marlett這樣可以使用“6”來顯示一個下拉式箭頭當然你也可以使用一個圖片。
接著就是DataGrid了,DataGrid的代碼如下:
<div style='DISPLAY:none'>
<asp:DataGrid id="grdContent" runat="server" ShowHeader="False" BackColor="#FFFFFF"></asp:DataGrid>
</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。如果您需要原始碼,您也可以發送郵件。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。