DevExpress ASPxGridView 使用文档七：客户端API

转载请注明出处：http://surfsky.cnblogs.com/

---------------------------------------------------------
-- ASPxGridView 客户端API
---------------------------------------------------------
API
    PerformCallback(this.value);
    CollapseAll()
    ExpandAll()
    SelectRows()
    UnselectRows()
    UnselectAllRowsOnPage()
    SelectAllRowsOnPage(this.checked)

---------------------------------------------------------
示例
---------------------------------------------------------
客户端事件按钮控制 grid 放缩
    <input type="button" onclick="grid.CollapseAll();" value="Collapse All Rows" />
    <input type="button" onclick="grid.ExpandAll();" value="Expand All Rows" />
    <dxe:ASPxButton ID="btnUnselectAll" runat="server" Text="Unselect All" UseSubmitBehavior="False" AutoPostBack="false">
        <ClientSideEvents Click="function(s, e) { grid.UnselectRows(); }"/>
    </dxe:ASPxButton>

下拉框触发grid的ajax刷新
    <select id="selGridLayout" onchange="grid.PerformCallback(this.value);" >
        <option selected="selected" value="0">Country</option>
        <option value="1">Country, City</option>
        <option value="2">Company Name</option>
    </select>
    protected void grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) 
    {
        int layoutIndex = -1;
        if(int.TryParse(e.Parameters, out layoutIndex))
            ApplyLayout(layoutIndex);
    }
    
用定时器出发grid的ajax刷新
     <dxt:ASPxTimer ID="timer" ClientInstanceName="timer" runat="server" Interval="2000">
         <ClientSideEvents Tick="function(s, e) {
             timer.Stop();    
             grid.PerformCallback();
         }" />
     </dxt:ASPxTimer>
    <ClientSideEvents EndCallback="function(s, e) {timer.Start();}" />
     protected void grid_CustomCallback(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewCustomCallbackEventArgs e) 
     {
         grid.DataBind();
     }

---------------------------------------------
-- GridView 客户端选择行
---------------------------------------------
行聚焦（FocusedRowChanged）
    注：必须定义行主键：gv.KeyFieldName = "UserId";
    // 聚焦行变更事件。向服务器查询聚焦行的 "EmployeeID" 和 "Notes" 信息，并该信息将返回到 OnGetRowValues() 函数
    function OnGridFocusedRowChanged() {
        grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
    }
    // 处理服务器端传回的数据（values是个数组，包含 "EmployeeID" 和 "Notes" 值）
    function OnGetRowValues(values) {
        DetailImage.SetImageUrl("FocusedRow.aspx?Photo=" + values[0]);
        DetailNotes.SetText(values[1]);
    }
    <dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID" 
        PreviewFieldName="Notes" AutoGenerateColumns="False" EnableRowsCache="false" Width="100%">
        <Columns>
            <dxwgv:GridViewDataColumn FieldName="FirstName" VisibleIndex="0"/>
            <dxwgv:GridViewDataColumn FieldName="Title" VisibleIndex="3"/>
            <dxwgv:GridViewDataColumn FieldName="LastName" VisibleIndex="1"/>
            <dxwgv:GridViewDataColumn FieldName="BirthDate" VisibleIndex="2"/>
            <dxwgv:GridViewDataColumn FieldName="HireDate" VisibleIndex="4"/>
        </Columns>         
        <Settings  ShowGroupPanel="true" />
        <SettingsBehavior AllowFocusedRow="True"/>
        <ClientSideEvents FocusedRowChanged="function(s, e) { OnGridFocusedRowChanged(); }"/>
    </dxwgv:ASPxGridView>
    <p>详细信息:</p>
    <dxe:ASPxImage runat="server" ID="DetailImage" ClientInstanceName="DetailImage" />
    <dxe:ASPxMemo runat="server" ID="DetailNotes" ClientInstanceName="DetailNotes"  Width="100%" Height="160" ReadOnly="true" />

用control键＋点击行可多选
     <SettingsBehavior AllowMultiSelection="true" />

