在日期输入框中添加日历控件,是一种非常流行和实用的做法。临渊羡鱼不如退而写代码,今天就看看在TWaver中是如何实现的。
 

资源准备

 
TWaver的在线使用文档中,就有TWaver PropertySheet的demo,直接拿来用就好了。
 
 
js的日历控件,网上更是琳琅满目,我相中的是一款非常好的一个js日历控件,源码完整,结构清晰,功能齐全,实用好看。
 
 

创建Date

 
首先我们清理精简一下TWaver源代码,再为node通过setClient()创建一个名为Date的属性,最后在PropertySheet中通过addClientProperty()插入此属性行。
 
 

将来我们希望在PropertySheet中点击Date行的value栏,就可以弹出那个calendar控件来。那么就需要将显示日历的函数加到如下代码块中:
 
propertysheet.onEditorRendered = function(rowInfo){
if (rowInfo.property.getPropertyName() === 'Date') {
//calendar显示代码
}
}
那么目前的主要问题就是,如何正确显示日历控件呢?
 

寻找input

 
这款控件只有一个calendar.js文件,直接引入到那个PropertySheet源码文件中就可以使用了。不过要想让它显示出来,确实还不是件容易的事儿。和网上绝大多数控件一样,默认都是直接插入到网页的“input”标签中,其help文档给出的基本方法如下:
 
<input name="date" type="text" id="date" onclick="calendar.show(this);" size="10" maxlength="10" readonly="readonly" />

不过这一招在PropertySheet上可就有点不灵了,根本不是一个格式和套路啊。

看来日历控件的显示函数是show(),我们只要找到正确的参数传给它就可以了。可以直接把rowInfo直接传进去吗?试一下吧。
 
 

别说,还真能出来,不过位置却始终在左上角,根本不是想要的啊。看来参数传的并不对,必须要找到PropertySheet的input才行。其实TWaver的PropertySheet还真有相应的属性,不过其名字是_currentEditor,不信咱们将this._currentEditor传进去试试:
 
 

怎么样,位置完美了吧!
 
可惜这个参数并没有开放,一般的小伙伴根本不知道啊!其实也还有办法解决,那就是通过以下代码自己创建input:
 
var date = document.createElement("input");
date.setAttribute("type", "text");
date.setAttribute("onclick", "calendar.show(this);")
rowInfo.valueRender.appendChild(date);
calendar.show(date);

效果也差不多。

 

插入日期

 
不过日历还是无法正常使用,实际操作一下会发现,还有大问题:点选日期后,选择的日期值并不会上屏!
 
理一理思路,先看看控件中是怎么推送日期值的。稍微研究一下发现, calendar.js中是bindData()推送日期的,其中的calendar.dateControl.value即为选中的日期值。我们只要将这个值直接赋值给PropertySheet中的相应位置,任务就完成了。现在的关键,是如何将PropertySheet中的位置信息准确传递到calendar.js中。
 
不管白猫黑猫,解决问题就好。我们干脆就用个全局变量calendar.rowInfo来传递,先在onEditorRendered中将参数rowInfo赋给它,再在bindData()中将其传递给赋值语句。具体在bindData()中适合地方添加以下语句:
 
propertysheet.setValue(calendar.rowInfo.data, calendar.rowInfo.property, calendar.dateControl.value);
现在再试一试吧,怎么样?激动人心的一幕出现了吧!
  

隐藏日历

 
先别急着欢呼,弹出正常了,上屏也没问题,但它却有个霸屏的毛病:点击控件之外的任何地方,日历并不消失隐藏,始终盘踞在那里,真是请神容易送神难啊。我们只有添加鼠标监听事件来强行送客了。
 
当鼠标点击拓扑图时,可以添加以下代码监听:
 
network.addInteractionListener(function (e) {
if(e.kind == 'clickElement' || e.kind == 'clickBackground'){
calendar.hide();
}
});

属性表也需要监听:

 
propertysheet.getView().addEventListener('click',function (e) {
calendar.hide();
});
好像大功告成了呢!虽然还有些小不完美,比如清空按钮、自动隐藏等,但已不影响正常使用。也还可以顺着以上思路继续完善,不过总是显得有点繁琐。
 
据说TWaver的攻城狮已将此功能列入新版本开发计划,将来可以更方便完美地在属性表中插入各种控件,敬请期待吧!
 

