jquery easyui小记

1.今天在使用 easyui 排版页面的时候，使用了easyui-tabs，与以往不同的是，直接用在了 body 标签上，一开始的时候，页面显示没什么问题，可是过了一个小时后，谷歌浏览器和火狐下面均无法正常显示页面，逆天的是，神奇的 IE8 居然显示了~~~~~~~~

这个问题耗费了我将近 2 个多小时的时间，使用各种CSS都没有搞定，以前觉得非常好用的overflow:auto;min-height:10px;height:auto;也失效了。最后的解决办法很苦逼。把内容包裹在一个 div 标签中，刷新页面就 OK 了，~ ~ ~

2.linkbutton 可以在 HTML 标记中直接创建，不必指定一个 ID 然后在初始化函数中执行，因为 linkbutton 中也没什么要定义的，除了一个图标类（iconCls），另外，linkbutton 的方法 enable 和 disable 有点搓，当 disable 的时候，按钮仍然可以通过点击出发事件…………这个需要自己封装一下

3.使用 javascript 实例化easyui组件的时候，实例化之后返回之前的jquery对象，但是如果调用它的方法，就不返回jquery对象了

4.初始化 combobox，可以在$(selector).combobox({...}) 之后直接调用 combobox('select', value)来显示指定的条目，select 方法会触发 onSelect(rowData) 事件，选中某条目之后，选择器所代表的表单元素并没有拥有选中的值，此时需要在 onSelect 中处理一下，不然白选，一个例子：

 1 $(selector).combobox({
 2     textField: 'xxxxxxxx',
 3     valueField: 'xxxxxxxxx',
 4     url: 'xxxxxxx.php',
 5     onSelect: function(row) { //此回调函数中的this对象并不指向$(selector)
 6         var valueField = $(selector).combobox('options').valueField;
 7         var value = row[valueField];
 8         $(selector).val(value);
 9     }
10 });

 

在非combobox元素上面调用 combobox 的方法，会报错，形如：TypeError：$.data(xxx, "combobox").xxxxx

在任意非 jquery easyui 元素上调用 easyui 元素专有方法，都会报错，就是：TypeError: $.data(tag, easyuiElement).method

使用 loader(params, success, error) 可以重新定义从服务器获取数据的过程，这里可以修改来自服务器端的数据，修改之后传递给 success 参数

5.messager 中的方法貌似都是单例的，比如 $.messager.progress()开启之后，必须使用 $.messager.progress('close') 来关闭，此方法无返回值。

6.datagrid 中如果字段指定了宽度或者没有指定，当内容超出单元格大小后会被隐藏，给字段指定 align:true 可以让单元格宽度根据内容自适应，也可以在 onLoadSuccess 中调用 datagrid('autoSizeColumn') 实现。使用 LoadFilter 可以在显示数据之前修改来自服务器端的数据，修改之后，datagrid 会显示修改之后的数据，loadFilter 一定要返回修改之后的值，否则会报错。

7.如果 easyui 组件的中有 formatter 属性，那么就可以定义一个函数返回一个 HTML 片段格式化要显示的内容，形如：formatter:function(){return '<a href="#">nimeide</a>';}

8.easyui 中的布局组件都有 resize 方法，当这些组件 fit=false 时，可以调用它们的 resize 来重新调整大小，调用的时候，自顶向下，先调用父组件的 resize，再调用子组件的 resize，调用 resize 可以让组件充满父容器（默认情况），父组件没有 resize 的时候它的大小是没有变化的，这时候调用子组件的 resize 得到的结果跟自身的大小是相同的，所以没有任何效果。

9.easyui 中的布局组件貌似默认大小都是0？所以要么定义 fit=true，要么指定它的 width, height。为了确保最终的显示效果，可以先定义一系列的 div 搭建页面框架，保证页面的整体骨架，在这些 div 内部，使用布局组件作为它们的子元素，并且 fit=true

10.panel 的 extractor 方法可以修改来自服务器端的数据，同样，修改之后必须返回

11.datagrid 的 toolbar 如何自适应大小？toolbar最好是块级元素(form 会导致分页条无法显示)，块级元素默认就是横向铺满的，纵向需要在 overflow 的时候 visible。万金油 toolbar 自动高度：overflow-y:auto;height:auto;

12.使用 easyui form 组件的时候，不要根据 input 的 ID 直接 $(ID).val() 获取值，这样在某些情况下会失效，直接使用这些组件对应的方法，如：getValue 等

