在实际产品设计过程中,我们经常会讨论产品给用户带来的使用体验,我们希望产品能给用户带来最完美的体验。完美的用户体验很大程度上受到产品易用性的影响,比如:是否能给提供便捷的数据录入方式。本文主要讲解在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控件的属性

  1.  
    <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 M, 下载次数:31)



备注:该方法只适用于IE8和IE9浏览器。