TWaver初学实战——如何在TWaver属性表中添加日历控件?的更多相关文章

  1. TWaver初学实战——如何在EasyUI中插入TWaver(续)

    上次文章虽然简单易懂,但很有些小伙伴不满意:你这TWaver和EasyUI结合,只不过生硬地把TWaver图形插进去了,数据和人家EasyUI没一毛钱关系.嘿嘿,不就是想发生关系嘛,没问题啊!咱就还用 ...

  2. TWaver初学实战——如何在EasyUI中插入TWaver

    TWaver是一款强大的图形界面开发组件,可以很方便地集成到其他开发工具中.今天就用一个小例子来操练如何结合TWaver和EasyUI进行网页开发. 准备工作 俗话说他山之玉可以直接拿来,EasyUI ...

  3. 如何在vs2010中添加Picture控件

    1.新建项目,并在对话框控件中拖入picture控件,并做如下设置 2.在picture控件的属性栏需要进行如下修改:ID需要修改,不能为static ID是控件的唯一标识,PictureCtrl(p ...

  4. 在工作表左侧中添加TreeView控件

    开发环境基于VSTO:visual studio 2010,VB .Net,excel 2007,文档级别的定制程序. 需求是在sheet的左侧停靠System.Windows.Forms.TreeV ...

  5. 如何在VS2010中添加ActiveX控件及使用方法

    方法1: 1.首先在在项目上面右击添加类,如下图所示: 2.点击添加ActiveX控件中的MFC类 3.找到需要添加的ActiveX类. 4.点击完成即可. 5.此时转到资源视图,打开如下视图.可能工 ...

  6. ArcMap图层属性表中添加图片

    一看标题是不是有点懵?懵就对了!刚接触到的时候我也有点懵,属性表不是都是文本啊数字啊之类的格式,怎么还可以存图片,下面就带大家来看看吧! 一.关于图层入库问题 图层进入数据库和图层以shp格式存储时, ...

  7. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  8. 在数据表中添加一个字段的SQL语句怎么写

    如果要在数据表中添加一个字段,应该如何表示呢?下面就为您介绍表添加字段的SQL语句的写法,希望可以让您对SQL语句有更深的认识.   通用式: alter table [表名] add [字段名] 字 ...

  9. 深入浅出ExtJS 第四章 表单与输入控件

    4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...

随机推荐

  1. Web(Jsp+ Servlet)开发中如何解决中文乱码问题

    1.中文乱码的成因 编码的字符集和解码的字符集不一致. 2.web开发过程中可能出现的乱码的位置及解决方案 ①request乱码 在向服务器传递数据时,所传递的中文有可能出现乱码. post请求(协议 ...

  2. 外边距(padding)重叠的及解决办法

    两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒 ...

  3. 清华申请退学博士作品:完全用Linux工作

    http://www.cnblogs.com/cbscan/articles/3252872.html 下文地址 http://blog.oldboyedu.com/use-linux/ 按: 尽管我 ...

  4. 在Spring4中使用通用Mapper

    在Spring4中使用通用Mapper http://my.oschina.net/flags/blog/355281#OSC_h2_2 目录[-] 在Spring4中使用通用Mapper 一.在Sp ...

  5. HDU1022 Train Problem I 栈的模拟

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1042 栈的模拟,题目大意是已知元素次序, 判断出栈次序是否合理. 需要考虑到各种情况, 分类处理. 常 ...

  6. merge into Oracle里的 saveOrUapdate

    1.初始数据: SQL> select * from a; ID NAME ---------------------- ---------------------- 1 1 2 1 3 1 4 ...

  7. 分享一个基于web的满意度调查问卷源码系统

    问卷调查系统应用于各行各业,对于企业的数据回收统计分析战略决策起到至关作用.而现有的问卷调查系统大都是在线使用并将数据保存在第三方服务器上.这种模式每年都要缴纳费用并且数据安全性得不到保证.所以说每个 ...

  8. html----h1-6标签

    Html的标题标签h1-h6种选择,从大到小:默认上下margin一样,靠左,不好改变:能用定位改变. 1.<h1></h1> display:block; font-size ...

  9. 用 C# 计算 与 java 一致的unix时间戳 (长时间整形 如:1476956079961)

    背景: 调用java提供接口,需要长时间整形作为验证. 预备知识: 1. java 的 System.currentTimeMillis() 计算的长整型,是从1970年1月1日开始,截止当前的毫秒数 ...

  10. HDU 4455 Substrings[多重dp]

    Substrings Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...