这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值!

     经过度娘的帮助,发现可以用$("#id").datebox('getValue'),但是这是为什么捏?

     经过一翻研究和探索,小菜发现,如果一个input加上class="easyui-datebox",也就是声明在此文本框上边使用datebox组件,那么经过EasyUI引擎的扫描,会自动为此文本框加上各种样式,与此同时,EasyUI去掉了此文本框上的id和name属性!最后,它会在此文本框的附近,添加一个隐藏的文本框,这个文本框的name和原来文本框的name一样,id属性直接丢掉。。。。这个隐藏文本框的值,才是咱们看到的日期。如图:

 

 

这下读者应该明白,为什么$("#id").val()拿不到值,因为原来文本框的id属性已经被拿掉,新创建的隐藏文本框也没有id属性,所以拿不到值,可以通过官方的给出的$("#id").datebox('getValue')弥补(具体人家怎么拿到的,小菜也不懂呀)。

     但是,这仅仅是用id选择器的情况,别忘了还有name,我们可以通过$("input[name='mydate']").val()这种方式获取文本框的值。

     因此,如果不想用$("#id").datebox('getValue'),那么就别加id,或者说别用id选择器,给文本框加一个name属性,很轻松的就拿到值了。

     另外,补充一下,如果用的标签选择器,也就是用的name属性,然后又用.datebox('getValue')去拿值,那么会报错哦。。。例如:$("input[name='mydate']").datebox('getValue'),会报TypeError: $.data(...) is undefined。

     说了这么多,貌似还没有进入正题,读者应该也能体会到,在某个input标签上添加class="easyui-datebox",它就能自动变成日历,这其实是EasyUI扫描的结果,在网页加载完成后,相当于在$(document).ready()事件中,对整个网页进行了一次扫描,发现某个input标签含有class="easyui-datebox"属性,就做上边讲到那些处理,不仅仅是EasyUI如此,几乎所有的UI都是这个原理。

     因此,如果我们用什么append、appendTo方法动态在页面中插入一段html代码,或者用什么addClass方法给input标签动态添加一个class属性,这些操作EasyUI是不知道的,所以新插入的这些东东,即使有class="easyui-datebox"属性,但没有任何效果。

     如何通知EasyUI呢?通过查询资料,发现网上比较流行的一种方法是用:$.parser.parse()。一般像我这样的小菜可能就直接拿来用了,把它放在插入html的语句之后,重新渲染界面,果然很管用,新加入的元素能被识别。

     但是,小菜很快就发现一个问题,由于使用了$.parser.parse()对整个页面重新渲染,这会影响到以前已经渲染过的组件。

     举个例子:页面原本有一个使用了datebox组件的input标签,用户通过datebox组件选择了时间,然后用户又新增了一个使用datebox组件的input标签(这时候程序会重新渲染页面),奇怪的事情发生了:原来的input标签明明已经选过时间,显示的也正常,但却拿不到值!

     根据小菜的想法,原因正是出在$.parser.parse()上,由于它对整个页面进行渲染,以前正常的组件也被渲染了,相当于所有的组件进行了一次“初始化”,最终导致值丢失。

     再仔细问问度娘,发现$.parser.parse()是可以带参数的,参数意思差不多就是传入一个局部的DOM对象,只对局部进行渲染,避免影响其他组件。

     举个巧妙的应用例子:

     var targetObj = $("<input name='mydate' class='easyui-datebox'>").appendTo("#id");

     $.parser.parse(targetObj);

     我们常常会通过appendTo方法把使用了datebox组件的input标签插入到某个DOM中,别忘了appendTo方法是有返回值的,返回的恰恰就是刚刚插入的对象。我们拿到这个对象,单独对它进行渲染,这样既可以实现动态渲染,又能避免影响其它组件。

     因此,在读者的项目中,最好使用局部渲染(无论用何种方法得到目标对象),避免使用全局渲染。

     好啦,小菜的教程就写到这,希望对大家有所帮助,高手勿喷~

 

 

问题1:

纠结了很久,一直没得到有效值。

begin 本来应该得到的值 “2015-2-10”

但是console.info出来的值为 2003 ,

所以使用了笨办法,组装。

结果是因为“-”没有转义“\”

 

 

 

参考:http://www.cnblogs.com/iyangyuan/p/3358239.html

JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

EasyUi–8.datebox赋值的问题的更多相关文章

  1. EasyUi–8.datebox赋值的问题

    这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$(" ...

  2. EasyUI修改DateBox和DateTimeBox的默认日期格式

      最近整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类 ...

  3. EasyUI改动DateBox和DateTimeBox的默认日期格式

    近期整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是 ...

  4. 给EasyUI的DateBox控件添加清除button

     EasyUI中间DateBox控制甚至没有被清除button.例如下面的附图: 真是不可思议,对于要求日期格式必须选择的情况下,不能清空日期,很不方便.      尽管能够通过手工改动EasyU ...

  5. Jquery EasyUI Combotree 初始化赋值

    Jquery EasyUI Combotree 初始化赋值 ================================ ©Copyright 蕃薯耀 2018年5月7日 https://www. ...

  6. [转][EasyUI]扩展 DateBox

    /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.ext ...

  7. easyui的datebox只显示年月

    要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就 ...

  8. 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件

    jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...

  9. easyui的datebox最简单的方法来格式化

    看了网上有很多解决方案,我也写了一个比较简单的方法. 实现easyui的datebox格式化. 效果例如以下.用"++"隔开,看你喜欢用什么都能够. 1.html <span ...

随机推荐

  1. oracle with as 用法

    http://blog.itpub.net/28371090/viewspace-1190141/

  2. OSI参考模型与TCP/IP协议模型

    OSI和TCP/IP都是为了计算机之间更好的互联的. 计算机网络是一个复杂的系统,比如两台计算机进行通信不仅仅只是有一条通信线就可以了. 还有很多的工作需要完成,例如: 如何知道对方计算机是否做好准备 ...

  3. fzu2172 字符串dp

    F - 巡了南山我巡北山 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  4. python tkinter用Treeview实现ListView效果

    先上图 再上代码: import ttk from Tkinter import * root = Tk() tree = ttk.Treeview(root, columns=('col1','co ...

  5. 嵌套div中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...

  6. jquery验证手机号码和固定电话号码

    <pre name="code" class="javascript"> //验证手机号码或者电话号码 function checkContactN ...

  7. 【云计算】docker三剑客如何支持分布式部署?

    This blog will explain how to create multi-container application deployed on multiple hosts using Do ...

  8. strcpy C++实现

    #include <iostream> #include <assert.h> using namespace std; char *strcpy(char *strDest, ...

  9. XsltListViewWebPart 和自定义列表视图

    http://msdn.microsoft.com/zh-cn/library/ff806162(v=office.14).aspx

  10. [Linux]yum开启rpm包缓存

    在CentOS下用yum安装,回发现在/var/cache/yum/下的base.extrs和updates下的packages下都没有发现下载的RPM 原来在/etc/yum.conf下没有设置下载 ...