DataGrid + JS 的應用示例

預期效果：
1 DataGrid上綁定樣板列，CheckBox和TextBox
2 通過DataGrid内部的CheckBox的點選，來控制内部文本框的是否可輸入
3 TextBox增加onblur事件，檢查所輸入的是否是8位數字
4 DataGrid外部的Button按鈕，通過對DropDownList序號值和TextBox值的讀取，
  來設置DataGrid内部CheckBox的勾選及TextBox值的設定
5 判斷如果DataGrid的CheckBox有勾選，則其後的TextBox不能全部為空

操作步驟：
DataGrid的綁定：
    private void grdTidMer_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
      {
 if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
    {
  ///更改 CheckBox chkChange BindTidCheck
   ((CheckBox).Item.FindControl"chkChange")).Attributes.Add"onclick","BindTidCheckthis,'"+e.Item.ItemIndex+"')");
  ///一般信用卡
   ((TextBox)e.Item.FindControl("txtTermTypeA")).Text = DataBinder.Eval(e.Item.DataItem,"TermTypeA").ToString().Trim();
  ((TextBox)e.Item.FindControl("txtTermTypeA")).Attributes.Add("onblur","BindTidText(this)");
                ((TextBox)e.Item.FindControl("txtTermTypeA")).Enabled = false;
                ///紅利交易
   ((TextBox)e.Item.FindControl("txtTermTypeB")).Text = DataBinder.Eval(e.Item.DataItem,"TermTypeB").ToString().Trim();
  ((TextBox)e.Item.FindControl("txtTermTypeB")).Attributes.Add("onblur","BindTidText(this)");
                ((TextBox)e.Item.FindControl("txtTermTypeB")).Enabled = false;
  ///分期交易
   ((TextBox)e.Item.FindControl("txtTermTypeC")).Text = DataBinder.Eval(e.Item.DataItem,"TermTypeC").ToString().Trim();
  ((TextBox)e.Item.FindControl("txtTermTypeC")).Attributes.Add("onblur","BindTidText(this)");
         ((TextBox)e.Item.FindControl("txtTermTypeC")).Enabled = false;
    }
      }

按鈕的JS綁定：
<INPUT id="btnSet" onclick="SetTid()" type="button" value="設置">

主要JS的編寫：
//端末機 Grid 更改 CheckBox 的勾選
//id="_ctl0_grdTidMer__ctl2_chkChange"
//id="_ctl0_grdTidMer__ctl2_txtTermTypeA"
//id="_ctl0_grdTidMer__ctl2_txtTermTypeC"
//id="_ctl0_grdTidMer__ctl2_txtTermTypeB"
function BindTidCheck(objCheckBox,objIndex)
{
   if(objCheckBox.checked == true)
   {
       var TypeIndex = parseInt(objIndex) + 2;
      
       var TypeA = "_ctl0_grdTidMer__ctl"+TypeIndex+"_txtTermTypeA";
       var TextTypeA = document.getElementById(TypeA);
      
       var TypeC = "_ctl0_grdTidMer__ctl"+TypeIndex+"_txtTermTypeC";
       var TextTypeC = document.getElementById(TypeC);    
      
       var TypeB = "_ctl0_grdTidMer__ctl"+TypeIndex+"_txtTermTypeB";
       var TextTypeB = document.getElementById(TypeB);

       TextTypeA.disabled = false;
       TextTypeB.disabled = false;
       TextTypeC.disabled = false;

   }
   if(objCheckBox.checked == false)
   {
       var TypeIndex = parseInt(objIndex) + 2;
      
       var TypeA = "_ctl0_grdTidMer__ctl"+TypeIndex+"_txtTermTypeA";
       var TextTypeA = document.getElementById(TypeA);

       var TypeC = "_ctl0_grdTidMer__ctl"+TypeIndex+"_txtTermTypeC";
       var TextTypeC = document.getElementById(TypeC);
      
       var TypeB = "_ctl0_grdTidMer__ctl"+TypeIndex+"_txtTermTypeB";
       var TextTypeB = document.getElementById(TypeB);

       TextTypeA.disabled = true;
       TextTypeC.disabled = true;
       TextTypeB.disabled = true;

   }
   
}

//端末機 Grid 文本框的 8 位長控綁定
function BindTidText(objText)
{
   if(!objText.value=="")
   {
      if(objText.value.length!=8)
      {
         alert("請輸入8位有效端末機代號！");
         objText.focus();
         objText.select();
         return false;
      }
      //
       for(var i=0;i<objText.value.length;i++)
  {
   var strTemp=objText.value.charAt(i);
   if(strTemp<"0" || strTemp>"9")
   {
    alert("請輸入8位有效端末機代號！");
    objText.select();
    objText.focus();
    return false;
   }   
  }
  
    }
}

