easyui tabs 的href和content属性

众所周知，jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容：“href远程请求”和“content本地内容”，本文就两种方式的优缺点进行简单分析和思考。

两者特点： href方式加载数据的特点：

被加载的页面只有body元素内部的内容才会被加载，也就是jQuery的ajax请求的只是html片段。
加载远程url时有遮罩效果，也就是“等待中……”效果，用户体验较好。
当加载的页面布局较为复杂，或者有较多的js脚本需要运行的时候，编码往往就需要谨慎了，容易出问题，后面会详细谈。

content方式加载数据的特点：

比较灵活，你可以在脚本里面拼写html代码，然后赋值给tab的content属性，不过这种写法会使得代码易读性变差。
可以把iframe赋给content，把一个iframe嵌入也就没有什么不能完成的了。
使用iframe会造成客户端js重复加载，浪费资源，比如说你主页面要引用easyui的库，你的iframe也要引用，浪费就产生了。

简单总结：

根据上面的分析，使用content的方式较为简洁，而且可以引入iframe来搞定一切，缺点也很明显，系统较为复杂的话，将带来极大地资源浪费，只适合较为简单的页面系统；

而href方式则对编码能力要求的稍微高一些，因为html的片段，稍微不注意就会处理不好，不过熟练的话，个人觉得href方式是不二之选。

href常见问题： 1.href只加载目标URL的html片段

这个特性是由jQuery封装的ajax请求处理机制所决定的，所以目标URL页面里不需要有html,head,body等标签，即使有这些元素，也会被忽略，所以放在head标签里面的任何脚本也不会被引入或者执行。

2.短暂的页面混乱：

href链接的页面比较复杂的时候，easyui对其渲染往往需要一个较长的过程，这时候，加载进来的html片段毫无布局可以，过一会自动会好，这时候easyui已经完成对它的渲染。如何避免这个混乱的过程呢，还得靠easyui的一个基础插件——解析器(Parser)。

Parser有个onComplete事件，这个事件就是指easyui对页面完成渲染时触发，这样思路就很清晰了：用一个div遮罩住让被加载进来的html片段，在onComplete事件中，让这个div淡出，这时候渲染好的html片段就能美人出浴了，同时还整了个等待中的效果，一举两得。这样要做两件事：

第一是在要加载的html片段中放一个遮罩用的div：

第二是在被加载的html片段尾部处理相关事件：

需要注意的是，如果多个tab页面都使用了onComplete事件，当前定义的会覆盖之前定义的。其实每次easyui渲染完成均会调用onComplete事件，所以每打开一个包含easyui控件的tab页，onComplete事件就会被调用。

3.html片段的easyui组件相关脚本莫名地报错：

其实这个现象是跟第一个现象的原因一样的，easyui完成对html片段渲染需要一定的时间，页面越复杂，耗时越长，这时候难以避免html存在的脚本存在对easyui某些插件的调用，比如datagrid等，这个时候就会报错，解决方案同上，将这些脚本放到onComplete事件里处理，也就保证了渲染完成前，不会被执行。

4.放在window里面表单验证的提示信息会乱串：

这个现象应该是插件自身的bug，对位置的计算没有考虑到这些特殊的事情，解决方式可以投机取巧，在打开window后，让表单不符合验证的input获得焦点就可以了。

5.两次或者多次加载远程数据问题：

官方已经说明在1.2.5的版本中已经修正了这个Bug，但是还是有不少人反应会出现两次加载远程数据的现象，甚至在1.2.6版本中也会遇到，如果您确实遇到这种情况了，则可能有以下情况造成的：

5.1,自己的代码不严谨造成的，这是比较低级的错误，如果遇到请按照以下两个步骤检查原因：

远程数据返回的数据中是否包含class="easyui-tabs"或者class="easyui-datagrid"这样的样式了，如果有的话，easyui在获取html片段后会自动渲染，这时候已经对远程数据源做了一次请求；
您是否又用javascript去$('#tabsId').tabs({...});或者$('#tabsId').datagrid({...});去绑定事件或者设置属性，其实等于又一次渲染了该应控件，会再次请求远程数据。

为什么会这样，看看源码便知道了：

$.fn.tabs = function(options, param){

    if (typeof options == 'string') {

  //这个地方的分支很清楚，只有当options为字符串的时候，才是直接调用控件本身提供的方法。

        return $.fn.tabs.methods[options](this, param);

    }

//如果options不是字符串，直接构造控件，进行渲染。

    options = options || {};

    return this.each(function(){

        var state = $.data(this, 'tabs');

        var opts;

        if (state) {

            opts = $.extend(state.options, options);

            state.options = opts;

        }

        else {

            $.data(this, 'tabs', {

                options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),

                tabs: wrapTabs(this),

                selectHis: []

            });

        }

        buildButton(this);

        setProperties(this);

        setSize(this);

        initSelectTab(this);

    });

};

