ASP.NET-008—JS綁定控件事件

界面上的事件一般可以通過控件自帶的事件屬性添加事件。其實還有一個方式,就是讓JS來給控件綁定事件,這樣一來就可以實現控件的事件動態進行變化,在實現功能的時候會更加方便。
JS綁定控件事件的格式如下:
$(“#”).bind(“事件名”, function () { 事件對應的JS方法(); return false; });
或者
$(控件對象).bind(“事件名”, function () { 事件對應的JS方法(); return false; });
來看代碼,下面是一個全局按鈕控件和一個Gridview裡的行的按鈕綁定的事件的效果。
按鈕

gridview中的按鈕事件

代碼如下
主要有前臺JS代碼來實現,後臺代碼僅僅負責顯示綁定的數據。
前臺,


    


     


      
      
      
     


       
       
         
         <input id="hideID" type="hidden" runat="server" value='' />
       
       
           序號
       
       


       
       
         
       
       
           姓名
       
       


        
       
         
       
       
           年齡
       
       
      
       
       
         
       
       
           性別
       
       


             
       
       
         
       
       
           操作
       
       


     
     
            
            
            
            
            
            
    
    

<script type="text/javascript" src="/Scripts/Ajax.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>


<script language="javascript" type="text/javascript">


    var dgPersonsID = "";


    $(document).ready(function () {
        $("#").bind("click", function () { FunctionFirst(); return false; });
        BindEventGridView();
    });


    function FunctionFirst() {
        alert("按鈕1點擊");
        return false;
    }


    function BindEventGridView() {
        var dgg = document.getElementById(dgPersonsID);
        for (var i = 1; i < dgg.rows.length; ++i) {
            var cells = dgg.rows[i].cells;
            var row = dgg.rows[i];
            if (row.style.display != "none") {
                $(cells[4].firstChild).bind("click", function () { OperateClick(); return false; });
            }
        }


        return false;
    }


    function OperateClick() {
        alert("操作按鈕被點擊!");
        return false;
    }
</script>

後臺

public partial class ChildFrm : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = InitData();


                this.dgPersons.DataSource = dt;


                this.dgPersons.DataBind();
            }
        }


        private DataTable InitData()
        {
            DataTable PersonCollect = new DataTable();


            PersonCollect = new DataTable();


            PersonCollect.Columns.Add("p_id");


            PersonCollect.Columns.Add("p_name");


            PersonCollect.Columns.Add("p_age");


            PersonCollect.Columns.Add("p_sex");


            if (PersonCollect.Rows.Count < 1)
            {
                for (int i = 0; i < 5; i++)
                {
                    DataRow nrow = PersonCollect.NewRow();


                    nrow["p_id"] = System.Guid.NewGuid().ToString();


                    nrow["p_name"] = "西北白楊樹";


                    nrow["p_age"] = 27;


                    nrow["p_sex"] = "男";


                    PersonCollect.Rows.Add(nrow);
                }
            }


            return PersonCollect;
        }
    }

代碼下載

發佈留言