通过自定义弹出窗体单元格类型提升用户的使用体验 PopupCellType

收藏

在实际产品设计过程中，我们经常会讨论产品给用户带来的使用体验，我们希望产品能给用户带来最完美的体验。完美的用户体验很大程度上受到产品易用性的影响，比如：是否能给提供便捷的数据录入方式。本文主要讲解在Spread for ASP.NET中，如何通过自定义单元格类型来提升产品的用户使用体验。

本文通过自定义单元格类型要实现以下功能：
1、单元格处于非编辑状态时，只显示文字
2、单元格处于编辑状态时，单元格中显示TextBox和Button控件
3、编辑状态下，用户可以直接在TextBox中输入数据
4、编辑状态下，用户点击Button控件之后弹出一个新的窗体，用户在新的窗体中选择数据后，将选择的数据返回给单元格

我们先来看一下最终的运行效果：

实现方法是通过自定义CellType与ModalPopupExtender一起完成该功能。
详细实现步骤如下：
1. 实现自定义单元格类型
1.1. 创建一个继承于GeneralCellType的自定义单元格类型 PopupCellType

1.2. 重写GetEditorControl，返回由TextBox和Button组成的控件

public override System.Web.UI.Control GetEditorControl(string id, System.Web.UI.WebControls.TableCell parent, FarPoint.Web.Spread.Appearance style, FarPoint.Web.Spread.Inset margin, object value, bool upperLevel)
{
Table table = new Table();
table.CellPadding = 0;
table.CellSpacing = 0;
table.BorderStyle = BorderStyle.None;
table.BorderWidth = new Unit(0, UnitType.Pixel);
table.Width = new Unit(100, UnitType.Percentage);
TableRow row = new TableRow();
TableCell cell = new TableCell();
cell.VerticalAlign = VerticalAlign.Middle;
cell.HorizontalAlign = HorizontalAlign.Left;
// 用户可以直接在 TextBox 中输入数据
TextBox tb = new TextBox();
tb.Width = new Unit(99, UnitType.Percentage);
tb.ID = "PopupEditor" + _id;
// 如果不希望用户直接输入数据，可以将TextBox设置为ReadOnly，这样就可以保证数据的有效性
//tb.ReadOnly = true;
if (!string.IsNullOrEmpty(_onEnterPopup))
{
tb.Attributes.Add("onkeydown", _onEnterPopup);
}
cell.Controls.Add(tb);
row.Cells.Add(cell);
cell = new TableCell();
cell.Width = new Unit(22, UnitType.Pixel);
cell.VerticalAlign = VerticalAlign.Middle;
cell.HorizontalAlign = HorizontalAlign.Right;
// 如果用户不想通过输入的方式填写数据，可以点击[检索]按钮，在弹出的窗体中选择需要的数据
ImageButton img = new ImageButton();
img.ImageUrl = @"Images/Search.jpg";
img.BorderColor = System.Drawing.Color.LightGray;
img.BorderStyle = BorderStyle.Solid;
img.BorderWidth = new Unit(1, UnitType.Pixel);
if (!string.IsNullOrEmpty(_onClickPopup))
{
img.Attributes.Add("onclick", _onClickPopup);
}
cell.Controls.Add(img);
row.Cells.Add(cell);
table.Rows.Add(row);
return table;
}

复制代码

1.3. 重写EditorClientScriptUrl属性

public override string EditorClientScriptUrl
{
get
{
return "PopupEditorScript.htc";
}
}

复制代码

1.4. 创建PopupEditorScript.htc文件

<!--
Copyright© 2001. FarPoint Technologies. All rights reserved.
-->
<public:component>
<PUBLIC:PROPERTY NAME="value">
<get internalName="getValue"/>
<put internalName="setValue"/>
</PUBLIC:PROPERTY>
<PUBLIC:METHOD NAME="isValid">
</PUBLIC:METHOD>
</public:component>
<script language="javascript">
function getValue() {
if (element.all[3].value != null) {
return element.all[3].value;
} return "";
}
function setValue(val) {
element.all[3].value = val;
}
function isValid(val) {
return "";
}
//-->
</script>

复制代码

2.在页面中添加FpSpread和ModalPopupExtender控件
2.1. 在页面中设置ModalPopupExtender控件的属性

<asp:Button ID="ButtonEdit" runat="server" Text="Edit Expanse" Style="display: none" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" TargetControlID="ButtonEdit" PopupControlID="DivSearchWindow"
BehaviorID="SearchModalPopup">
</cc1:ModalPopupExtender>
<div id="DivSearchWindow" style="display: none; width: 615px; height: 400px;" class="popupConfirmation">
<iframe id="IframeSearch" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
</iframe>
</div>

复制代码

2.2. 在Spread中使用PopupCellType

PopupCellType popup = new PopupCellType();
popup.ID = "1001";
popup.OnClickPopup = "return ShowPopup();";
popup.OnEnterPopup = "return EnterPress(event);";
this.FpSpread1.ActiveSheetView.Columns[0].CellType = popup;

复制代码

3. 创建弹出窗体中显示的页面

源码下载：VS2010 + Spread 6.0.3505 + IE9

PopupCellTypeDemo_Modal.zip (1.76 MB, 下载次数: 1138)

wzw · wzw

这个功能真的很好，可惜在Firefox或谷歌浏览器下不能用，不能取返回的值。能解决吗？很期待

iceman · iceman

回复 2楼wzw的帖子

请参考：点击进入

		自动登录	找回密码
密码			立即注册

通过自定义弹出窗体单元格类型提升用户的使用体验 PopupCellType

2 个回复

活字格认证

圣诞拼拼乐

微信认证勋章

讲师达人

元老葡萄

悬赏达人