所以请大家写代码的时候还是要注意点，有现成的控件方法就用该方法，直接传入对象的话，所有控件都会重新构造的，tabs多次加载的问题大多数就是这么发生的。

5.2,事件冒泡引起的二次加载也是有可能的，详细情况请参照：

http://www.easyui.info/archives/501.html

● AJAX

全文链接

08

【转载】EasyUI 验证框使用方法

missingMessage：未填写时右边显示的信息

validType：验证类型

invalidMessage：无效的数据类型时显示的信息

required="true" 必填项

class="easyui-validatebox" 文本验证

class="easyui-numberbox" 数字验证

1.调用数据验证方法

return $("#form1").form('validate');

示例：

<asp:Button ID="btn_Save" runat="server" Text="保存" OnClick ="btn_Save_Click" OnClientClick="return $("#form1").form('validate');" />

2.验证是否必填

class="easyui-validatebox" missingMessage="xxx必须填写"

3.验证字符串长度

class="easyui-validatebox" missingMessage="xxx必须填写少于10个字符" validType="length[0,2]" invalidMessage="不能超过2个字符！"

示例：

3、验证数字必须是5.5-20之间 precision="2"表示是2为小数

class="easyui-numberbox" min="5.5" max="20" precision="2" required="true" missingMessage="必须填写5.5~10之间的数字"

4、验证必须是日期yyyy-MM-dd（只能选择不可编辑）

$.fn.datebox.defaults.formatter = function (date) {

var y = date.getFullYear();

var m = date.getMonth() + 1;

var d = date.getDate();

return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);

};

$.fn.datebox.defaults.parser = function (s) {

if (s) {

var a = s.split('-');

var d = new Date(parseInt(a[0]), parseInt(a[1]) - 1, parseInt(a[2]));

return d;

} else {

return new Date();

}

};

</script>

class="easyui-datebox" required="true" missingMessage="日期必须填写" editable="false"

//如果需要填写其他格式的类型请自行修改formatter函数

5、验证必须是邮件

class="easyui-validatebox" missingMessage="邮件必须填写" validType="email" invalidMessage="请填写正确的邮件格式"

6、页面时间段判断 name为s1的时间必须大于name为s2的时间 s3必须大于s2

$.extend($.fn.validatebox.defaults.rules,{

TimeCheck:{

validator:function(value,param){

var s = $("input[name="+param[0]+"]").val();

//因为日期是统一格式的所以可以直接比较字符串否则需要Date.parse(_date)转换

return value>=s;

},

message:'非法数据'

}

});

</script>

7、询问对话框提交：

function Confirmbtn(msg, control) {

$.messager.confirm('确认', msg, function (r) {

if (r) {

__doPostBack("ctl00$ContentPH_Main$Button1", "");

//alert('aa');

}

});

return false;

}

OnClientClick="return Confirmbtn('确认吗？', this);

8.

当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules 可以定义一个校验器的功能和无效的显示消息。例如，要定义一个minLength有效的类型：

$.extend($.fn.validatebox.defaults.rules, {

minLength: {

validator: function(value, param){

return value.length >= param[0];

},

message: 'Please enter at least {0} characters.'

}

});

定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：

下面来介绍更多的用法：属性

属性名类型描述默认值

required 布尔定义文本域是否为必填项 false

validType 字符串定义字段的验证类型，比如email, url, etc. null

missingMessage 字符串当文本框为空时提示的文本信息 This field is required.

invalidMessage 字符串当文本框内容不合法时提示的文本信息 null

方法

方法名参数描述

destroy none 删除并且销毁组件

validate none 做验证以确定文本框的内容是否是有效的。

isValid none 调用验证方法并返回验证结果，true或者false

● AJAX

全文链接

08

【转载】Jquery.EasyUI 抽屉控件

<div class="easyui-accordion" fit="true" border="false" id="main_menu">

<div title="信息维护">

<a href="http://blog.163.com/zhchf_52@yeah/blog/#" class="accordion-menu" οnclick="UserClick()" id="miUser">用户维护</a>

……

选择"信息维护"

$("#main_menu").accordion("select", "用户维护");

● AJAX

全文链接

08

【转载】easyui tree展开树节点时自定义向struts后台传递参数（默认是自动传递id）,该

最近项目中用的easyui tree，发现这个插件在展开树节点时，向后台自动传递id参数，为保持以前的开发模式，希望对它的传参模式更改为用户自定义，不知道到大家有做过这样的改动吗？分享一下！

------------------------------------------------------------------------------------------------------------------

问题补充：

myali88 写道

easyui tree里面不是有个attributes用做这个的么？

引用

attributes: Custom attributes bind to the node.

attributes属性是自定义的node属性，对于向后台传递参数，如何使用？？

另外还有个问题，需要请教一下，在新增树节点时，使用appendNodes方法如何做到新增选中节点的同级树节点（它的文档api中，appendNodes可以实现新增选中节点的子节点）。现在解决了

