实现在GridView中的TextTextBox列中的Textbox每添加一值,在该TextBox失去焦点时,
GridView外面的TextBox自动添加该GridView中Textbox列中的TextBox添加的值,并过滤输入不是数字的情况
效果如图:
已知【薪酬总额】的文本筐解析后<input type="text" name="txtAllValue" id="txtAllValue" />
GridView中的TextBox模板列的id="txtones"( 非解析的id ),GridView解析后成的table id="tbGridViews";
在GridView的RowDataBind事件中:加如下代码
private void GridView_RowDataBoind( object sender , EventArgs e )
{
if ( e.Row.RowType==DataControlRowType.DataRow)
{
TextBox tboxone = e.Row.FindControl("txtones") as TextBox ;
if ( tboxone != null )
{
tboxone.Attribute.Add( " onfocus " , " GetAllValues(); ") ; // 模板中的TextBox添加获得焦点JS事件
}
}
}
前台JS代码实现如下
< script type="text/javascript">
Function GetAllValues()
{
var tbGridView = document.getElementById( " tbGridViews" ) ; // 得到解析GridVeiw的table
if( tbGridView )
{
var oInput =tbGridView.getElementsByTagName( " input " ) ; // 得到解析GridView的table中的所有input元素
var Lastvalue = 0;
for ( int i=0 ; i < oInput.Length ; i++) // 遍历解析GridView的table中包含所有input元素的变量
{
if( oInput[i].type == "text ") // 判断GridView解析后的table中的input元素是否是text 文本筐
{
var oValue = oInput[i].value ; // 得到文本筐的值
if ( oValue =="" || isNaN ( oValue )) // 当文本筐的值为空或非数字时,默认该文本筐的值为0
oValue = 0;
else
oValue=parseFloat( oValue ) ;
LastValue + = oValue ;
}
}
var allText = document.getElementById( " txtAllValue ") ; // 得到薪酬总额文本筐
if ( allText )
{
allText.value = LastValue ; // 为薪酬总额文本筐博值
}
}
}
为了合用户在GridView的TextBox模板中的TextBox输入的值为数字且大于0。首先编辑模板,在该模板中添加一个CompareValidator验证控件,
设置其Text=“*”,ToolTip="请输入有效的数字" ,Operator ="GreaterThan" , ValueToCompare="0",Type="Double" ;