jquery与jqueryeasyui部分基础内容总结

1 / 20 jquery 与 jqueryeasyui 部分基础内容总结 1 概述 本文档内容包括 easyui 的引入和 easyui 的使用实践，编写该文档的目的，其一是为了下次再使用 easyui 的时候，有章可循，提高开发效率；其次记录使用过程中遇到的一些关键的问题，供自己和其他的同学参考。 2 EasyUI的引入说明 Jquery 库引用 EasyUI 中自带了 Jquery 的库，版本是，请注意该版本不一定适用于你的项目场景，关于对 IE 浏览器的支持也是每一个开发人员需要注意的。 Jquery 支持 IE9+。 最新的不一定是最好的，有时候，请果断更换你的 jquery2 / 20 版本。 还有一点注意的是，项目中通常不会只有一个地方使用jqeury，使用 easy ui时，使用项目中统一的 jquey 版本库，也不失为一种好的方案。 关于 easyui 包目录结构调整说明 通常从 jquery-easyui官网中下载下来的包，是一 个相当完整的包：其目录结构如下： 其中： ? demo目录是 easyui使用示例； ? locale 目录是国际化支持； ? src 目录是部分 easyui插 件的源码； ? plugins 目录是 easyui使用的插件； 3 / 20 ? themes 目录包含多套 easyui可使用的主题。 通常在项目中使用的话， demo 目录、 src 目录可以不 用，locale 可以去除没用的 js库，主题如果只使用默认的主题，也可以去除不用的主题。项目中，清理后的 easyui 目录结构参考如下： 其中 extends 目录是项目中，基于 easyui 框架做的一些扩展。 使用 easyui 需要引用的 js和 css 这次项目中主要为了使用 easyui的 datagrid 控件，才引入了 easyui 框架。由于不同的模块都会使用的 easyui，所以把 easyui相关的 js和 css 统一放到了页面中，页面的内容如下： Js和 css文件说明： ? 是 easyui 框架的主样式； ? 是 easyui 中用到的图标的样式； 4 / 20 ? 是 easyui 使用的基础； ? 是 easyui 的核心 javascript 库； ? easyui-lang-zh_是 easyui 对中文的国际化支持； ? 和是项目中使用到的两个扩展 js 库。 3 关于easyui 控件的使用 easyui 库作为一个相对成熟的 js 前端框架，提供了非常丰富的 UI控件，包括 form表单控件、 layout布局控件、 gird控件等等。 这里对使用 easyui 控件过程中的一些注意事项进行说明。 控件组成部分 每一个 easyui 控件通常都是由属性、事件和方法这些组成部分。 控件自身用到的信息可以通过属性存储，控件可以利用某些5 / 20 属性完成特定的操作；控件基于事件驱动，开发人员可以在控件初始化的时候，为控件绑定一些特定事件； easyui为每个控件提供了操 作控件相关内容的函数，每个函数对应特定的功能。下面是一个简单的例子： 上面列出了 form控件的属性列表和事件列表。 小贴士：对控件属性、事件、方法的理解，可以参考 HTML的 input 元素。 控件的继承特性 在 easyui 中使用了继承特性，在定义了一部分基础控件的基础上，可以扩展出功能更完善的控件，比如：基于 combo的扩展 combotree、 combogrid、 combobox，基于panel的扩展有 tab、 layout、 Accordion 等。 Easyui 控件的继承特性，在父控件中定义的属性适用于子控件，比如有这么一个业务场景， combobox中输入框默认是可以编辑，在我们的业务上需要屏蔽对 combobox的编辑功能。6 / 20 针对刚才的业务场景，我们去查看 combobox 的属性，但是在 combobox 的一堆属性中没有一个可以用于控制输入框的编辑性。不过由于 easyui 控件拥有继承特性，父控件中定义的属性适用于子控，所以可以查看 combobox 继承了哪些控件， API告诉我们 combobox 继承了 combo 这个控件，同时combo的属性中有 editable 这一项，专门用于控制编辑框的可编辑性，所以 easyui 控件的继承特性很好的解决了我们项目中遇到的问题。 对于控件的继承特性中，属性的继承是用得比较多的，关于事件和方法的 继承，个人觉得是支持的，不过没有实践。 调用控件的方法 Easyui 控件在初始化之后， javascript 语言中对控件的操作通过控件相关的方法完成。 下面通过 combobox 控件来说明怎样来调用控件的方法： 修改控件的属性 7 / 20 Easyui 中控件初始化时，所有的初始化信息都存储在一个javascript 对象中，基本上所有的控件都提供了一个方法“options” ，通过这个方法可以获取到这个对象。下面的例子是修改 datagrid 控件的 url属性： 说明： easyui控件的属性都可以作为 options的属性来操作，达到修改的目的，特别说明，对 datagrid 控件的 url 属性的修改会触发一次 datagrid 的远程调用。 控件事件的注册 Easyui 控件支持事件，当相应的操作触发时，可以调用特定的函数，完成自定义的处理动作。 下面的几个例子用来说明怎么注册： jQueryEasyUI 使用总结 1. jQueryEasyUI 动态添加控件或者 ajax加载页面后不能自动渲染问题的解决方法： 我们之所以在页面中，只要书写相应 easyui 的 class， Easyui 就能成功渲染页面，这是因为解析器在默认情况下， parser会在文档装载完成的时候 ($(document).ready)被调用一次，而且是渲染整个页面。 8 / 20 然而当页面装载完后，如果用 javascript 生成的 DOM 中包含了 Easyui 支持控件的 class，比如说，用 javascript 生成了以下代码： data-options=iconCls:icon-searcheasyui 虽然页面上有这样的 DOM 了，但是没有被渲染为 Easyui 的linkbutton 插件，原因是 Easyui 并不会一直监听页面，所以不会主动渲染，这时候就需要手工调用 Easyui 的 parser进行解析了。 手工调用需要注意以下几点： 解析目标为指定 DOM的所有子孙元素，不包含这个 DOM自身： 比如上面代码生成的 HTML， id=tt是我们想要的LinkButton，像下面代码去手工解析的话是得不到你想要的结果的： $.($(#tt); 道理很简单， parser 只渲染 tt的子孙元素，并不包括 tt自9 / 20 身，而它的子孙元素并不包含任何 Easyui支持的控件 class，所以这个地方就得不到你想要的效果了，应该这样写： $.($(#tt).parent(); 渲染 tt 的父节点的所有子孙元素就可以了，不管你的javascript输出什么 DOM，直接渲染其父节点就可以保证页面能被正确解析。 2. 解决 EasyUI窗体阻止控件事件代码： 原因是窗体内的控件不在 form表单中了，无法渲染为控件，所以 我们要手动给这个 id=dialog的窗体放到 form表单中 $(#dialog).parent().appendTo($(form:first) 3. 如何让 EasyUI 弹出窗体跳出框架： 只要在最外面的框架页面加个 div，然后用的 id就可以的。但是必须得弹出框得是一个页面。 /父页面代码 10 / 20 /子页面代码 /外层弹出框 1 functionopenFirstWin(url, title, width, height) varstrWidth; varstrHeight; if (width = null) strWidth = 800; else strWidth = width; if (height = null) strHeight = 500; 11 / 20 else strHeight = height; if (url != null) /var content = ; var content = createIFrame(url); parent.$(#div_info).window( close: false, modal: true, draggable: false, title: title, animate: true, 12 / 20 content: content, minimizable: false, width: strWidth, height: strHeight, top: (parent.$().height() - height) * , left: (parent.$(window).width() + 200 - strWidth) * ); returnfalse; (id值 ).value=$(#id 值 ).val() 13 / 20 上面的例子就是 js和 jquery的区别，都是通过 id值 获取信息。左边是 js写法，右边是 jquery写法 你可以把 jquery 理解成 js的封装，使 js更加简洁，快捷。它把相同的操作封装起来，使用的时候直接调用。 使用 Jquery 可以使代码更加简洁，不用考虑兼容性。使用原生 javascript 的话就比较繁琐了 jquery-easyui是一个基于 jquery 的图形界面插件，你想隔着 jquery 去学 jquery-easyui 是很困难的，只有你会jquery，才能学习 jquery-easyui，他们之间是一个依赖关系，不是独立的。 Jquery EasyUI 的添加，修改，删除，查询等基本操作介绍 作者： 字体： 增加 减小 类型：转载 初识 Jquery EasyUI 看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例 14 / 20 初识 Jquery EasyUI 看了一些博主用其开发出来 的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。写了一些基本的增删改查功能，算是对该控件的基本入门。后续有时间继续深入学习。 在学习 jquery easyui 前应该先到官网下载最新版本/download/ 先看一下运行后的页 面 1、列表展示 2、新增页面 3、修改页面 把 jquery easyui 下载好之后，一般引用下页几个文件 复制代码 代码如下 : rel=stylesheet type=text/css / 15 / 20 href=/Resources/easyui/js/themes/default/ rel=stylesheet type=text/css / /页面图标样式 href=/Resources/easyui/js/themes/ rel=stylesheet type=text/css / src=/Resources/easyui/js/ type=text/javascript /jquery easyui 主要的 js src=/Resources/easyui/js/ type=text/javascript 首先是列表展示数据 复制代码 代码如下 : url=/GetJson/ toolbar=#toolbar pagination=true rownumbers=true 16 / 20 fitcolumns=true singleselect=true 编号 卡名 密码 创建时间 创建人 17 / 20 jquery easyui是用 datagrid对数据进 行展示的，所以 class要选择 easyui-datagrid； url 是本列表的一个 json 格式的数据来源 toobar后面跟着的 #toobar是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。 pagination 是否显示分页， rownumbers 显示行数，分页时向后台传去两个参数，一个就是当前