一些easyui组件不生效或者不能取值的问题解释

本文转自http://www.cnblogs.com/iyangyuan/p/3358239.html,工作中遇到了动态添加class样式的问题,看到这篇文章写的很好。特此转发。

这是个小菜在实际工作中遇到的问题,相信很多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。

  总结一下,博主提供了两种方法:一是设置name属性,通过$("input[name=‘mydate‘]").val()取值;另一种是easyui官方的方法:$("#id").datebox(‘getValue‘)也可以取值。

说了这么多,貌似还没有进入正题,读者应该也能体会到,在某个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方法是有返回值的,返回的恰恰就是刚刚插入的对象。我们拿到这个对象,单独对它进行渲染,这样既可以实现动态渲染,又能避免影响其它组件。

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

  再来总结一下,解析所有页面:$.parser.parse();  解析指定节点:$.parser.parse(‘#cc‘);  前提是该节点为父节点,这样可避免重复渲染其他easyui组件,影响取值。

时间: 2024-07-29 09:42:58

一些easyui组件不生效或者不能取值的问题解释的相关文章

easyui select 下拉框的取值和赋值

1.取值 //拍卖管理中示例 function serializeForm(form) { var obj = { auclotType : $('#auclotType').val(), goodsName : $('#goodsName').val(), stage : $('#stage').combobox('getValue'), isPublished : $('#isPublished').combobox('getValue'), status : $('#status').co

easyUI中datetimebox和combobox的取值方法

easyUi页面布局中,查询条件放在JS中,如下 <script type="text/javascript"> var columnList = [ [   {    'id' : 'applyStartTime',    'text' : '申请开始时间',    'type' : 'datetimebox'   },   {    'id' : 'applyEndTime',    'text' : '申请结束时间',    'type' : 'datetimebox

jQuery EasyUI DataGrid Checkbox 数据设定与取值

$('#dg').datagrid({ title: 'CheckBox Selection on DataGrid', url: 'datagrid_data3.json', width: '700', rownumbers: true, columns:[[ { field:'ck',checkbox:true }, { field: 'productid', title: 'productid' }, { field: 'productname', title: 'productname'

easyUI组件datagrid的二次封装

项目中经常用到easyUI的组件datagird,每次重复的属性写很多(copy-paste),架构师把这活安排给我了,苦逼.. 项目是后台系统,表格行的增删改查几乎都有,有些需求还包括排序,所以写了个函数注入方法,extend默认的row方法, 代码包括两部分(函数inject 和 set datagrid ). (function ($) { var extendFns = {}; /** * 注入函数 * fnName:函数名称,必填: * fn:函数实体,必填: * isGlobal:函

Navi.Soft20.WebMVC4操作手册(含EasyUI组件源码)

阅读导航 Navi.Soft20.WebForm操作手册http://www.cnblogs.com/xiyang1011/p/4049711.html Navi.Soft20.WinForm操作手册http://www.cnblogs.com/xiyang1011/p/3972118.html Navi.Component.工作流开发手册(含示例)http://www.cnblogs.com/xiyang1011/p/3820038.html Navi.Component.DataWindow

EasyUI学习总结(五)——EasyUI组件使用

EasyUI学习总结(五)--EasyUI组件使用 一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示: 使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程序为例讲解EasyUI组件的使用 二.EasyUI组件的使用 2.1.创建测试的JavaWeb项目 2.2.编写测试代码 编写一个用户登录页面Login1.html,用于输入用户名和密码进行登录,使用JQuery的ajax方法异步提交表单 Login1.html的代码如下: 1 <!DOCTYPE

框架 day33 Hibernate,组件映射,继承映射,抓取(检索)策略-优化,检索方式总结

组件(组成)映射 例1: public class Person { private Integer pid; //OID 值 private String name; //第一种方案 private String homeAddr; private String homeTel; private String companyAddr; private String companyTel; ↑一般项目都都采用此方案() *通过面向对象角度,使用设计模式(组件|组合),将数据都抽取到一个对象中.将

easyui组件解析的实现思路

1. 每一个easyui组件都有一个以其组件名称命名的函数例如:linkbutton: 这个函数的功能有三部分: $.fn.linkbutton = function(options, param){ // 第一个功能:这个函数可以接受一个字符串参数,这个字符串参数通常就是 // 这个组件所提供的函数的名称,通过下面的代码就实现了,对该函数的调用 // 其实这里可以这样实现的原因是,js 不是一种强类型语言,所以他不会检查函数传递参数的类型.这就给函数传递的参数的作用可以动态变化. ??????

web项目添加easyui组件报错

创建web项目添加easyui组件到webRoot下后整个easyui组件报错 出现x的原因是eclipse检查了压缩版的jquery.min.js,而压缩版的语法格式很紧凑,eclipse反应不过来报错 可以右键easyui---->myeclipse---->exclude from validation  忽略报错就可以了,不影响组件的使用 原文地址:https://www.cnblogs.com/naidi/p/10477801.html