前一篇文章用的是服务器模式,如果改用客户端模式,则也不能取到Items中的关于数据的行.
本文主要讲述的是使用客户端模式,在客户端和服务器都能访问模板列中定义的CHECKBOX的值.
aspxgrid的定义
<dxwg:ASPxGrid runat="server" AutoGenerateColumns="False" Width="592px" ID="ASPxGrid2"
TabIndex="0" DataKeyField="OID" NavigatorIndent="1px" PageSize="0" Height="295px" >
<Columns>
<dxwg:BoundTemplateColumn VisibleIndex="0" DataField="Chk" HeaderText="选中" Width="53px">
<EditItemStyle HorizontalAlign="Center"></EditItemStyle>
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server"></asp:CheckBox>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"></asp:CheckBox>
</EditItemTemplate>
</dxwg:BoundTemplateColumn>
<dxwg:BoundColumn DataField="OID" Visible="False">
</dxwg:BoundColumn>
<dxwg:BoundColumn DataField="GoodKind" Visible="False">
</dxwg:BoundColumn>
<dxwg:BoundColumn HeaderText="类型" DataField="KindName" VisibleIndex="1" Width="124px"
ReadOnly="True">
</dxwg:BoundColumn>
<dxwg:BoundColumn HeaderText="品名" DataField="ProductID" VisibleIndex="2" Width="124px"
ReadOnly="True">
</dxwg:BoundColumn>
<dxwg:BoundColumn HeaderText="规格" DataField="GoodStyle" VisibleIndex="3" Width="124px"
ReadOnly="True">
</dxwg:BoundColumn>
<dxwg:BoundColumn HeaderText="单位" DataField="Unit" VisibleIndex="4" Width="50px"
ReadOnly="True">
</dxwg:BoundColumn>
<dxwg:BoundColumn HeaderText="长度(米)" DataField="Length" VisibleIndex="5" Width="87px"
ReadOnly="True">
</dxwg:BoundColumn>
</Columns>
</dxwg:aspxgrid>
上面红色的是定义的一个绑定模板列,要根据绑定上来的值来处理checkbox的状态,需要我们自己来处理网格的呈现。因此要增加如下的代码,下面的CHK是一个列名。主要用于定义绑定网格时,单元格如何显示及取值时的处理
<ClientSideEvents>
<BindCell>
function(source,e){ if(e.column.GetDataControllerColumn().GetName() == "Chk"){ var
checkBox = ASPxClientUtils.GetChildByTagName(e.htmlElement, "INPUT", 0); checkBox.checked
= e.row.GetDataControllerRow().GetValueByColumnName("Chk"); checkBox.onclick = new
Function("OnCheckBoxChanged(this, '" + e.row.GetKeyValue() + "')"); } }</BindCell>
<GetEditValue>
function(source,e){ if(e.column.GetDataControllerColumn().GetName() == "Chk"){ var
checkBox = ASPxClientUtils.GetChildByTagName(e.htmlElement, "INPUT", 0); e.row.GetDataControllerRow().SetValueByColumnName("Chk",
checkBox.checked); } }</GetEditValue>
<BindEditCell>
function(source,e){ if(e.column.GetDataControllerColumn().GetName() == "Chk"){ var
checkBox = ASPxClientUtils.GetChildByTagName(e.htmlElement, "INPUT", 0); checkBox.checked
= e.row.GetDataControllerRow().GetValueByColumnName("Chk"); } }</BindEditCell>
</ClientSideEvents>
在checkbox选中后,还要同步checkbox和绑定的列的值,因此要加一段处理代码OnCheckBoxChanged
function OnCheckBoxChanged(sender, key){
// ctl00_phContent_ASPxGrid2为页面中网格控件的ID,要看你具体的页面
ctl00_phContent_ASPxGrid2.BeginUpdate();
var savedFocusedRow = ctl00_phContent_ASPxGrid2.GetFocusedRow();
var row = ctl00_phContent_ASPxGrid2.GetRowByKeyValue(ctl00_phContent_ASPxGrid2.GetGroupCount(), key);
ctl00_phContent_ASPxGrid2.EditRow(row);
row.GetDataControllerRow().SetValueByColumnName("Chk", sender.checked);
ctl00_phContent_ASPxGrid2.Post();
ctl00_phContent_ASPxGrid2.SetFocusedRow(savedFocusedRow);
ctl00_phContent_ASPxGrid2.EndUpdate();
event.cancelBubble = true;
}
客户端的代码差不多了,在服务器只要绑定数据上来就行了。数据只要包含在列中定义的那些字段就行。
不过当回发到服务器后,还有一点点的小bug,就是当一个checkbox选中后,再去点它,相当没有选,可是到服务器后显示的却是它的状态已改变了,如绑定的是datatable,则调用datatable.getchanges(),还是可以获取选中的行,而实际上,我们却没有选中。在aspxgrid 的updatecommand事件中也表现为如些。
因此建立对数据源进行循环判断来达到检测用户是否选取的目的。