一,在客户端利用js选对与取消选中行数据
1,让选中行的的样式变化。
要看到行选择之后样式变化应创建并在页面上引入SmartGrid样式风格文件(如SmartGrid.css),并设置SmartGrid的CssClass(通常是smartGrid),如:
<link href ="SmartGrid.css" rel="stylesheet" >
SmartGrid官方提供的样式示例代码如下:
.smartGrid { BORDER: #aca899 1px solid;activeCellColor:#AFD5FF;selectedCellColor:#6699CC}
.headerCellStyle,.dragOverCellStyle,.rowHeaderCellStyle,.frozenCellStyle{border-color:white #aca899 #aca899 white;border-style:solid;border-width:1px; BACKGROUND-COLOR: #ece9d8;FONT-SIZE: 9pt;}
.headerCellStyle,.dragOverCellStyle,.rowHeaderCellStyle{TEXT-ALIGN: center}
.dragOverCellStyle { BACKGROUND: #339966 }
.cellStyle,.alternatingCellStyle,.disabledCellStyle,.mouseOverCellStyle,.activeCellStyle,.selectedCellStyle{padding:2px;border-color:#ece9d8;border-style:solid;border-width:0px 1px 1px 0px; BACKGROUND-COLOR: white ; FONT-SIZE: 9pt; }
.selectedCellStyle{background-color: #679ACD;}
.activeCellStyle{BACKGROUND-COLOR: #AFD5FF;}
.mouseOverCellStyle{ BACKGROUND-COLOR: beige }
.disabledCellStyle{BACKGROUND-COLOR: #d4d0c8 }
.alternatingCellStyle { BACKGROUND-COLOR: #ffeeee}
.totalCellStyle {border-color: #ece9d8;border-style:solid;border-width:1px 1px 1px 0px;BACKGROUND-COLOR: white; FONT-SIZE: 9pt }
.statusBarStyle { border-color: #aca899;FONT-SIZE: 9pt; BACKGROUND-COLOR: #ece9d8; buttonshadow: #aca899; buttonhighlight: white }
.rowStyle,.frozenRowStyle{HEIGHT:20px}
.headerRowStyle{HEIGHT:20px}
.pagerStyle { FONT-SIZE: 9pt; BORDER-COLOR: #aca899;BACKGROUND-COLOR: #ece9d8;}
.pagerLinkDisabledStyle { CURSOR: default; TEXT-DECORATION: none }
SmartGrid官方提供的样式示例代码中包含了非标准的CSS属性,在VS中会报错,可以通过更改VS选项来屏蔽该错误(工具 >选项 >文本编辑器 >CSS >CSS特定,将【检查错误】选项关闭)。
2,与行选择有关的属性
SelectionMode:指定SmartGrid的选择方式。用户有三种行选择方式:无选择(None)、单行选择(Single)、多行选择(Multiple)。默认的选择方式是单行选择。
SelectedCellColor:获取或设置用来绘制选择行上单元格的颜色。System.Drawing.Color类型。也可通过css属性实现相同效果(参考SelectedCellStyleName)。
SelectedCellStyleName:获取或设置用户选择的行的单元格的样式。默认值为selectedCellStyle。
SelectedMouseOverUsingStyle:获取或设置用户在选择行时或MouseOver行时,是使用样式还是背景色来绘制行上的单元格。
3,
selectAll:选中所有行语法:selectAll()
例:
var grid = document.getElementById("<%=SmartGrid1.ClientID % >");
grid.selectAll();
4,
removeSelect:取消某行的选中状态语法:removeSelect(int rowIndex)
例:
var grid = document.getElementById("<%=SmartGrid1.ClientID % >");
grid.removeSelect(0);
如果需要取消所有行的选中状态,可以循环SmartGrid行数调用removeSelect()
var grid = document.getElementById("<%=SmartGrid1.ClientID % >");
for (var i = 0; i < grid.rowCount; i++) {
grid.removeSelect(i);
}
5,
selectedCount:获取选中行数量语法:selectedCount()
该方法有BUG,不可被调用
6,
getSelectedData:获取选中行数据(返回xml对象)
语法:getSelectedData()
返回xml对象,可以通过DOM操作转换为行数据,返回的数据格式在不同情况下有所不同(包括属性个数)。根节点名称为“selection”。
例:
var grid = document.getElementById("<%=SmartGrid1.ClientID % >");
var data = new ActiveXObject("MSXML.DOMDocument");
data = grid.getSelectedData();
var details = data.getElementsByTagName("selection");
if (details.length > 0) {
var rows = details[0].selectNodes("row[@RowState = 'Added']");
for (var i = 0; i < rows.length; i++) {
for (var j = 0; j < rows[i].attributes.length; j++) {
alert("name="+rows[i].attributes[j].name+";value="+rows[i].attributes[j].value);
}
}
}
如果没有选中行,data.xml将返回如下数据:
<?xml version="1.0"? > <selection/ >
如果有选中行,并且是通过insertRow()新增的行,会在除栏位数据外,额外返回每行的行数据状态(RowState)、内部行号(rowNo),data.xml将返回如下数据:
<?xml version="1.0"? >
<selection ><row RowState="Added" rowNo="1" RowNumber="1" TaskCode="TaskCode1" TaskName="TaskName1" TaskType="TaskType1" PlanHours="PlanHours1" PlanBeginDate="PlanBeginDate1" PlanEndDate="PlanEndDate1"/ ></selection >
如果有选中行,并且是通过绑定数据源得到数据,会在除栏位数据外,额外返回每行的行数据状态(
RowState)、内部行号(rowNo),额外返回的数据放在行尾,data.xml将返回如下数据:
<?xml version="1.0"? > <selection ><row RowNumber="1" TaskCode="TC20100628001" TaskName="abc" TaskType="01401" PlanHours="7.0000" PlanBeginDate="2010-6-27 0:00:00" PlanEndDate="2010-7-2 0:00:00" PlanApprUser="SD007" TraceUser="SHD001" ActHours="0.0000" ActBeginDate="" ActEndDate="" CompleteRate="0.0000" State="0" Creator="admin" CreateDate="2010-6-28 17:12:21" Remark="" Auditer="" AuditDate="" AttachmentCount="0" AttachmentState="" rowNo="0" RowState="Unchanged"/ > </selection >
备注:行数据状态(RowState)可能会取以下值:
Unchanged:未发生改变
Deleted:已被删除
Modified:已做修改
Added:刚新增
可通过dom.selectNodes("row[@RowState = 'Deleted']")获取所有被删除的行数据
二,在服务器端取选择行(ClientSelected)
可以通过访问SmartGrid的ClientSelected属性获取客户端选中的数据行信息(返回的数据类型为XML节点列表)。
示例代码:
StringBuilder sb = new StringBuilder();
XmlNodeList xmlNodeList = this.SmartGrid1.ClientSelected;
for (int i = 0; i < xmlNodeList.Count; i++)
{
XmlNode item = xmlNodeList.Item(i);
sb.Append("<row");
for (int j = 0; j < item.Attributes.Count; j++)
{
sb.Append(" " + item.Attributes[j].Name + "='" + item.Attributes[j].Value + "'");
}
sb.Append("/ >");
}
1,
在服务器端取选择行(SelectedRows)
可以通过访问SmartGrid的SelectedRows属性获取选中的数据行信息(返回的数据类型DataRow[])。
例:
StringBuilder sb = new StringBuilder();
DataRow[] drList = this.SmartGrid1.SelectedRows;
if (drList != null && drList.Length > 0)
{
foreach (DataRow dr in drList)
{
sb.Append("TaskCode=" + dr["TaskCode"].ToString() + "\n");
}
}
Response.Write(sb.ToString());