Biegral
Blog
首页
C#
Java
SQL
Python
JavaScript
Web
Other
DataGrid实现自增列、单选、多选
Biegral
2006/9/5 13:25:00
1251
我们为这个DataGrid实现了添加、删除、修改、分页、动态修改内容等功能,今天再来分析一下如何为之添加自增列、单选、多选的功能。
首先看一下需要在上次的基础上增加的代码:
(
1
)实现自增列
只需要在前台添加一个模板列,绑定ItemIndex
+
1就可以了
<
asp:TemplateColumn HeaderText
=
"
选择
"
>
<
ItemTemplate
>
<%
# Container.ItemIndex
+
1
%>
</
ItemTemplate
>
</
asp:TemplateColumn
>
(
2
)实现单选
在上面的基础上,为这个列加一个radio
<
asp:TemplateColumn HeaderText
=
"
选择
"
>
<
ItemTemplate
>
<%
# Container.ItemIndex
+
1
%>
<
input type
=
radio name
=
"
rad
"
value
=
'
<%# Container.ItemIndex+1%>
'
>
</
ItemTemplate
>
</
asp:TemplateColumn
>
radio的值也就是自增的1
-
PageSize
再创建一个按钮(名字叫单选),为之添加如下代码
this
.Label1.Text
=
"
选择的行号:
"
+
Request.Form[
"
rad
"
].ToString();
这样简单的几步虽然实现了显示选择的行号,但是在按下按钮以后,radio的选择是不能被保留的,原因是这个radio不是runat
=
server的,我们需要再为这个页面放置一个隐藏域(需runat
=
server)用来在点击按钮的时候保存选择的radio,在前台添加
<
input type
=
"
hidden
"
id
=
"
rd
"
runat
=
"
server
"
name
=
"
rd
"
>
(注意,不要把这个添加到DataGrid中),然后再在刚才那个按钮中添加rd.Value
=
Request.Form[
"
rad
"
].ToString();(如果vs.net没有为这个HtmlInputHidden申明的话你自己加上
protected
System.Web.UI.HtmlControls.HtmlInputHidden rd;)。到现在为止还没有完成,虽然HtmlInputHidden里面已经保存了选择的行号,但是还需要在页面Load的时候让这个radio为选择状态,修改Page_Load()为
private
void
Page_Load(
object
sender, System.EventArgs e)
...
{
string
js
=
""
;
js
+=
"
<script>
"
;
js
+=
"
function ld(){
"
;
js
+=
"
for(i=0;i<document.getElementsByName('rad').length;i++)
"
;
js
+=
"
if(document.getElementsByName('rad')[i].value==
"
;
js
+=
"
document.getElementById('
"
+
this
.rd.ClientID
+
"
').value)
"
;
js
+=
"
document.getElementsByName('rad')[i].checked=true
"
;
js
+=
"
}
"
;
js
+=
"
window.onload=ld
"
;
js
+=
"
</script>
"
;
this
.RegisterStartupScript(
"
js
"
,js);
if
(
!
IsPostBack)
...
{
SetBind();
}
}
下面分析一下以上的这段代码:
问:为什么不把代码放在
if
(
!
IsPostBack)中呢?
答:放不放还需要明确
if
(
!
IsPostBack)的意思(具体见http:
//
blog.csdn.net/lovecherry/archive/2005/02/25/301441.aspx中的说明),其实确切的说应该把这段代码放到 if(!IsPostBack){}else{放到这里}来,因为第一次加载页面的时候,隐藏域里面是不可能有东西的(第一次加载页面你都选择并且点击按钮提交,怎么会有东西呢?)
问: 是什么东西?
答:这个是换行,放不放对代码运行没有影响,但是如果放了换行的话,在客户端的呈现可以更加清晰
问:为什么取rd的值要用document.getElementById(
'
" + this.rd.ClientID + "
'
).value不用document.getElementById(
'
rd
'
).value 呢?
答:其实在这里你可以后者,但是要知道一点,就是rd是服务端的控件,在某些情况下,id在客户端的呈现不是在aspx中你指定的id了,而是控件.ClientID,比如在DataGrid中放置的一些服务器端控件,查看一下源代码可以看到id是类似 DataGrid1__ctl5_Hyperlink1而不是你指定的id了
问:这里为什么不用RegisterClientScriptBlock呢?
答:在这里,这也是无所谓的你可以使用RegisterClientScriptBlock,因为这段js是自运行的(js
+=
"
window.onload=ld
"
;这句)的,所以不管在form的开始或是结束呈现都不会影响到结果
(
3
)实现多选
首先在前台加入如下的代码(添加一列)
<
asp:TemplateColumn
>
<
ItemTemplate
>
<
input type
=
"
hidden
"
id
=
"
SelectedID
"
runat
=
"
server
"
value
=
'
<%# Container.ItemIndex%>
'
NAME
=
"
SelectedID
"
/>
<
asp:CheckBox ID
=
"
chkExport
"
Runat
=
"
server
"
/>
</
ItemTemplate
>
</
asp:TemplateColumn
>
为页面加入一个按钮(名字叫多选),为之添加以下代码
foreach
(DataGridItem di
in
this
.DataGrid1.Items)
...
{
if
(((CheckBox)di.FindControl(
"
chkExport
"
)).Checked
==
true
)
...
{
this
.Label1.Text
+=
this
.DataGrid1.DataKeys[
int
.Parse
(((HtmlInputHidden)di.FindControl(
"
SelectedID
"
)).Value)]
+
"
<br>
"
;
}
}
点击了这个按钮就在label的位置显示了所有选择的项目对应的数据表主键的值,可以利用这个值进行一些数据库的操作
比如:
string
s
=
""
;
foreach
(DataGridItem di
in
this
.DataGrid1.Items)
...
{
if
(((CheckBox)di.FindControl(
"
chkExport
"
)).Checked
==
true
)
...
{
s
+=
this
.DataGrid1.DataKeys[
int
.Parse(((HtmlInputHidden)di.FindControl(
"
SelectedID
"
)).Value)]
+
"
,
"
;
}
}
SqlConnection conn
=
new
SqlConnection(System.Configuration.ConfigurationSettings.AppSettings[
"
conn
"
]);
SqlCommand comm
=
new
SqlCommand(
"
delete from tb1 where ID in (
"
,conn);
comm.CommandText
+=
s.Substring(
0
,s.Length
-
1
)
+
"
)
"
;
//
删除最后一个逗号
conn.Open();
comm.ExecuteNonQuery();
conn.Close();
SetBind();
你可以再添加两个按钮,一个叫选择所有,一个叫取消所有选择,为之分别添加如下代码
foreach
(DataGridItem di
in
this
.DataGrid1.Items)
...
{
((CheckBox)di.FindControl(
"
chkExport
"
)).Checked
=
true
;
}
foreach
(DataGridItem di
in
this
.DataGrid1.Items)
...
{
((CheckBox)di.FindControl(
"
chkExport
"
)).Checked
=
false
;
}
下面分析以上上面的代码:
问:选择所有和取消所有选择的按钮是提交到服务器的,能否不提交实现?
答:首先明确,模板列中的checkbox是runat
=
server的,上面说了,在客户端的呈现id是类似 DataGrid1__ctl9_chkExport这样的,所以在客户端js取的时候我们只能通过控件.ClientID来取,如果在 Page_Load的时候来取的话是取不到的,因为checkbox是放在DataGrid模板列中的,在Page_Load的时候DataGrid还没有Created。解决办法就是同上面单选的一样,统一使用一个server端的隐藏域来保存多选的项目,然后替换模板列中的
<
asp: CheckBox
>
为html的checkbox,在选择时候来更改隐藏域中的值(通过js,所以不会提交页面),同样在点击多选按钮的时候,通过读取隐藏域中的值来得到选择的项目,这样其实是一个代码以服务端为主到客户端为主的一个转变,在有的时候服务端和客户端的交互通过隐藏域是非常方便的。在后续文章中会详细给出跨页面多选,同时也实现了客户端选择所有和取消所有选择的例子。
本文转载:
CSDN博客
阅读排行
Java面试题全集(上) (1103003 )
Wi-Fi 爆重大安全漏洞,Android、iOS、Windows 等所有无线设备都不安全了 (422535 )
Jquery 使用Ajax获取后台返回的Json数据后,页面处理 (268555 )
Java面试题全集(中) (236962 )
一个非常有用的函数——COALESCE (222976 )
Java面试题全集(下) (220958 )
Uncaught SyntaxError: Unexpected token ) (213447 )
如何用adb连接android手机?(我的亲自经历)------ 顺便说说unable to connect to 192.168.1.100:5555的原因和解决方法 (210657 )
如何利用C/C++逐行读取txt文件中的字符串(可以顺便实现文本文件的复制) (207522 )
yum提示Another app is currently holding the yum lock; waiting for it to exit... (205732 )
分类
C# 【2859 篇】
Java 【2173 篇】
SQL 【1413 篇】
Python 【1538 篇】
JavaScript 【1312 篇】
Web 【951 篇】
Other 【5469 篇】
归档
2022 【830 篇】
2021 【3441 篇】
2020 【5337 篇】
2019 【2404 篇】
2018 【1756 篇】
2017 【257 篇】
2016 【550 篇】
2015 【166 篇】
2014 【252 篇】
2013 【168 篇】
2012 【137 篇】
2011 【26 篇】
2010 【40 篇】
2009 【50 篇】
2008 【74 篇】
2007 【54 篇】
2006 【173 篇】