效果:例如一個設備管理系統的某處要填入設備編號,但設備編號通常比較難記,而可能記得的只是哪個部門哪個位置的設備。因此,我們想在文字方塊旁邊加一個按鈕,點擊之後彈出一個子頁面,這裡有設備編號、設備的各項詳情對照的一個表格,我只要根據位置找到該設備,雙擊此記錄,設備編號便填上去了。
實現過程:
父頁面開啟新視窗的javascript函數為:
function openpage(htmlurl)
{
var newwin=window.open(htmlurl,"newWin","toolbar=no,location=no,directories=no,status=no,scrollbars=yes,menubar=no,
resizable=yes,top=100,left=200,width=650,height=300");
newwin.focus();
return false;
}
</script>在按鈕中呼叫:
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return openpage('child.aspx');"/>
子頁面綁定gridview的資料來源,並在它的RowDataBound事件裡寫程式碼如下:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
string s = "window.opener.document.getElementById('textbox1').value='" + e.Row.Cells[1].Text + "'; window.close();";
if (e.Row.RowType != DataControlRowType.Header)
{
e.Row.Attributes.Add("ondblclick", s);//雙擊選擇
//當滑鼠移到的時候設定該行顏色為"", 並儲存原始的背景顏色
e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor='hand';");
//當滑鼠移走時還原該行的背景色
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor");
}
}說明:透過window.open開啟新頁面,兩個頁面之前有了一種父子關係。子頁透過opener可以存取父頁(控制項及寫在父頁的js函數),父頁同樣透過sub可以存取子頁。如在父頁有個js函式sayhello(),在子頁中只需要opener.sayhello()就可以呼叫了。
只使用很少的Javascript程式碼與asp.net結合,便完成了一個很好用的效果。