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

最后都变了- 提交于 2020-02-14 22:07:36

在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

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(网页窗体效果)

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

语法格式:

$(‘#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目录):

对应的样式即 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]几种验证规则

效果演示:

代码:

<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用来做什么的呢?让我们先看看用它实现的效果:

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

1、基本属性

Title:DataGrid的标题

Width:宽度

Height:高度

iconCls:DataGrid的图标

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

定义普通列属性

Columns

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

frozenColumns

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

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

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

title:标题文本

width:宽度

3、绑定数据

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上了

4:定义工具栏

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方法

}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!