//一次設定多筆端末機代號
//id="_ctl0_drpSeqNoS"
//id="_ctl0_drpSeqNoE"
//id="_ctl0_txtTypeASet"
//id="_ctl0_txtTypeCSet"
//id="_ctl0_txtTypeBSet"
function SetTid()
{
     var objS = document.getElementById("_ctl0_drpSeqNoS");
     var objIndexS= objS.options[objS.selectedIndex].value;

     var objE = document.getElementById("_ctl0_drpSeqNoE");
     var objIndexE=objE.options[objE.selectedIndex].value;
    
     var TextA=document.all._ctl0_txtTypeASet.value;

     var TextC=document.all._ctl0_txtTypeCSet.value;

     var TextB=document.all._ctl0_txtTypeBSet.value;

     if(trimSpace(TextA)==""&&trimSpace(TextC)==""&&trimSpace(TextB)=="")
     {
        alert("請輸入至少一項端末機代號！");
        document.all._ctl0_txtTypeASet.focus();
        document.all._ctl0_txtTypeASet.select();
        return false;
     }
     //檢查 一般信用卡 的輸入是否夠8位 及是否純數字
    if(trimSpace(TextA)!="")
       {
   if(trimSpace(TextA).length!=8)
   {
    alert("請輸入8位有效一般信用卡 代號！");
    document.all._ctl0_txtTypeASet.focus();
    document.all._ctl0_txtTypeASet.select();
    return false;
   }
   //
   for(var i=0;i<trimSpace(TextA).length;i++)
    {
     var strTemp=trimSpace(TextA).charAt(i);
     if(strTemp<"0" || strTemp>"9")
     {
      alert("請輸入8位有效一般信用卡 代號！");
      document.all._ctl0_txtTypeASet.focus();
      document.all._ctl0_txtTypeASet.select();
      return false;
     }   
    }
         }
       //檢查 分期交易 的輸入是否夠8位 及是否純數字
        if(trimSpace(TextC)!="")
       {
   if(trimSpace(TextC).length!=8)
   {
    alert("請輸入8位有效分期交易 代號！");
    document.all._ctl0_txtTypeCSet.focus();
    document.all._ctl0_txtTypeCSet.select();
    return false;
   }
   //
   for(var i=0;i<trimSpace(TextC).length;i++)
    {
     var strTemp=trimSpace(TextC).charAt(i);
     if(strTemp<"0" || strTemp>"9")
     {
      alert("請輸入8位有效分期交易 代號！");
      document.all._ctl0_txtTypeCSet.focus();
      document.all._ctl0_txtTypeCSet.select();
      return false;
     }   
    }
         }
         //檢查 紅利交易 的輸入是否夠8位 及是否純數字
        if(trimSpace(TextB)!="")
          {
   if(trimSpace(TextB).length!=8)
   {
    alert("請輸入8位有效紅利交易 代號！");
    document.all._ctl0_txtTypeBSet.focus();
    document.all._ctl0_txtTypeBSet.select();
    return false;
   }
   //
   for(var i=0;i<trimSpace(TextB).length;i++)
    {
     var strTemp=trimSpace(TextB).charAt(i);
     if(strTemp<"0" || strTemp>"9")
     {
      alert("請輸入8位有效紅利交易 代號！");
      document.all._ctl0_txtTypeBSet.focus();
      document.all._ctl0_txtTypeBSet.select();
      return false;
     }   
    }
         }
        
    //
     var IndexS = parseInt(objIndexS) + 1;
     var IndexE = parseInt(objIndexE) + 1;
   
     if(IndexS > IndexE)
     {
         alert(項次序號迄值不能小於起值！);
         return false;
     }

     for(var i=IndexS;i<=IndexE;i++)
     {
        var Change = "_ctl0_grdTidMer__ctl"+i+"_chkChange";
        var ChkChange = document.getElementById(Change);
        ChkChange.checked = true;
       

  var TypeA = "_ctl0_grdTidMer__ctl"+i+"_txtTermTypeA";
  var TextTypeA = document.getElementById(TypeA); 
  TextTypeA.disabled = false; 
  TextTypeA.value = TextA;
    
  var TypeC = "_ctl0_grdTidMer__ctl"+i+"_txtTermTypeC";
  var TextTypeC = document.getElementById(TypeC); 
  TextTypeC.disabled = false;   
     TextTypeC.value = TextC;
    
  var TypeB = "_ctl0_grdTidMer__ctl"+i+"_txtTermTypeB";
  var TextTypeB = document.getElementById(TypeB);
  TextTypeB.disabled = false; 
  TextTypeB.value = TextB;
     }   
     return false;
}

//判斷 是否有端末機代號設定
   //id="_ctl0_grdTidMer__ctl2_chkChange"
    var ChkFunc=document.getElementById("_ctl0_grdTidMer__ctl2_chkChange");
    if(ChkFunc!=null)
 {
  var i = 0;
        for(var j=2;;j++)
        {
          var objChkID = "_ctl0_grdTidMer__ctl"+j+"_chkChange";
          var objChk = document.getElementById(objChkID);
          if(objChk == null)
          {
              break;
          }
          if(objChk.checked)
          {
              i++;
              //判斷是否有端末機代號
              //id="_ctl0_grdTidMer__ctl2_txtTermTypeA"
              //id="_ctl0_grdTidMer__ctl2_txtTermTypeC"
              //id="_ctl0_grdTidMer__ctl2_txtTermTypeB"
              var TypeA = "_ctl0_grdTidMer__ctl"+j+"_txtTermTypeA";
        var TextTypeA = document.getElementById(TypeA); 
        txtA = trimSpace(TextTypeA.value) ;

     var TypeC = "_ctl0_grdTidMer__ctl"+j+"_txtTermTypeC";
     var TextTypeC = document.getElementById(TypeC); 
              txtC = trimSpace(TextTypeC.value) ;

     var TypeB = "_ctl0_grdTidMer__ctl"+j+"_txtTermTypeB";
     var TextTypeB = document.getElementById(TypeB);
     txtB = trimSpace(TextTypeB.value) ;

    
    if(txtA==""&&txtC==""&&txtB=="")
    {
        alert("請填寫至少一項端末機代號資料的更改！");
        TextTypeA.focus();
        return false;
    }

          }       
        }
        if(i<1)
        {
           alert("請勾選至少一項端末機代號資料的更改！");
           return false;
        }
       
 }//END TID

JS文件的引用：
this.Page.RegisterStartupScript("JS","<script type='text/javascript' src='../JS/JS.js'></script>");