------解决方案--------------------------------------------------------

easyui tree里面不是有个attributes用做这个的么？

引用

attributes: Custom attributes bind to the node.

------解决方案--------------------------------------------------------

可参考:

哪位高手使用过jquery easyui的tree http://www.myexception.cn/asp-dotnet/319105.html

关于admob收款的有关问题

● AJAX

全文链接

08

【转载】异步(ajax)动态加载无限级联树(tree)代码示例

在网上看了很多示例，发现都是用tree控件的各种事件去修改url参数实现的，我这里介绍一种前端最简单的实现方法。

在前端不写任何多余的代码。前端代码非常简单，如下：

HTML和JS代码:

<ul id="tt4"></ul>

$(function(){
$('#tt4').tree({
date:[{"id":1 , "text":"Folder1"}],
url: '/egov/egs/prm/citizen-treedemo-ajax.action?id='
});
});

重点在后台代码,先说下原理。

第一次访问当然ID是空的，这时候判断ID为空就默认使用根节点查找，当然根节点的ID是多少一般是固定的。

以后再点击前台树(tree)的节点(node)时，展开文件夹的时候树控件，会自动将点击的ID传到后台，这个应该是easyui的tree默认的一个特性。

下面是后台代码，这里是JAVA实现：

/**
* 异步加载模块树
*
* @return
*/
public String treeDemoAjax() {
// 获取ID
String id = this.getString("id");
TreeNode treeNode = null;
String treeJson = "";
// 如果是空，就默认根目录
if (StringUtils.isBlank(id)) {
treeNode = new TreeNode("0", "模块根目录");
List<TreeNode> treeChildren = queryAjaxTreeChildren(treeNode);
treeNode.setChildren(treeChildren);
treeJson = new JsonObject(treeNode).toString();
} else {
// 加载子节点
treeNode = new TreeNode(id, "");
List<TreeNode> treeChildren = queryAjaxTreeChildren(treeNode);
treeJson = new JsonArray(treeChildren).toString();
if (!StringUtils.isBlank(treeJson) && treeJson.length() > 2) {
treeJson = treeJson.substring(1);
treeJson = treeJson.substring(0, treeJson.length() - 1);
}
}
this.put("msg", "[" + treeJson + "]");
return Action.SUCCESS;
}

上面的queryAjaxTreeChildren 函数为递归查找子节点。

函数实现如下：

/**
* 查询父节点下的子节点
*
* @return
*/
private List<TreeNode> queryTreeChildren(TreeNode pNode) {
List<Hashtable> treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list");
List<TreeNode> treeNodeList = new ArrayList<TreeNode>();
if (treeData != null && treeData.size() > 0) {
for (Hashtable ht : treeData) {
String id = (String) ht.get("id");
String text = (String) ht.get("text");
TreeNode childNode = new TreeNode(id, text);
treeNodeList.add(childNode);
}
}
return treeNodeList;
}
/**
* 查询父节点下的子节点,并且查询子节点的子节点，如果有子节点就将子节点设置成state:closed
*
* @return
*/
private List<TreeNode> queryAjaxTreeChildren(TreeNode pNode) {
List<Hashtable> treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list");
List<TreeNode> treeNodeList = new ArrayList<TreeNode>();
if (treeData != null && treeData.size() > 0) {
for (Hashtable ht : treeData) {
String id = (String) ht.get("id");
String text = (String) ht.get("text");
TreeNode childNode = new TreeNode(id, text);
// 查询子节点的是否有子节点
List<TreeNode> childNodeChildren = queryTreeChildren(childNode);
if (childNodeChildren.size() > 0) {
childNode.setState(TreeNode.STATE_CLOSED);
}
treeNodeList.add(childNode);
}
}
return treeNodeList;
}

注意这里我们需要判断子节点是否还有子节点，因为这样我们才能判断在界面上是将节点显示成文件还是文件夹。

这里对easyui 树的节点JAVA代码封装模型TreeNode的代码看这里：http://luju.me/easyui/tree_for_javacode.html

OK，异步(ajax)动态加载无限级联树(tree)就做好了。

来运行一下，当我们点击“用户服务”的时候，后台是异步加载的。

本文为《鲁炬的博客》原创。

欢迎转载，但请务必注明出处，尊重他人劳动。

转载请注明：原文地址：http://luju.me/easyui/ajax_tree.html

● AJAX

全文链接

08

【转载】jQuery EasyUI一些功能总结

jQuery EasyUI 是帮助构建web页面的一个框架，官方网址：http://www.jeasyui.com

前段时间鉴于项目需要，就用EasyUI做了一些东西（项目中EasyUI版本是jquery-easyui-1.3.2），现将做过的一些功能做下说明和整理，以便以后用到，先来看一下EasyUI可实现哪些功能吧！