13.仔细看一下 datagrid 的 dom，会发现很多东西，每一行（tr）都有一个 datagrid-row-index 属性，可以拿到这个 index 然后 $(grid).datagrid('getRows')[index] 就可以拿到这一行对应的数据了

14.貌似 window 使用的时候都是初始情况下不显示，触发事件之后显示，初始不显示可以使用 closed=true 实现，需要显示的时候可以 $(window).window('open');对应的，关闭窗口：$(window).window('close')

15.把 validatebox 等元素放在 window 里面的时候，当窗口关闭但是 validabox 验证未通过时，你会看到 validatebox 的验证提示还存在（一般在左上角），这时候使用 form.reset() 就 OK 了，不过要保证 validatebox 是在 form 里面的（dom 里面的 form.reset() 方法使此 form 下所有 input 为初始状态）。

16.调试 datagrid 的时候，如果没有适合的现成 url 可以提供数据，可以自己写一个符合 datagrid 数据格式的对象，然后使用 $(grid).datagrid('loadData', data) 加载

17.显示普通的消息，$.messager.alert 足以解决了，如果你想要达到一些更酷的效果，可以使用 $.messager.show()

18.如果希望在 datagrid 里面编辑数据，可以再定义字段的时候加上 editor 属性，这个默认的一般可以满足。但是我遇到了一个变态的问题，当前行里面的列不总是需要编辑的，比如说，有用户名密码两列，编辑的时候如果密码非常简单则编辑密码，相反就不让编辑。这个问题就有些棘手了，后来我发现动态更改列选项中的 editor 属性就可以动态的启用/禁用编辑器，代码如下：

1 var fields = grid.datagrid('getColumnFields'); //获取所有使用的字段
2 var colOpt = grid.datagrid('getColumnOption', field); //获取列选项
3 colOpt.oldEditor = colOpt.editor; //备份原有编辑器
4 colOpt.editor = null; //禁用编辑器
5 colOpt.editor = colOpt.oldEditor; //启用编辑器

19.在 jquery easyui 元素上编辑样式是不推荐的，因为你的样式很可能覆盖了 jquery easyui 自己的样式，于是显示效果就崩溃了，特别是按钮，按钮下面的 span 样式非常容易就被改掉了

20.很多 jquery easyui 元素都有默认的边框，当这些元素堆积在一起的时候，边框重叠显示效果非常不好，所以不需要的地方都加上 border=false 吧

