返回首页
当前位置: 主页 > 网络编程 > .Net实例教程 >

GridView与javascript、checkbox使用教程

时间:2011-04-12 20:24来源:知行网www.zhixing123.cn 编辑:麦田守望者

<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input name="chk" type="checkbox" value="<%#Eval("ID")%>" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Title" HeaderText="Title" />
</Columns>
</asp:GridView>
<p>
已选择的项:<input type="text" size="60" id="checked" /></p>
<p>
要选择的项:<input type="text" size="60" id="checking" /><input type="button" value="选择"
onclick="CheckT()" />
</p>

<script type="text/javascript">

//先获取到所有的checkbox再说
var chkList=document.getElementsByName("chk");

//页面完全载入后,在window对象上触发的onload事件,可以在body上分配
window.onload=function()
{
//为所有checkbox添加onclick事件处理,以自动更新“已选择的项”
for(var i=0;i<chkList.length;i++)
{
chkList[i].onclick=chkClick;
}
};
//checkbox的onclick事件,用于更新“已选择的项"
function chkClick()
{
var checkedList="";
//获取所有被选中的项
for(var i=0;i<chkList.length;i++)
{
if(chkList[i].checked)
checkedList+=chkList[i].value+",";
}
//把选中项的列表显示到“已选择的项”中,substring在这里是为了去除最后一个逗号
document.getElementById("checked").value=checkedList.substring(0,checkedList.length-1);
};
//根据在“要选择的项”中的输入选中相应的项
function CheckT()
{
var checkingList=document.getElementById("checking").value;
//没有输入就直接返回
if(checkingList.length==0)
{return;}
//获取所有想要选择项的ID
var checkingIds=checkingList.split(",");
for(var j=0;j<chkList.length;j++)
{
for(var i=0;i<checkingIds.length;i++)
{
if(checkingIds[i]==chkList[j].value)
{
chkList[j].checked=true;
break;
}
else
{
chkList[j].checked=false;
}
}
}
};
</script>

a.aspx.cs

//生成DataTable并添加相应的列
DataTable dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("Title");
//测试数据填充
dt.Rows.Add(1, "1111");
dt.Rows.Add(2, "2222");
dt.Rows.Add(3, "3333");
dt.Rows.Add(4, "4444");
//将DataTable绑定到GridView
GridView1.DataSource = dt;
GridView1.DataBind();

 

------分隔线----------------------------
标签(Tag):ASP.NET asp.Net实例教程 asp.net源代码 asp.net基础教程
------分隔线----------------------------
推荐内容
猜你感兴趣