效果:比如一個設備管理系統的某處要填入設備編號,但設備編號通常比較難記,而可能記住的只是哪個部門哪個位置的設備。因此,我們想在文本框旁邊加一個按鈕,點擊之後彈出一個子頁面,這裡有設備編號、設備的各項詳情對照的一個表格,我只要根據位置找到該設備,雙擊此記錄,設備編號便填上去了。
實現過程:
父頁面
打開新窗口的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結合,便完成了一種很好用的效果。