在SmartGrid列中添加日期控件示例

创建时间：2012年09月05日 15:42 阅读次数：(4824)

分享到：

因为有朋友在问，如何把SmartGrid列做成可以选择日期的列，比如怎么将My97DatePicker控件合并到列中去，刚好本人有做过这个功能，所以在这做个简单的示例。

本章以My97DatePicker控件为例，因为这个控件相当的强大，而且也很好用，使用这个控件的朋友也非常的多。

首先我们要了解My97DatePicker控件的使用方法，这个这里就不讲了，不太了解的朋友可以到下面这个网址看看。
http://www.my97.net/dp/index.asp

从上面的网站中下载到My97DatePicker控件的源码，然后我们新建一个WebForm页面，将My97DatePicker引用到WebForm页面中，并往这个页面添加一个SmartGrid控件，如下代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>

<%@ Register Assembly="Smart.Web.UI.WebControls.SmartGrid" Namespace="Smart.Web.UI.WebControls"
TagPrefix="SmartWeb" %>
<html>
<head runat="server">
<title></title>
<script src="My97DatePicker/WdatePicker.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<SmartWeb:SmartGrid ID="SmartGrid1" runat="server" ReadOnly="false">
<Columns>
<SmartWeb:RefColumn ColumnName="PreRevDate" HeaderText="交货日期" Format="yyyy-MM-dd"
DataType="System.DateTime" EditorClientScriptUrl="MyRef.htc" ExtendedProperties="<?xml version='1.0'?><Info><RefInfo></RefInfo></Info>" />
</Columns>
</SmartWeb:SmartGrid>
</form>
</body>
</html>

从上面的代码中可以看到我们为SmartGrid添加了列"交货日期"，这个列引用了MyRef.htc文件，我们可以在MyRef.htc文件中，将该列与My97DatePicker控件组合起来。

MyRef.htc的代码如下：

<public:component>
<PUBLIC:PROPERTY NAME="grid"/>
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="Click()" />
</public:component>

<script language="javascript">

    var input = element.getElementsByTagName("INPUT")[0];

    function Click() {
        input.id = event.x + 'ab' + event.y + 'cc';
        WdatePicker({ el: $dp.$(input.id) });
    }

</script>

也是很简单的几段代码，这样，整个功能就已经完成了，在WdatePicker({ el: $dp.$(input.id) })这段代码中我们可以为My97DatePicker控件添加各种参数，以实现不同的需求。效果图如下：

可能有朋友对var input = element.getElementsByTagName("INPUT")[0]这句代码不太理解，这个是因为SmartGrid控件的可输入列都是将一个input标签移动到焦点列供用户输入数据，所以可以利用element.getElementsByTagName("INPUT")[0]来获取到当前可输入列。而这个input的ID就是利用event.x + 'ab' + event.y + 'cc'这个规则来命名的。

代码很简单吧，有需要的朋友按这个试一下吧。s

来源：.net学习网
说明：所有来源为 .net学习网的文章均为原创，如有转载，请在转载处标注本页地址，谢谢！

【编辑：Wyf】

打赏