--------------------------------------------下面是原稿，但是觉得漏洞太多--------------------------------------------

    去年11月份做后台管理系统，用到了 jquery easyui 框架，项目在去年年前就完工了。现在时间已经过去几个月了，一直没有做下总结，既然说要开博了，索性就从 jquery easyui 开始吧。总体来说，这个框架还是可以的，虽然有一些小问题，但是也不影响，有 bug 的地方稍微变通一下就可以解决。我使用的 jquery easyui 版本是 1.3 现在有没有更新已经不知道了，很久没用了，但是一些东西还是记得的。

    jquery easyui 提供了一组控件集合，主要包括这么几个部分：面板，form 控件集，按钮，grid。先说面板吧，所有面板组件都基于 panel ，panel 的功能其实算是相当强大的，你可以这么理解 panel ，一个 panel 就像一个 windows XP 桌面上的窗口，有一个标题，几个按钮（最大化，最小化，关闭等），然后加上一个内容区域，根据你的需求，你可以你舍弃标题，按钮等，这些都是小case，很容易做到。默认情况下，一个 panel 的高度和宽度需要你手动设置，否则你看不到任何效果，一个特殊的情况是，宽高的值不仅仅可以是数字，也可以是‘auto’，试一下吧！我刚才说过 panel 是很强大的，但是如果你只是看 panel ，我想你看不出什么名堂，panel 的强大体现在它的子组件中：tabs, layout, window, dialog, messager. tabs组件允许你以类似于浏览器标签的方式管理内容，这里说一下我遇到过的问题，tabs组件最好直接添加 fit = true ，因为需要用到tabs 的地方基本上都是占据了整个父容器（至少我是这样的），如果你的 tabs 占据了整个 body 区域的，最好不要直接在 body 上面添加 easyui-tabs 类，因为这样会照成一些莫名其妙的 bug，我曾经就遇到，后来在 body 下面建立一个 div，让它应用 easyui-tabs 类就 OK了。下面说第二个面板组件 layout ，layout 个人不太喜欢，非常重量级，有内容发生变化时感觉非常慢，通常布局很少会用到这么东西南北中型的，上下型的直接写 div，默认就是从上到下，左右型的，用 div 搭骨架，然后把这些div float:left就行了，曾经有个同事，只要是布局就直接 layout 或者 table ，看它的代码看的我非常头疼。如果你打算 使用 layout 组件，请确保你的各个 region 都是写的正确的，否则你会很难受的，另外，layout 在浏览器窗口缩放的时候需要做控制，否则它可能不会跟着浏览器窗口一起变大变小。接下来说window，dialog，这两个组件差不多，不挑剔的话随便用，默认情况下，如果你移动window组件时，就算你移动到了浏览器视口区域之外，它也是允许的，但是这样一来，如果你把标题部分移到你看不到的位置并松开鼠标，你就悲剧了，你会发现你无法再次移动它，我当初就遇到了这个问题，后来在 onMove 事件中做了限制，才解决，这里有必要说一下，onMove 是从 Panel 继承过来的事件，如果你要对所有的 window 组件做限制，就覆盖 window组件的 onMove 方法，覆盖 panel 或者 dialog 的 onMove 没有任何效果。

 

    接着说 form 控件集。这个form 控件集还不错，提供的一些组件非常有用，特别是 validatebox,你可以根据自己的需要编写很多的验证方法，不要指望它自己会提供，默认 easyui 值提供了email，url，length，实用性都不是很大，所以自己动手丰衣足食吧。form 里面的控件都有这样一个特点，获取和设置值都要通过 easyui 自己的 API 来操作，比如：<input id="ttt" type="text" name="username" class="easyui-datebox"/>,当你选择好日期之后，如果你使用 $("#ttt").val() 获取选择后的时间，那么你就错误了，你根本拿不到，想要拿到就必须 $("#ttt").datebox('getValue') ，为什么会这样呢？你可以使用 firebug 等工具打开页面看一下，你会发现你原来写的那么多 input 都被隐藏了，取而代之的是一个个 jquery easyui 的组件，它们负责显示，和你交互。

 

    说下按钮吧，其实按钮的东西非常简单。需要说明的是按钮提供了 disable 方法，但是这个disable 徒有其表，却无其神，当你 disable 一个按钮的时候，点击按钮，onclick 事件依然会被触发，所以这个需要你自己在事件处理里面做一下判断。还有，按钮没必要放在js里面单独 $(selector).linkbutton({...})，因为按钮的配置本来就很少，就一个 iconCls, 直接放在html里面写完算了，

 

    最后说 grid，grid 里面常用的就是 datagrid 了，这个东西非常强大，我的项目中 50% 以上的界面都是它。使用datagrid 的时候最好直接在 js 里面做，因为在 html 里面写的时候，你必须把 thead, th 给写齐了，否则 jquery eaysui 不认。datagrid 里面非常重要的就是 toolbar，所有的操作都集中在这里，如果你仅仅需要简单的 toolbar，那么官方例子就够了，如果你要自定义 toolbar, 包含有 coombox， datebox， linkbutton 等的时候，最好单独写一个 toolbar ,写 toolbar 有一个需要注意的地方，你需要写好 toolbar 的高度，否则你看不到任何效果，因为 toolbar 默认高度是0，但是如果是固定 toolbar 的高度修改的时候很麻烦，这时候可以给 toolbar 添加这样的style：height:auto;min-height: 28px; 这样一来，toolbar 的高度就是自动高度了，后面的 28px 是 toolbar 的默认高度，你可以根据你自己的需要修改。还有一个问题，toolbar 的代表元素可以是 div ，不可用 form ，我以前用 form ，后来出现了一些莫名其妙的问题（问题本身已经不可以追究了，忘了）。toolbar 的问题搞定，剩下的就是数据了，可以在 loadFilter 里面修改数据，但是修改完成一定要返回修改后的值，显示单元格数据的时候，通过给列添加 formmater 函数属性，可以更改显示的效果。datagrid 最好添加 fit=true，这样浏览器更改大小时可以跟着缩放。

 

    以上都是一些经验之谈，没有说代码该如何如何写，如果你有不懂得问题，可以留言，我会尽快回复你的。

 

转载于:https://www.cnblogs.com/aaronzhang/archive/2013/04/26/3043877.html