AspxGrid模板列中Checkbox 值在客户端的处理

来源：互联网发布：淘宝联盟里活动走低佣编辑：程序博客网时间：2024/05/04 01:11

前一篇文章用的是服务器模式，如果改用客户端模式，则也不能取到Items中的关于数据的行.

本文主要讲述的是使用客户端模式，在客户端和服务器都能访问模板列中定义的CHECKBOX的值.

aspxgrid的定义

<dxwg:ASPxGrid runat="server" AutoGenerateColumns="False" Width="592px" ID="ASPxGrid2"
TabIndex="0" DataKeyField="OID" NavigatorIndent="1px" PageSize="0" Height="295px" >

</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事件中也表现为如些。

因此建立对数据源进行循环判断来达到检测用户是否选取的目的。