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>
转载请注明出处：http://surfsky.cnblogs.com
