富有客户端技术之——jQuery EasyUI

系统 2492 0

      B/S 开发中页面制作涉及 HTML CSS javascript 等技术,我们随掌握相关技术,但实际开发中页面美化特别是样式设计一直困扰着我们。怎样更好、更快的设计美观、专业、时代性的页面呢? JQuery EasyUI 就能帮助我们解决这个问题。

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

       jQuery EasyUI 为我们提供了大多数 UI 控件的使用,如: accordion combobox menu dialog 网页窗体效果 ), tabs tree DataGrid (强大的 数据的绑定和显示控件 ), ValidateBox 数据验证控件,可以很好的对表单数据进行验证 )、 window 等等。

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

一、 JqueryEasyUI 准备

1 、下载 jQuery EasyUI 1.2.3

2 、将下载包中下列内容拷贝到你项目中

themes 文件夹

jquery.easyui.min.js

jquery-1.4.4.min.js

  富有客户端技术之——jQuery EasyUI

3 、在页面中加入 js/css 文件

<link rel="stylesheet" type="text/css" href="../common/themes/icon.css"/>

<link rel="stylesheet" type="text/css" href="../common/themes/default/easyui.css" />

<script type="text/javascript" src="../common/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="../common/jquery.easyui.min.js"></script>

二、 Dialog (网页窗体效果)

轻松实现在显示页面对话框,可定制工具栏、按钮、对话框内容,足以满足应用的需要,效果如下:

富有客户端技术之——jQuery EasyUI

语法格式:

$( #dd ).dialog(options);

Options 是参数描述,描述形式是 { 属性名:值 , 属性名:值 ,…}, 在很多 JQuery 框架中方法的参数都是这样描述的

主要属性列表:

l          title 对话框标题  

l          minimizable :true|false

l          maximizable :true|false

l          resizable   :true|false        

l          toolbar :[{…},{…},{…},…]     // 定义工具栏

l          buttons ::[{…},{…},{…},…]   // 定义对话框右下角的按钮

对于属性有多个值的设置,采用如下形式(同样大多数 JQuery 框架中也都是这样描述的):

[

{text:' 添加 ',iconCls:'icon-add',handler:function(){alert('t');}},

{text:' 查询 ',iconCls:'icon-search',handler:function(){alert('t');}

]

说明 iconCls 设置按钮的图标样式,目前 jQuery EasyUI 图标有(存放在 themes/icons 目录):

富有客户端技术之——jQuery EasyUI

对应的样式即 icon- 图标文件名

代码实现:

Open.html

< link rel = "stylesheet" type = "text/css" href = "../themes/icon.css" >

< script type = "text/javascript" src = "../common/jquery-1.4.4.min.js" ></ script >

< script type = "text/javascript" src = "../common/jquery.easyui.min.js" ></ script >

< script type = "text/javascript" src = "open.js" ></ script >

 

< span onclick = "Open_Dialog()" > 弹框 </ span >

< div id = "mydialog" style = "display:none;padding:5px;width:400px;height:200px;" title = " 弹框练习 " >

    <!— 在此处组织 对话框的内容 -->

    Dialog Content

</ div >

Open.js:

function Open_Dialog() {

    $ ( '#mydialog' ).show();// 首先把隐藏的层显示出来

    $ ( '#mydialog' ).dialog(

        {   minimizable: true ,

            maximizable: true ,

            toolbar: [{

            text: ' 添加 ' ,

            iconCls: 'icon-add' ,

            handler: function () {

                alert( ' 添加数据 ' )

                }

            },{

                text: ' 查询 ' ,

                iconCls: 'icon-search' ,

                handler: function () {

                alert( ' 查询数据 ' ) }

            }],

            buttons: [{

                text: ' 关闭 ' ,

                handler: function () {

                $ ( '#mydialog' ).dialog( 'close' );

                }

                }]

        });

}

这样就 ok ,试一下吧!

 

三、各种消息框

Js 中的 alert() confirm() 外观太土气了,现在都是采用弹出层的效果,要与时俱进

使用 messager 组件可轻松实现

1、   显示消息框

$.messager.alert(title, msg, icon, fn ) ,效果如下:

2 $.messager.confirm(title, msg, fn ) ,效果如下:

 

Messager 这两个方法十分简单 ,title 设置对话框的标题, msg 对话框的内容, icon 对话框上的图标类型(取值: error,question,info,warning ), fn 单击按钮要调用的函数

示例代码:

< script >

function alert_info() {

    $.messager.alert( ' 消息框 ' , ' 消息 ' , 'info' );

}

function confirm_info() {

    $.messager.confirm( ' 确认 ' , ' 要删除吗? ' , function (ret) {

        if (ret) {

            $.messager.alert( ' 消息 ' , ' 已删除 ' );

        }

    } );

}

</ script >

 

< a href = "javascript:alert_info();" > 消息 </ a >< br >

< a href = "javascript:confirm_info();" > 确认 </ a >< br >

 

3 $.messager.show(Options)

比较特殊,是在屏幕的右下角显示消息框,可设置超时时间( the message window will be auto closed when timeout. ),常常用来制作及时提醒的效果

Options 是参数描述,描述形式是 { 属性名:值 , 属性名:值 ,…}

主要属性 :

Width: 窗体宽度

Height: 窗体高度

Msg: 窗体文本内容

Title: 窗体标题

Timeout: 设置窗口的多长时间关闭

showType: 消息窗口的显示方式: null slide fade show 。默认是 slide

 

示例代码:

function show() {

    $.messager.show( {

        title: ' 提示信息 ' ,

        msg: ' 信息 5 秒后消失 ' ,

        showType: 'show' ,

        height:300,

        width:400,

        timeout:5000    

    } );

  }

<a href="javascript:void(0)" onClick="show()"> 显示 </a> |

 

四、表单验证

表单验证:一要编写验证规则;二要编写信息显示效果。比较麻烦,占据我们比较多的时间,而 JQuery EasyUI 提供的验证组件很好的解决这个问题,只需在表单字段上做如下设置:

Class= "easyui-validatebox"   设置验证结果的样式

validType=” email   应用 验证规则

required = "true"   决定是否必须填写

missingMessage=”Email 必须填写   设置显示信息

invalidMessage=”Email 格式无效    设置显示信息

即可,是不是很容易

不过 validType 只有 email url length[m,n] 几种 验证规则

效果演示:

富有客户端技术之——jQuery EasyUI

代码:

< tr >

    < td align = "right" > 姓名 : </ td >

    < td >< input class = "easyui-validatebox" required = "true" validType = "length[2,6]" missingMessage = " 姓名必须填写 "   invalidMessage = " 姓名必须是 2 6 " ></ td >

</ tr >

< tr >

    < td   align = "right" > 电子邮件 : </ td >

    < td >< input class = "easyui-validatebox" required = "true" validType = "email" ></ td >

</ tr >

< tr >

    < td   align = "right" > URL: </ td >

    < td >< input class = "easyui-validatebox" required = "true" validType = "url" ></ td >

</ tr >

五、 DataGrid 数据列表控件

DataGrid 用来做什么的呢?让我们先看看用它实现的效果:

富有客户端技术之——jQuery EasyUI

通过 DataGrid 可以以表格的形式呈现数据,可以实现分页、排序、执行添加、修改、删除数据, 为我们提供很多便利,正因为 DataGrid 的强大,所以使用起来也相当比较复杂,我们先从基本的学起,逐步深入

一、基本属性

Title DataGrid 的标题

Width :宽度

Height :高度

iconCls DataGrid 的图标

二、定义列标题, DataGrid 有两种形式的列标题

定义普通列属性

Columns

定义冻结列:被冻结的列将不随着水平滑块的滚动而滚动(类似于 Excel 效果)

frozenColumns

两种列标题设置列的值是一样的

[{field:'age',title:' 年龄 ',width:50},{field:'grade',title:' 班级 ',width:80},…   ]

field: 标题名称(与 json 数据的属性名一致)

title :标题文本

width: 宽度

三、绑定数据

url 数据源 ,要求采用 Json 格式组织数据

指定 json 文件

动态产生(稍后讲解)

特定的 Json 格式数据,要求如下:

{"rows":[

       {"id":"1001","name":"Jack","age":18,"grade":"S101"},

       {"id":"1002","name":"Peter","age":18,"grade":"S101"},

       {"id":"1003","name":"John","age":18,"grade":"S101"} ]

}

说明: rows 描述要显示的所有行数据,使用 { ‘属性名’:‘值’ ,. ‘属性名’:‘值’ ,…} 描述一条记录,记录之间用 ’,’ 分割, 注意属性名要与列标题的 field 属性值一致,这样记录就绑定到 DataGrid 上了

四:定义工具栏

toolbar

值: [{text:' 添加 ',iconCls:'icon-add'},'-',{text:' 删除 ',iconCls:'icon-remove'}]

 

这些是 DataGrid 最核心的属性掌握了这些,我们来做个练习

 

代码演示 :

  页面部分:

  < body >

    < table id = "test" ></ table >

  </ body >

Js 代码:

$( function () {

    $( '#test' ).datagrid( {

        title: 'jQuery EasyUI---DataGrid' ,

        iconCls: 'icon-save' ,

        width: 500,

        height: 350,  

        url: 'datagrid_data.json' ,  

        frozenColumns: [[

        { field: 'ck' , checkbox: true } ,

        { title: 'ID' , field: 'ID' , width: 80, sortable: true }

        ]],

        columns: [

        [

            { field: 'name' , title: ' 姓名 ' , width: 120 } ,

            { field: 'addr' , title: ' 地址 ' , width: 120,   sortable: true } ,

            { field: 'opt' , title: ' 操作 ' , width: 100, align: 'center' ,  

                formatter: function (value, rec) {

                return '<span style="color:red"> 编辑 删除 </span>' ;

                }

            }

        ]],

        toolbar: [ {

            text: ' 添加 ' ,

            iconCls: 'icon-add' ,

            handler: function () {

            alert( ' 添加数据 ' )

            } } , '-' ,

            {

            text: ' 保存 ' ,

            iconCls: 'icon-save' ,

            handler: function () {

            alert( ' 保存数据 ' )

        } } ]

    } );

} );

 

五、数据分页

DataGrid 跟分页相关的属性有主要有三个:

pagination true   表示使用分页

pageSize 5   设置一页显示多少条记录

pageList [5,10,20]    设置下拉列表的选项 通过该选项可以重新设置分页尺寸

注意若 pagination true   数据源( json 数据)必须设置 total 属性,通过该属性设置数据的总记录数,这对于分页是必须得

Json 数据格式:

{ “total”:20,

"rows":[

       {"id":"1001","name":"Jack","age":18,"grade":"S101"},

       {"id":"1002","name":"Peter","age":18,"grade":"S101"},

       {"id":"1003","name":"John","age":18,"grade":"S101"} ]

}

 

六、使用 DataGrid 动态显示数据并实现分页

主要三个步骤:

步骤 1 :设置 url: '/demo/ListServlet‘

步骤 2 :编写后台组件

接受二个参数: page: 页号; rows: 每页记录大小

这两个参数是 DataGrid 分页导航向目标( url 设置的动态页面)传递的数据

提取数据集合 (List)

步骤 3 :转化 JSon 格式

使用 json-lib 组件

完整示例代码如下:

页面:

< body >

< table id = "student" ></ table >

</ body >

JS 代码:

< script >

$( function () {

$( "#student" ).datagrid(

{

    title: ' 学生信息 ' ,

    width:500,

    height:400,

    iconCls: 'icon-save' ,

    url: '/querydemo/ListServlet' ,

    idField: "id" ,

    singleSelect: false ,

    frozenColumns:[[

    { field: 'ck' ,checkbox: true} ,

    { field: 'id' ,title: ' 编号 ' ,width:50 } ,

    { field: 'name' ,title: ' 姓名 ' ,width:100 }

    ]],

    columns:[

        [

            { field: 'age' ,title: ' 年龄 ' ,width:50 } ,

            { field: 'grade' ,title: ' 班级 ' ,width:80 }

        ],

   

    ],

    toolbar:[

        { text: " 删除 " ,iconCls: "icon-remove" } ,

        { text: " 添加 " ,iconCls: "icon-add" }

    ],

    pagination: true ,

    pageSize:5,

    pageList:[5,10,20]  

}

);

 

} );

</ script >

ListServlet 代码:

public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setCharacterEncoding( "utf-8" );

        StudentService ss= new StudentServiceImpl();

        String spage=request.getParameter( "page" );

        String srows=request.getParameter( "rows" );

        if (spage== null ||spage.equals( "" )){

            spage= "1" ;

        }

        if (srows== null ||srows.equals( "" )){

            srows= "5" ;

        }

        int page=Integer. parseInt (spage);

        int row=Integer. parseInt (srows);

        PageMode pm=ss.getStudentList(page, row);

        JSONObject jsonobj = new JSONObject();

        jsonobj .put( "total" , pm.getTotalCount());

        jsonobj .put( "rows" , pm.getData());

        response.getWriter().print( jsonobj .toString());

    }

说明:使用 JSObject 组件将 java 数据转为 Json 格式数据,然后通过 Response 输出到客户端

        JSONObject jsonobj = new JSONObject();// 创建 JSObject 组件

// 将要转换的数据放置到 jsonobj

        // 放置 DataGrid 分页所需要的 total 属性其值

        jsonobj .put( "total" , pm.getTotalCount());

        // 放置 DataGrid 分页所需要的 rows 属性及其值    

jsonobj .put( "rows" , pm.getData());

// 将存放在 jsonobj 的数据,转化为 JSON 格式

        jsonobj .toString()

 

注意:需要向项目中加入如下 Jar

 

 

业务层代码( StudentServiceImpl ):

private List< Student > stuList = new ArrayList< Student >();

    public StudentServiceImpl(){

        // 可操作数据库,这里在 list 中组织数据

        stuList .add( new Student (1001, " 张飞 " ,18, "S2" ));

        stuList .add( new Student (1002, " 刘备 " ,18, "S2" ));

        stuList .add( new Student (1003, " 貂蝉 " ,18, "S2" ));

        stuList .add( new Student (1004, " 关羽 " ,18, "S2" ));   

        stuList .add( new Student (1005, " 曹操 " ,18, "S2" ));

        stuList .add( new Student (1006, " 夏侯惇 " ,18, "S2" ));

        stuList .add( new Student (1007, " 周瑜 " ,18, "S2" ));

        stuList .add( new Student (1008, " 孙权 " ,18, "S2" ));

        stuList .add( new Student (1009, " 孙坚 " ,18, "S2" ));

        stuList .add( new Student (1010, " 关平 " ,18, "S2" ));

        stuList .add( new Student (1011, "Jack" ,18, "S2" ));

        stuList .add( new Student (1012, "Jack" ,18, "S2" ));

        stuList .add( new Student (1013, "Jack" ,18, "S2" ));

        stuList .add( new Student (1014, "Jack" ,18, "S2" ));

        stuList .add( new Student (1015, "Jack" ,18, "S2" ));  

        stuList .add( new Student (1016, "Jack" ,18, "S2" ));

        stuList .add( new Student (1017, "Jack" ,18, "S2" ));

        stuList .add( new Student (1018, "Jack" ,18, "S2" ));

        stuList .add( new Student (1019, "Jack" ,18, "S2" ));

        stuList .add( new Student (1020, "Jack" ,18, "S2" ));

       

    }

    @Override

    public PageMode getStudentList( int pageNo, int pageSize) {

        // TODO Auto-generated method stub

        PageMode pm= new PageMode();

        pm.setTotalCount(20);

        int offset=(pageNo-1)*pageSize;

        int end=pageNo*pageSize;

        for ( int i=offset;i<end;i++){

            pm.getData().add( stuList .get(i));

        }

       

        return pm;

    }

实体组件:

PageMode

public class PageMode {

   

    // 封装总记录数

private int totalCount ;

// 封装数据

    private List data = new ArrayList();

   

    public int getTotalCount() {

        return totalCount ;

    }

    public void setTotalCount( int totalCount) {

        this . totalCount = totalCount;

    }

    public List getData() {

        return data ;

    }

    public void setData(List data) {

        this . data = data;

    }

}

Student

public class Student implements java.io.Serializable {

    private int id ;

    private String name ;

    private int age ;

    private String grade ;

    // 省略 set/get 方法

}

富有客户端技术之——jQuery EasyUI


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论