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

这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下。

这个问题要从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方法是有返回值的,返回的恰恰就是刚刚插入的对象。我们拿到这个对象,单独对它进行渲染,这样既可以实现动态渲染,又能避免影响其它组件。

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

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

时间: 2024-10-25 10:21:46

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

基于Vue的SPA动态修改页面title的方法

最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点:App.Vue默认的e

微信小程序——动态修改页面数据及参数传递

动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:function(

微信小程序动态修改页面标题setNavigationBarTitle

1.可以在对应的json文件里面写: { "navigationBarTitleText": "你好" } 但是这个问题有bug,在点击切换的时候,立马更改了title,但是也没还在先前的页面 优化: 在 onReady: function () { wx.setNavigationBarTitle({ title: '图像描述' //页面切换,更换页面标题 }) } 原文地址:https://www.cnblogs.com/yuan-luo/p/9101737.h

动态修改页面标题title

原生js: document.getElementsByTagName("title")[0].innerText = 'innerText我是原生js方法'; document.title = 'title我是原生js方法'; jquery: $('title').html('html我是jq方法'); $('title').text('text我是jq方法'); 原文地址:https://www.cnblogs.com/douyafei/p/11023691.html

easyui datebox范围设置日期对比参考 和easyui的datebox怎么禁止手动输入

今天的两个问题都是通过百度解决.百度大法好啊,没事多百度多谷歌,程序员自我学习之道! 首先,如何让easyui的开始日期在结束日期之前.有2个datebox,一个是开始日期,一个结束日期,结束日期要大于开始日期,那么需要自己写逻辑代码来实现,不能控制datebox的选择范围,只能重置. 代码: <script>        function onSelect(d) {        var issd = this.id == 'sd', sd = issd ? d : new Date($(

自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现. 实现原理 1.除第一张图片外,其余图片全部隐藏,4张图片重叠起来. 2.导航按钮添加mouseover和mouseleave事件. 3.设置interval函数,启动定时器调用ShowImg函数. 4.动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属

springboot动态修改日志级别+权限认证

1. springboot动态修改日志级别+权限认证 1.1. 需求 网上找到的动态修改日志级别的方式,基本都是没有权限验证的,或者特地关闭权限验证,但也没给出加上验证的解决方式 修改日志等级也是一个敏感操作,最好不能暴露地址直接修改,所以我研究了下,把权限验证加上了 1.2. 解决 1.2.1. pom 首先加上pom <dependency> <groupId>org.springframework.boot</groupId> <artifactId>

js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】

一个老项目中,一个jsp文件中有很多个js文件, 现在要在页面上的一个地方判断一个状态,因为一直找不到原来是在哪里修改的那个状态,所以决定不找了,而是在比较靠前引入的一个js中定义一个全局变量,然后在这个js的 $(function(){}} 方法中通过一个ajax向后台获取正确的状态,然后在所有的js都加载完之后根据全局变量的值的状态来修改页面上的逻辑. 但是发现,全局变量被一个外部js修改赋值后,我在jsp页面的最下面居然取不到修改过的值. 请教同事才发现原来原因是 任何一个js文件中的 $

js 动态修改css文件

_.find(document.styleSheets[4].cssRules,function(cssRule){ if(cssRule.selectorText && cssRule.selectorText.indexOf(".navbar-fixed-top2")>-1){ cssRule.style.position=""; cssRule.style.top = "0px"; } if(cssRule.selec