全选、全部反选
     <dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="CustomerID" Width="100%">
         <SettingsBehavior AllowGroup="false" AllowDragDrop="false" />
         <Columns>
            <dxwgv:GridViewCommandColumn ShowSelectCheckbox="True" VisibleIndex="0">
                 <HeaderTemplate>
                     <input type="checkbox" onclick="grid.SelectAllRowsOnPage(this.checked);" title="选择/放弃选择本页的所有行" />
                 </HeaderTemplate>
                 <HeaderStyle HorizontalAlign="Center" />
            </dxwgv:GridViewCommandColumn>
            <dxwgv:GridViewDataColumn FieldName="ContactName" VisibleIndex="1" />
            <dxwgv:GridViewDataColumn FieldName="CompanyName" VisibleIndex="2" />
            <dxwgv:GridViewDataColumn FieldName="City" VisibleIndex="3" />
            <dxwgv:GridViewDataColumn FieldName="Region" VisibleIndex="4" />
            <dxwgv:GridViewDataColumn FieldName="Country" VisibleIndex="5" />         
         </Columns>
     </dxwgv:ASPxGridView>

客户端选择多行
    <dxe:ASPxListBox ID="ASPxListBox1" ClientInstanceName="selList" runat="server" Height="250px" Width="120px" />
    <p>
      选择的记录条数: 
      <span id="selCount" style="font-weight: bold">0</span>            
    </p>                
    <dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="CustomerID" Width="100%">
      <Columns>
        <dxwgv:GridViewCommandColumn ShowSelectCheckbox="True" VisibleIndex="0" />
        <dxwgv:GridViewDataColumn FieldName="ContactName" VisibleIndex="1" />                        
        <dxwgv:GridViewDataColumn FieldName="CompanyName" VisibleIndex="2" />                        
        <dxwgv:GridViewDataColumn FieldName="City" VisibleIndex="3" />                        
        <dxwgv:GridViewDataColumn FieldName="Region" VisibleIndex="4" />                        
        <dxwgv:GridViewDataColumn FieldName="Country" VisibleIndex="5" />                     
      </Columns>                    
      <ClientSideEvents SelectionChanged="grid_SelectionChanged" />
    </dxwgv:ASPxGridView>
    ----------------------------------------
    function grid_SelectionChanged(s, e) {
        s.GetSelectedFieldValues("ContactName", GetSelectedFieldValuesCallback);
    }
    function GetSelectedFieldValuesCallback(values) {    
        selList.BeginUpdate();
        try {
            selList.ClearItems();
            for(var i = 0; i < values.length; i ++) {
                selList.AddItem(values[i]);
            }
        } finally {
            selList.EndUpdate();
        }
        document.getElementById("selCount").innerHTML = grid.GetSelectedRowCount();
    }

客户端选择行
    <script language="javascript" type="text/javascript">
    //function is called on changing focused row
    function OnGridFocusedRowChanged() 
    {
        // Query the server for the "EmployeeID" and "Notes" fields from the focused row 
        // The values will be returned to the OnGetRowValues() function
        grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
    }
    //Value array contains "EmployeeID" and "Notes" field values returned from the server 
    function OnGetRowValues(values) 
    {
        var notes = document.getElementById("detailnotes");
        notes.value = values[1];
        var image = document.getElementById("detailimage");
        image.src = "FocusedRow.aspx?Photo=" + values[0];
    }
    </script>

    <dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID" PreviewFieldName="Notes" AutoGenerateColumns="False" EnableRowsCache="false" Width="100%">
        <Columns>
            <dxwgv:GridViewDataColumn FieldName="FirstName" VisibleIndex="0"/>
            <dxwgv:GridViewDataColumn FieldName="Title" VisibleIndex="3"/>
            <dxwgv:GridViewDataColumn FieldName="LastName" VisibleIndex="1"/>
            <dxwgv:GridViewDataColumn FieldName="BirthDate" VisibleIndex="2"/>
            <dxwgv:GridViewDataColumn FieldName="HireDate" VisibleIndex="4"/>
        </Columns>
        <Settings  ShowGroupPanel="true" />
        <SettingsBehavior AllowFocusedRow="True"/>
        <ClientSideEvents FocusedRowChanged="function(s, e) { OnGridFocusedRowChanged(); }"/>
    </dxwgv:ASPxGridView>
    <table cellpadding="5" cellspacing="2" style="width:100%">
        <tr>
            <td style="width:30%"><img id="detailimage" alt="Image" src=""/></td>
            <td style="width:70%"><textarea id="detailnotes" style="padding:2px 4px 2px 4px;width:94%;vertical-align:top" readonly="readonly" rows="10" cols="50"></textarea></td>
        </tr>
    </table>