在日期输入框中添加日历控件,是一种非常流行和实用的做法。临渊羡鱼不如退而写代码,今天就看看在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. 汇总#pragma用法

    这几天忙着去复习了,但是心理总是不踏实,不到实验室里就觉得一天的生活变了个样,现在还是晚上来这里“搞起”吧,白天还是在复习准备考试.因为要开始学习freescale,准备明年的比赛了,觉得是时候开始搞 ...

  2. 最长非降/下降子序列问题(DP)(待续...)

    注意:抽象成以下描述即为最长非降/下降子序列问题(一维状态) 问题描述:在一个无序的序列a1,a2,a3,a4…an里,找到一个最长的序列满足:(不要求连续) ai<=aj<=ak…< ...

  3. hdu 3622 二分+2-SAT判定

    思路:如题 #include<iostream> #include<algorithm> #include<cstring> #include<cstdio& ...

  4. poj 3155 最大密度子图

    思路: 这个还是看的胡伯涛的论文<最小割在信息学竞赛中的应用>.是将最大密度子图问题转化为了01分数规划和最小割问题. 直接上代码: #include <iostream> # ...

  5. asp.net微信支付打通发货通知代码

    上次遇到微信支付,发货接口的时候,官方的demo也没有提供相应的代码 ,因本人技术有限,百度 google 很久都没有asp.net 版本的,最后只好硬着头皮自己搞,没想到官方文档也是错的. 我这一步 ...

  6. C#算法基础之快速排序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Android中SurfaceView的使用详解

    Android中SurfaceView的使用详解 http://blog.csdn.net/listening_music/article/details/6860786 Android NDK开发 ...

  8. firebug调试js时提示调试器未激活处理办法

    firebug是web开发中最常用的分析调试软件,不过我今天使用在调试百度在线编辑器UEditor时一直提示调试器未激活. 从使用经验来看不应该啊,我都下了断点了为什么会提示调试器未激活呢!多次载入网 ...

  9. Contoso 大学 - 使用 EF Code First 创建 MVC 应用

    原文 Contoso 大学 - 使用 EF Code First 创建 MVC 应用 Contoso 大学 Web 示例应用演示了如何使用 EF 技术创建 ASP.NET MVC 应用.示例中的 Co ...

  10. javascrip笔记——图片加载

    var t_img; // 定时器 var isLoad = true; // 控制变量 // 判断图片加载状况,加载完成后回调 isImgLoad(function(){ // 加载完成 }); / ...