easyui tabs 的href和content属性

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

两者特点: href方式加载数据的特点:
  1. 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。
  2. 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好。
  3. 当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题,后面会详细谈。
content方式加载数据的特点:
  1. 比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
  2. 可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
  3. 使用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:

<div id="loading" style="position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #DDDDDB; text-align: center; padding-top: 20%;"></div>

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

function show(){
    $("#loading").fadeOut("normal", function(){
        $(this).remove();
    });
}    
var delayTime;
$.parser.onComplete = function(){
    if(delayTime) 
        clearTimeout(delayTime);
    delayTime = setTimeout(show,500);
}

 

需要注意的是,如果多个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

08
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个字符!"

示例:

<input class="easyui-validatebox" required="true" missingMessage="姓名必须填写" size="10" type="text" name="realName"></input>

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(只能选择不可编辑)

<script>

 $.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

<script>

$.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>

<input name="s1" class="easyui-datebox" required="true" missingMessage="日期必须填写" editable="false"></input>

<input name="s2" class="easyui-datebox" required="true" validType="TimeCheck['s1']" invalidMessage="s1必须大于s2" editable="false"></input>

<input name="s3" class="easyui-datebox" required="true" validType="TimeCheck['s2']" editable="false"></input>

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个字符:

<input class="easyui-validatebox" validType="minLength[5]">

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

属性名 类型 描述 默认值

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

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

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

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

方法

方法名 参数 描述

destroy none 删除并且销毁组件

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

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

08
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", "用户维护");

08
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收款的有关问题

08
08

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

 

 

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

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

HTML和JS代码:

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

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

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

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

下面是后台代码,这里是JAVA实现: 

  1. /** 
  2.  * 异步加载模块树 
  3.  *  
  4.  * @return 
  5.  */ 
  6. public String treeDemoAjax() { 
  7.     // 获取ID 
  8.     String id = this.getString("id"); 
  9.     TreeNode treeNode = null; 
  10.     String treeJson = ""; 
  11.     // 如果是空,就默认根目录 
  12.     if (StringUtils.isBlank(id)) { 
  13.         treeNode = new TreeNode("0", "模块根目录"); 
  14.         List<TreeNode> treeChildren = queryAjaxTreeChildren(treeNode); 
  15.         treeNode.setChildren(treeChildren); 
  16.         treeJson = new JsonObject(treeNode).toString(); 
  17.     } else { 
  18.         // 加载子节点 
  19.         treeNode = new TreeNode(id, ""); 
  20.         List<TreeNode> treeChildren = queryAjaxTreeChildren(treeNode); 
  21.         treeJson = new JsonArray(treeChildren).toString(); 
  22.         if (!StringUtils.isBlank(treeJson) && treeJson.length() > 2) { 
  23.             treeJson = treeJson.substring(1); 
  24.             treeJson = treeJson.substring(0, treeJson.length() - 1); 
  25.         } 
  26.     } 
  27.     this.put("msg", "[" + treeJson + "]"); 
  28.     return Action.SUCCESS; 

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

函数实现如下: 

  1. /** 
  2.  * 查询父节点下的子节点 
  3.  *  
  4.  * @return 
  5.  */ 
  6. private List<TreeNode> queryTreeChildren(TreeNode pNode) { 
  7.     List<Hashtable> treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list"); 
  8.     List<TreeNode> treeNodeList = new ArrayList<TreeNode>(); 
  9.     if (treeData != null && treeData.size() > 0) { 
  10.         for (Hashtable ht : treeData) { 
  11.             String id = (String) ht.get("id"); 
  12.             String text = (String) ht.get("text"); 
  13.             TreeNode childNode = new TreeNode(id, text); 
  14.             treeNodeList.add(childNode); 
  15.         } 
  16.     } 
  17.     return treeNodeList; 
  18.  
  19. /** 
  20.  * 查询父节点下的子节点,并且查询子节点的子节点,如果有子节点就将子节点设置成state:closed 
  21.  *  
  22.  * @return 
  23.  */ 
  24. private List<TreeNode> queryAjaxTreeChildren(TreeNode pNode) { 
  25.     List<Hashtable> treeData = deployService.querySQL("select id,name text from sys_module where parentid='" + pNode.getId() + "' order by list"); 
  26.     List<TreeNode> treeNodeList = new ArrayList<TreeNode>(); 
  27.     if (treeData != null && treeData.size() > 0) { 
  28.         for (Hashtable ht : treeData) { 
  29.             String id = (String) ht.get("id"); 
  30.             String text = (String) ht.get("text"); 
  31.             TreeNode childNode = new TreeNode(id, text); 
  32.             // 查询子节点的是否有子节点 
  33.             List<TreeNode> childNodeChildren = queryTreeChildren(childNode); 
  34.             if (childNodeChildren.size() > 0) { 
  35.                 childNode.setState(TreeNode.STATE_CLOSED); 
  36.             } 
  37.             treeNodeList.add(childNode); 
  38.         } 
  39.     } 
  40.     return treeNodeList; 

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

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

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

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

 

本文为《鲁炬的博客》原创。
欢迎转载,但请务必注明出处,尊重他人劳动。
转载请注明:原文地址:http://luju.me/easyui/ajax_tree.html

08
08

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

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

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

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

用EasyUI可轻松实现特殊查询功能的展示

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 用EasyUI可轻松实现普通的增、删、改功能

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 和其它一些功能实现

上面是一些样式展示,下面就来说说个别功能的实现步骤:

首先下载官方包到自己的项目中(注:除了官方包外还需要下载相应的jQuery包支持),

下载地址:http://www.jeasyui.com/download/index.php

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)


然后在自己的项目中进行引用就行,别的都可以不要但关键的几个js和样式还是需要的

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)


这样就可以使用jQuery EasyUI了,下面就来说说几个重要的控件的使用

DataGrid实现(数据填充、增删改查等):

js实现方式

1.声明DataGrid

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)


2.然后再用js方法操作其属性

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)


jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

  

3.上面这段代码用于实现表格列的显示与隐藏,以及排序功能等,效果如下

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 增加功能的实现:

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

  jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 

编辑功能:

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

  jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 其他功能操作(搜索):

 jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)
 jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)
 跨行跨列以及冻结列冻结行代码如下:

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

还可以用js的方式来实现上面的表格样式:

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

  

 设置单元格样式代码:

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

 设置一行对应多行效果代码:

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

其中将部分Java代码如下:

jQuery EasyUI一些功能的总结 - 嗨皮小桃子 - 简单生活(Simple Living)

08
08

【转载】C#将datatable生成easyui的绑定tree 的json数据格式

在用easyui控件的时候常用到他能解析的接送数据,我们可以通过c#将我们从数据库中得到datatable转换成那样的格式,datagrid的好转换,简单的循环拼串就可以,不过easyui绑定树的时候的接送数据格式稍有不同,比datagrid和datagridtree得到json数据要稍微复杂一些,我写了性能虽然不是很好的,但是也能得到想要的数据!

/// <summary>
    /// 根据DataTable生成Json树结构
    /// </summary>
    /// <param name="tabel">数据源</param>
    /// <param name="idCol">ID列</param>
    /// <param name="txtCol">Text列</param>
    /// <param name="rela">关系字段</param>
    /// <param name="pId">父ID</param>
    StringBuilder result = new StringBuilder();
    StringBuilder sb = new StringBuilder();
    private void GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string rela, object pId)
    {
        result.Append(sb.ToString());
        sb.Clear();
        if (tabel.Rows.Count > 0)
        {
            sb.Append("[");
            string filer = string.Format("{0}='{1}'", rela, pId);
            DataRow[] rows = tabel.Select(filer);
            if (rows.Length > 0)
            {
                foreach (DataRow row in rows)
                {
                    sb.Append("{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol] + "\",\"state\":\"open\"");
                    if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0)
                    {
                        sb.Append(",\"children\":");
                        GetTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol]);
                        result.Append(sb.ToString());
                        sb.Clear();
                    }
                    result.Append(sb.ToString());
                    sb.Clear();
                    sb.Append("},");
                }
                sb = sb.Remove(sb.Length - 1, 1);
            }
            sb.Append("]");
            result.Append(sb.ToString());
            sb.Clear();
        }
    }
调用方法很简单,运行这个void 类型的函数,然后取result 的值就行了,

//GetTreeJsonByTable(datatable, "id", "title", "pid", "0");
        //string content = result.ToString();

08
08

【转载】扩展easyui 的表单验证

easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下:

$.extend($.fn.validatebox.defaults.rules, {
    CHS: {
        validator: function (value, param) {
            return /^[\u0391-\uFFE5]+$/.test(value);
        },
        message: '请输入汉字'
    },
    ZIP: {
        validator: function (value, param) {
            return /^[1-9]\d{5}$/.test(value);
        },
        message: '邮政编码不存在'
    },
    QQ: {
        validator: function (value, param) {
            return /^[1-9]\d{4,10}$/.test(value);
        },
        message: 'QQ号码不正确'
    },
    mobile: {
        validator: function (value, param) {
            return /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/.test(value);
        },
        message: '手机号码不正确'
    },
    loginName: {
        validator: function (value, param) {
            return /^[\u0391-\uFFE5\w]+$/.test(value);
        },
        message: '登录名称只允许汉字、英文字母、数字及下划线。'
    },
    safepass: {
        validator: function (value, param) {
            return safePassword(value);
        },
        message: '密码由字母和数字组成,至少6位'
    },
    equalTo: {
        validator: function (value, param) {
            return value == $(param[0]).val();
        },
        message: '两次输入的字符不一至'
    },
    number: {
        validator: function (value, param) {
            return /^\d+$/.test(value);
        },
        message: '请输入数字'
    },
    idcard: {
        validator: function (value, param) {
            return idCard(value);
        },
        message:'请输入正确的身份证号码'
    }
});

/* 密码由字母和数字组成,至少6位 */
var safePassword = function (value) {
    return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value));
}

var idCard = function (value) {
    if (value.length == 18 && 18 != value.length) return false;
    var number = value.toLowerCase();
    var d, sum = 0, v = '10x98765432', w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = '11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91';
    var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);
    if (re == null || a.indexOf(re[1]) < 0) return false;
    if (re[2].length == 9) {
        number = number.substr(0, 6) + '19' + number.substr(6);
        d = ['19' + re[4], re[5], re[6]].join('-');
    } else d = [re[9], re[10], re[11]].join('-');
    if (!isDateTime.call(d, 'yyyy-MM-dd')) return false;
    for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];
    return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));
}

var isDateTime = function (format, reObj) {
    format = format || 'yyyy-MM-dd';
    var input = this, o = {}, d = new Date();
    var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);
    var len = f1.length, len1 = f3.length;
    if (len != f2.length || len1 != f4.length) return false;
    for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;
    for (var i = 0; i < len; i++) o[f1[i]] = f2[i];
    o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);
    o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);
    o.dd = s(o.dd, o.d, d.getDate(), 31);
    o.hh = s(o.hh, o.h, d.getHours(), 24);
    o.mm = s(o.mm, o.m, d.getMinutes());
    o.ss = s(o.ss, o.s, d.getSeconds());
    o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);
    if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;
    if (o.yyyy < 100) o.yyyy += (o.yyyy > 30 ? 1900 : 2000);
    d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms);
    var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;
    return reVal && reObj ? d : reVal;
    function s(s1, s2, s3, s4, s5) {
        s4 = s4 || 60, s5 = s5 || 2;
        var reVal = s3;
        if (s1 != undefined && s1 != '' || !isNaN(s1)) reVal = s1 * 1;
        if (s2 != undefined && s2 != '' && !isNaN(s2)) reVal = s2 * 1;
        return (reVal == s1 && s1.length != s5 || reVal > s4) ? -10000 : reVal;
    }
};

 

 

页面中要引入jquery.js 和 easyui.min.js

html 代码中使用如下

<table class="grid" id="uiform">
<tr>

<td>登录名:</td>

<td><input  required="true" id="txtUsername" type="text" class="txt03" /></td>

<td>真实姓名:</td>

<td><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td>

</tr>
<tr>

<td>登录密码:</td>

<td><input validType="safepass"  required="true" id="txtPassword" name="password" type="password" class="txt03" /></td>

<td>Email:</td>

<td><input id="txtEmail" name="email"  validType="email" type="text" class="txt03" /></td>

</tr>
<tr>

<td>身份证号:</td>

<td><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td>

<td>QQ:</td>

<td><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td>

</tr>
<tr>

<td>手机:</td>

<td><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td>

<td>电话:</td>

<td><input id="txtTel" name="tel" type="text" class="txt03" /></td>

</tr>
<tr>

<td>家庭住址:</td>

<td colspan="3"><input validType="equalTo[txtMobile]" style="width:80%" id="txtHomeaddr" name="homeaddr" type="text" class="txt03" /></td>

</tr>
<tr>

<td>备注:</td>

<td colspan="3"> <input type="text" style="width:80%" class="txt03" id="txtRemark"></textarea></td>

</tr>
<tr>

<td>&nbsp;</td>

<td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超级管理员</label>&nbsp;&nbsp;<input id="Checkbox2" type="checkbox" /><label>禁用</label></td>

</tr> 
</table>

注:文中红色字体部分的js正则表达式在Asp.net MVC文件中,即cshtml文件中由于@符号是标识符,所以需要进行转义,即将表达式改成下列形式。

        /* 密码由字母和数字组成,至少6位 */
 var safePassword = function (value) {
       return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value));
}

08
08

【转载】初试jQuery EasyUI

想必关注jQuery的同学们对jQuery EasyUI已经有所耳闻了,目前已经更新到1.0.5版本,风格与EXTJS有点相似,可以很好的满足开发人员对UI的需求。

jQuery EasyUI

jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。

 

 jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,window等等。

OK,下面就开始我们的初探之旅。

jQuery EasyUI---Accordion
手风琴效果,大家应该很熟悉。

基本代码:

初试jQuery EasyUI - 雪舞残鸿 - 你若安好,便是晴天!代码

复制代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Accordion</title>
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>

    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript"></script>
</head>
<body>
    <div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">
        <div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">
            <div title="Title1" style="overflow:auto;padding:10px;">
                <h3>Accordion1</h3>
            </div>
            <div title="Title2" style="padding:10px;">
                <h3>Accordion2</h3>
            </div>
            <div title="Title3">
                <h3>Accordion3</h3>
            </div>
        </div>
    </div>
</body>
</html>

复制代码

代码非常简单,只需要简单的html就可以实现。这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。

效果:

由于只是简单的html,所以我们可以通过js轻松的对Accordion进行操控,控制大小,位置等等。

jQuery EasyUI---DataGrid 

从名字就可以知道这是个数据的绑定和显示控件。

基本代码:

初试jQuery EasyUI - 雪舞残鸿 - 你若安好,便是晴天!代码

复制代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DataGrid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>

    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
        $(function() {
            $('#test').datagrid({
                title: 'jQuery EasyUI---DataGrid',
                iconCls: 'icon-save',
                width: 500,
                height: 350,
                nowrap: false,
                striped: true,
                url: '../Data/datagrid_data.json',
                sortName: 'ID',
                sortOrder: 'desc',
                idField: 'ID',
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { title: 'ID', field: 'ID', width: 80, sortable: true }
                ]],
                columns: [[
                    { title: '基本信息', colspan: 2 },
                    { field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2,
                        formatter: function(value, rec) {
                            return '<span style="color:red">编辑 删除</span>';
                        }
                    }
                ], [
                    { field: 'name', title: 'Name', width: 120 },
                    { field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }
                ]],
                pagination: true,
                rownumbers: true,
                singleSelect: false,
                toolbar: [{
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function() {
                    alert('添加数据')
                    }
                }, '-', {
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function() {
                    alert('保存数据')
                    }
                }]
                });
            });
            
    </script>
</head>
<body>
    <table id="test"></table>
</body>
</html>

复制代码

这里我们从datagrid_data.json中获取数据,代码的编写风格同EXTIS十分相似。ExtJS开发实践

效果:

 

jQuery EasyUI---Dialog

网页窗体效果。

基本代码:

代码

效果:

 

jQuery EasyUI---Tabs

无论是网站还是管理软件,我们越来越多的使用Tabs,EasyUI自然也进行了支持。

基本代码:

代码

效果:

 

 

jQuery EasyUI---Messager

 

信息提示控件,可以很好的进行数据的提示,推荐。

基本代码:

代码

效果:

 页面左下角信息提示

jQuery EasyUI---ValidateBox

数据验证控件,可以很好的对表单数据进行验证。

基本代码:

代码

不需要写任何函数,只需对要验证的控件required="true" validType="url"就可以。

效果:

 

jQuery EasyUI---LayOut

页面布局,可以将整个页面划分成几个区域。类似ExtJS中的Border布局。

基本代码:

代码

效果:

 

jQuery EasyUI---换肤

jQuery EasyUI使用了统一的CSS样式,在修改方面也很是方便:

 

 如图所示,对于每一个控件,都有专有的CSS。相应对其修改就可以,只需简单的了解CSS即可。


  http://www.cnblogs.com/gaoweipeng/archive/2010/03/31/1701094.html
08
08

【转载】解决ie浏览器对easyui加载时候弹出的div一闪而过的问题


弹出div代码:

<div  class="easyui-panel", data-options="fit:true ,border:false " >
    <div id="p" class="easyui-panel" data-options="title:'当前位置:会议配置     - 会议签到',fit:true,border:false  " tools="#backButton">
        <div id="backButton"><a href="http://blog.163.com/lixiaofengfly@126/blog/${pageContext.request.contextPath}/meet/backMeet" class="icon-back" style="margin-top:-2px;width:51px;height:21px;"></a></div>
     
            <div class="easyui-panel panel-body" fit="true"  style="border:0px;display:none" id="a">
            <table class="pn-ftable" cellpadding="2" cellspacing="1" border="0" style="font-size:12px;background-color:#B4CFCF;margin-top:5px;"
                 class="pn-ftable"   id="test"     data-options="fit:true">
                        <tr>
                            <td class="pn-flabel pn-flabel-h" width="300px">二维码签到图片:</td>
                            <td class="pn-fcontent" style="height:200px;width:900px;" >
                            
                            <div id="aa" ${meetingVO.twodcode == ""?" style='display:none' ":"style='display:block' " }>
                                <span   id="deparmentnamespan"    style="height:200px;width:200px" >
                                    <img  style="height:200px;width:200px" id="twowordimg" src="http://blog.163.com/lixiaofengfly@126/blog/${meetingVO.twodcode == ""?"":"/MS/signin/showimg" }">
                                </span>
                                <span class="pn-fhelp"  >下载二维码图片方式:对图片右键图片另存为,选择您要保存的位置</span>
                            </div>
                            
                            <div id="bb" ${meetingVO.twodcode == ""?" style='display:block' ":"style='display:none' " }>
                                <span class="pn-fhelp"  >暂无图片,请初始化二维码</span>
                            </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="pn-fbutton">
                            <div id="cc"  ${meetingVO.twodcode == ""?" style='display:none' ":"style='display:block' "}>
                                <span class="pn-fhelp"  ><a  id="btnSaveConference" class="easyui-linkbutton" οnclick="changetwoword()">更换二维码</a></span>
                            <span class="pn-fhelp"  ><a  id="btnSaveConference" class="easyui-linkbutton" οnclick="beforeprinttwoword()">打印预览</a></span>
                            </div>
                            <div id="dd" ${meetingVO.twodcode == ""?" style='display:block' ":"style='display:none' " } >
                                <span class="pn-fhelp"  ><a  id="btnSaveConference" class="easyui-linkbutton" οnclick="changetwoword()">初始化二维码</a></span>
                            </div>
                        </td>
                        </tr>
                </table>
            </div>
        </div>
    <div id="addDig" style="background:#B4CFCF"></div>
    </div>

当页面全部加载完毕调用初始化代码
<body  οnlοad="init()" > 
初始化代码
 function init(){
        document.getElementById("a").style.display="block";
        document.getElementById("b").style.display="block";
 }

总结: 先将要弹出的div隐藏 当页面全部加载完毕时候 在显示出来

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值