在SmartGrid的实际使用中,如果需要用户输入的数据是固定几项的,那么最好把这个列做成
DropDownListColumn列,一是方便用户快速输入数据,二是避免用户手动输入错误的信息。那么我们如何在SmartGrid中绑定DropDownListColumn列呢?
从DropDownListColumn列的类名我们就可以看出来,这一列的表现形式是与DropDownList一样的。DropDonwList有两个主要的属性,一个是Text,一个Value,Text值主要用来显示给用户看,而Value主要用来存储实际的值。比如一个用来存储地区的DropDownList控件,显示值有”长沙”,”深圳”,”北京”,而这三个地区在数据库中可能只是存储它们的编码”001”,”002”,”003”,那么我们就是用ListItem将它们组合起来。
同样,DropDownListColumn列也需要另一个列来配合存储该列的实际的值,当然,如果你的DropDownListColumn的显示值与实际值是一样的,就可以不需要另一个列来存储值了。
如果有对SmartGrid列还不太清楚的朋友,可以下载本站的
SmartGrid帮助文档,以便查阅。
下面我们来做一个具体的实例:
SmartGrid列即可以在aspx页添加,也可以在cs页,通过后台代码添加,本实例我们主要讲解在cs页用后台程序的方法添加.在aspx页添加的方式就一下带过去了,如下面代码:
<SmartWeb:SmartGrid ID="grid" runat="server" AllowAdd="False" AllowDelete="True" DataKeyField="ID" >
<Columns >
<SmartWeb:DropDownListColumn ColumnName="address" HeaderText="地区" EditMode="Embedding"
EditorClientScriptUrl="../../htc/droplist.htc" ExtendedProperties="<?xml version='1.0'? ><Info valueColumn=addressvalue/ >" / >
</Columns >
</SmartWeb:SmartGrid >
主要我们从后台添加,如下代码:
//声明一个DropDownListColumn列
SmartGridColumn col == new DropDownListColumn();
//将该列添加到SmartGrid中,grid为SmartGrid的ID。
this.grid.Columns.Add(col);
col.ColumnName = "address";
col.HeaderText = "地址";
//设置该列的htc文件,htc是SmartGrid中一个非常重要的文件,我们很多的功能都是在htc文件中
col.EditorClientScriptUrl = "htc/Mydropdownlist.htc";
//下句代码中valueColumn属性设置用来存储该列的实际值的列,我们在取下拉列的实际值时,就要取valueColumn设置的列的值
col.ExtendedProperties = "<?xml version='1.0'? ><Info valueColumn=addressvalue/ >";
//初始化该列的下拉框
DropDownList l = col.ControlEditor as DropDownList;
l.Items.Add(new ListItem("长沙","001"));
l.Items.Add(new ListItem("深圳","002"));
l.Items.Add(new ListItem("北京","003"));
//初始化addressvalue列
SmartGridColumn col = col = new SmartGridColumn();
this.grid.Columns.Add(col);
col.HeaderText = "地区编号";
col.ColumnName = "addressvalue";
col.Visible = false;//把这一列隐藏改起来,不让用户看到
这样,我们就把一个DropDownListColumn列初始化好并添加到SmartGrid中了。但这时的address值并不能和addressvalue联动起来。还需要htc文件支持。下面我们看看htc文件:
<script language="javascript" >//列表框一般有两个值,一个是Text,一个是value。valColumn指明存储选择的value的Grid列
var valColumn = null;
var extendedProp = element.extendedProperties;
if(typeof(extendedProp) != "undefined")
{
var dom = new ActiveXObject("MSXML.DOMDocument");
dom.loadXML(extendedProp);
valColumn = dom.documentElement.getAttribute("valueColumn");
}
//当离开编辑时,根据编辑器的内容给相关的单元格赋值
function getValue()
{
var r = grid.row;
var val = element.options[element.selectedIndex].value;
//如果有储存value的列,则将当前选择项的值放到该列中
if(valColumn != null)
{
grid.setCellValue(r,valColumn,val) ;
}
return element.options[element.selectedIndex].text;
}
//当进入编辑时,根据当前单元格的内容,给编辑器赋值
function setValue(vVal)
{
var r = grid.row;
var val = vVal;
//如果有储存value的列,则从该单元格取值
if(valColumn != null)
{
val = grid.getCellValue(r,valColumn);
}
var options = element.options;
var length = options.length;
for(var i=0;i<length;i++)
{
var option = options[i];
if(option.value == val)
{
option.selected = true;
return;
}
}
}
</script >
从上面代码中可以看出来,在htc中,使用了SmartGrid的getCellValue与setCellValue方法,将两列的值真正的联动起来了。
好了,一个SmartGrid的下拉列终于完成了!d