欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » SmartGrid使用教程 » 正文

SmartGrid教程(五):选中与取消选中行数据

创建时间:2012年03月09日 16:42  阅读次数:(4114)
分享到:

一,在客户端利用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());
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论5条
  • #1楼  评论人:匿名  评论时间:2012-5-12 10:07:33
  • 设置了SelectionMode为允许多选,手工选择可以,用代码选择就不行。
  • #2楼  评论人:匿名  评论时间:2012-5-12 10:19:46
  • 是没有取到对象的原因,document.getElementById("SmartGrid2_div");这样就行了,在全选之后,如果鼠标点一下,相当于单行选择,再调用全选,无效果,要全选第二次才会有效果,还得先清除一下。
  • #3楼  评论人:匿名  评论时间:2012-5-12 10:51:25
  • rows[i].attributes[j].value 可以换成 rows[i].attributes[name].value吗
  • #4楼  评论人:Wyf  评论时间:2012-5-12 17:31:50
  • 换成rows[i].attributes[name].value好像不行,以前有测试过,忘记了。呵呵,在家里,也没有源码再测试一下。
  • #5楼  评论人:匿名  评论时间:2012-9-26 9:22:21
  • 上次问过这个问题,找不到是在哪个章节里面了。
    2个grid A,B,点击A,在B里面显示相应内容,如果这个时候点击B里面的可编辑单元格,再点击A,会出现B里面的编辑框仍然存在的问题。上次是采用的在点击A的时候让B失去焦点,在B加载完数据之后,再让A获得焦点,在IE7+以上浏览器没问题,IE6会导致浏览器死掉。
发表评论:
留言人:
内  容:
请输入问题 85+71=? 的结果(结果是:156)
结  果: