zoukankan      html  css  js  c++  java
  • 浅谈EasyUI的使用

    不记得上篇文章是啥时候写的了,似乎是没有时间,或是精力,或是动力,或是真的没有可写的内容~

    在我们的人生道路上,走远了就会发现学习然后总结以及分享,这个顺序是那么的理所当然,所以有了此龊文。

    温馨的PS:以下代码需要有些js、jquery、html、css基础才行哦!

    最近对EasyUI感触比较多,很久以前,我还没听说过EasyUI,后来由于工作需要,由于没人教,所以自学了起来。因为没用过这些UI库,所以一无所知,项目还是有点急的吧,至少不是很缓,于是乎就对其只是有了个大概了解罢了,使用起来感觉满吃力的,当时主要就用到了datagrid,至于表单验证之类的都是自己写js来一个个判断的。因为出于对UI的理解,觉得这个库主要提供界面的东西吧,呵呵,很肤浅吧。

    最近看了看别人写的EasyUI使用代码,然后在此基础上看了看官方的英文使用文档,发现我以前仅仅只是牵强的用着其功能,并没有发挥它的功用。当然现在我还并未精通,只是进步了不少,因而写个总结,或者说想写点啥吧,好满足下自己。

    1、以datagrid为例,easyui的组件一般都有2种创建方式,一种是在html元素上添加专属的class,让easyui在页面加载后自动渲染该元素成目标组件;另一种是通过js直接操作目标元素执行组件的专属方法来渲染。如下所示:

    <table class="easyui-datagrid" style="400px;height:250px"  
            data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
        <thead>  
            <tr>  
                <th data-options="field:'code',100">Code</th>  
                <th data-options="field:'name',100">Name</th>  
                <th data-options="field:'price',100,align:'right'">Price</th>  
            </tr>  
        </thead>  
    </table>
    <table id="dg"></table>  
    <script>
        $('#dg').datagrid({  
            url:'datagrid_data.json',  
            columns:[[  
                {field:'code',title:'Code',100},  
                {field:'name',title:'Name',100},  
                {field:'price',title:'Price',100,align:'right'}  
            ]]  
        }); 
    </script>

    个人觉得还是写js灵活自如点啊。

    每个js库的使用细节或者说规则上还是有些差异的,至少以我目前的水平看它们,是如此的。如果要对datagrid进行操作,比如重新加载数据,那么一般想来是调用reload方法,EasyUI的做法需要如此:

    $('#dg').datagrid('reload');

    看着有点古怪,调用方法跟传参数似的,当时我就很难接受这样的做法,但是要用它也没办法,只能如此啊。

    对于datagrid的其他使用,建议看看官方文档,还是蛮不错的,有Demo,也有使用文档,还有教程,还是比较全的,虽然是英文的,但是直接看看代码还是蛮直接的,再回来看看英文也差不多了解了。

    2、validatebox,这个就是验证表单用的,听说过html5没,html5的表单就提供了几个属性,可以直接配置是否必填、验证表单的正则表达式等功能。而这里的这个validatebox也是类似的功能,通过和form的搭配使用,免去了繁琐的js操作,当然并不是说很完美哦,呵呵,我是个执着于完美的人。

    validatebox这个组件同样提供2种方式来创建:

        <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />  
    <input id="vv" />  
    <script>
        $('#vv').validatebox({  
            required: true,  
            validType: 'email'  
        });  
    </script>

    这里的验证类型是“email”,当然并不是说叫它email,它就知道这个验证的对象是email地址类型了,名字只是形象化了,让人一看明了,而这个email是EasyUI自带的验证类型,但其自带的毕竟有限,难以满足需求的变化,所以提供了扩展规则的方法:

    <script>
    $.extend($.fn.validatebox.defaults.rules, {  
        minLength: {  
            validator: function(value, param){  
                return value.length >= param[0];  
            },  
            message: 'Please enter at least {0} characters.'  
        }  
    }); 
    </script>
        <input class="easyui-validatebox" data-options="validType:'minLength[5]'">  

    这个还是蛮灵活的,能传参,也能直接获取文本框的值。当文本框失去焦点后就会自动触发判断,并提示信息出来。(图就不截了,自己看Demo去!)

    如果要手动出发的话,需要如此:

       $('#vv').validatebox('validate');//触发验证
       $('#vv').validatebox('isValid');//触发验证并返回true/false

    对了,还能给一个表单,添加多个规则验证呢,如下所示,js的话自己琢磨下吧,不错的功能哦!不知道在验证的同时能不能做些手脚呢?课后练习吧!

    <input class="easyui-validatebox" data-options="
        required:true,
        validType:['email','length[0,20]']
    ">

    4、可是,这个虽然便利了,但是form中一大堆表单项,一个个调用也是费力的,还要进行判断呢……

    所以有了form这个组件,这个针对的还是form标签,这个同名的啊,估计纯属巧合,个人觉得怪怪的,有点混淆,难道是我没理解?-_-!

    这个组件的使用,在我看来是个特例了吧,似乎只能通过js来操作,但有两种使用形式。

    //转换id为ff的form为组件
    $('#ff').form({  
        url:...,  
        onSubmit: function(){  
           //...
        },  
        success:function(data){  
           //。。。
        }  
    });  
    
    //在需要的时候提交
    $('#ff').submit();
    //转换并立马触发提交事件
    $('#ff').form('submit', {  
        url:...,  
        onSubmit: function(){  
          //...
        },  
        success:function(data){  
           //...
        }  
    });  

    似乎跑题了,刚才讲到一大堆表单项要进行验证来着。很简单的啦,form说,既然它包养了表单项们,那么这是就包在它身上了哈。

    $('#ff').form('submit', {
        url: ...,
        onSubmit: function(){
            var isValid = $(this).form('validate');//触发form内的所有validatebox验证,并返回true/false,这个你懂的!
            return isValid;
        },
        success: function(){
                 //...
        }
    });

    另外form组件还有个实用的功能:clear,即清空表单项数据。

    时间过得真快啊,还有好多事要做呢,今天就到这里了,其他大家自己摸索吧,人生也是一路摸索或冒险来的,我们要习惯它,不然生活还是得继续啊,这就是人生吧,咱们没有任何理由去浪费。当然在冒险结束后,丰厚的成果等待着我们。

    学而时习之,不亦说乎?温故而知新,不亦兴乎?

    作者:
    博客园:Yevon
    免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
    PS: 本文版权归作者所有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。
  • 相关阅读:
    解决:Could not resolve archetype org.apache.maven.archetypes
    Spring MVC配置MyBatis输出SQL
    Spring集成MyBatis 通用Mapper以及 pagehelper分页插件
    关于SpringMVC或Struts2接受参数接收不到的原因
    配置quartz启动时就执行一次
    ajaxFileUpload进行文件上传时,总是进入error
    spring mvc注入配置文件里的属性
    java中将一个文件夹下所有的文件压缩成一个文件
    flume failed to start agent because dependencies were not found in classpath
    ubuntu不能安装pip unable to install pip in unbuntu
  • 原文地址:https://www.cnblogs.com/yevon/p/use_of_easyui.html
Copyright © 2011-2022 走看看