EasyUI(二)

最新推荐文章于 2025-03-18 09:03:01 发布

原创最新推荐文章于 2025-03-18 09:03:01 发布 · 948 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

本文详细介绍如何使用jQuery EasyUI构建Web页面，包括面板、表单验证、下拉列表、日期选择等组件的使用方法，并实现了一个完整的数据库分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要内容
1）使用jQuery-EasyUI组件，构建自已的Web页面（下）
2）使用Jsp/Js/Ajax/Json/Jquery/Easyui + Servlet + JDBC + Lucene/Mysql/Oracle完成数据库分页

jQuery-EasyUI快速入门—-可折叠功能的面板
第一步：创建一个js-day05这么一个web工程
第二步：在WebRoot目录下创建00-base.html
第三步：在WebRoot目录下创建js和themes目录，导入官方文件
参见<< jquery-easyui-1.3.6文件夹>>
第四步：在00-base.html 文件的标签中引入如下文件

    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <!-- 引入外部JS文件 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

第五步：在00-base.html 文件的标签中创建如下

标签

<div 
        id="p" 
        class="easyui-panel" 
        style="width:500px;height:200px;padding:10px;"   
        title="我的面板" 
        iconCls="icon-save" 
        collapsible="true">   
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
    </div>

EasyUI组件

form表单

validatebox验证框
姓名：必填/1-6个字符/必填中文
邮箱：必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn

    <div style="margin:100px"></div> 
    用户名:  
    <input id="vv"/>
    <script type="text/javascript">
        $("#vv").validatebox({
            required:true,
            validType:["length[1,4]","zhongwen"]
        });
    </script>
    <script type="text/javascript">
        //自定义验证规则
        $.extend($.fn.validatebox.defaults.rules, {    
            zhongwen : {    
                validator: function(value){//value表示在文本框中输入的内容    
                    if(/^[\u3220-\uFA29]+$/.test(value)){
                        return true;
                    }
                },    
                message: "用户名必须填中文"  
            }    
        }); 
    </script>

combobox下拉列表框
设置下拉列表框默认值

你所在的城市：
    <select id="cc" class="easyui-combobox" name="city" style="width:150px;">   
        <option>aitem1</option>   
        <option>bitem1</option>   
        <option>bitem2</option>   
        <option>citem1</option>   
        <option>citem2</option>   
        <option>citem3</option>   
        <option>ditem1</option>   
        <option>ditem2</option>   
        <option>ditem3</option>   
        <option>ditem4</option>   
    </select>  
    <script type="text/javascript">
        $(function(){
            $("#cc").combobox("setValue","长沙");
        });
    </script>

json数据

你所在的城市：
    <input id="cc" name="city" value="广州"/>   

    <script type="text/javascript">
        $("#cc").combobox({
            url:"combobox_data.json", 
            valueField:"id",    
            textField:"text" 
        });
        //textField表示在下拉框中看得见的内容,<option>长沙</option>
        //valueField表示在下拉框中看不见的内容，用于向后台传递数据<option value="cs">长沙</option>
    </script>

combobox_data.json:

[
  {    
    "id":"gz",    
    "text":"广州"   
  },
  {    
    "id":"zs",    
    "text":"中山"   
  },
  {    
    "id":"fs",    
    "text":"佛山"
  },
  {    
    "id":"sz",    
    "text":"深圳",
    "selected":true   
  },
  {    
    "id":"yj",    
    "text":"阳江"   
  }
]

datebox日期选择框
显示yyyy-mm-dd格式，需要添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
选中日期并显示选中的日期

入职时间：<input id="dd" type="text"></input>  
    <script type="text/javascript">
        $("#dd").datebox({
            required:true
        });
    </script>
    <script type="text/javascript">
        $("#dd").datebox({
            onSelect:function(date){
                alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate());   
            }
        });
    </script>

numberspinner数字微调框
设置数字微调框中的值
获取数字微调框中的值

    商品数量：<input type="text" size="2px" value="1"/><span></span>
    <hr/>
    <input id="ss" required="required" style="width:80px;">  
    <script type="text/javascript">
        $("#ss").numberspinner({
            value:1,
            min:1,
            max:100,
            editable:true
        });
    </script>
    <script type="text/javascript">
            $("#ss").numberspinner({
                onSpinUp:function(){
                    //获取numberspinner的当前值
                    var value = $("#ss").numberspinner("getValue");
                    //将numberspinner的当前值设置到商品数量文本框中
                    $("input:first").val(value).css("color","red");
                    //如果value值为100
                    if( value == 100 ){
                        $("span:first").html("商品已满，不能再购买了").css("color","blue");   
                        $("input:first").attr("disabled","disabled");
                    }
                },
                onSpinDown:function(){
                    //获取numberspinner的当前值
                    var value = $("#ss").numberspinner("getValue");
                    //将numberspinner的当前值设置到商品数量文本框中
                    $("input:first").val(value).css("color","red");
                    //如果value值小于100
                    if( value < 100 ){
                        $("span:first").html("");  
                        $("input:first").removeAttr("disabled");
                    }
                }
            });
    </script>

slider滑动条框
拖动滑块，将值同步显示到span标签中

身高：<span>150</span><span id="tip"></span>
    <div style="margin:50px">
        <input 
            id="ss"
            class="easyui-slider" 
            value="0"  
            style="width:600px;height:500px" 
            data-options="max:180,min:150,mode:'v',showTip:true,rule:[150,'|',160,'|',170,'|',180]"/>  
    </div>

    <script type="text/javascript">
        $("#ss").slider({
            onChange:function(newValue){
                $("span:first").text(newValue);
                if(newValue == 180){
                    $("#tip").text("你真高呀");
                }else if(newValue >= 170){
                    $("#tip").text("你不错呀");
                }else if(newValue >= 160){
                    $("#tip").text("你可以呀");
                }
            }
        });
    </script>

progressbar进度条
每隔1秒让进度条按随机数填充，直至充满进度条刻度

    进度条：
    <div id="p" style="width:400px;"></div> 
    <script type="text/javascript">
        $("#p").progressbar({
            width:"auto",
            height:44,
            value:0
        });
    </script>

    <input type="button" value="开始" style="font-size:111px"/>
    <script type="text/javascript">
        var timeID = null;
        //随机产生1-9之间的整数，包含1和9
        function getNum(){
            return Math.floor(Math.random()*9)+1;
        }
        $(":button").click(function(){
            timeID = window.setInterval(function(){
                //获取随机数，例如：9
                var num = getNum();
                //获取进度条当前值，例如：99
                var value = $("#p").progressbar("getValue");
                //如果随机数加当前值小于100的话      
                if(value + num < 100){
                    //填充进度条当前值
                    $("#p").progressbar("setValue",value+num);
                }else{
                    //将进度条当前值设置为100
                    $("#p").progressbar("setValue",100);
                    //停止定时器
                    window.clearInterval(timeID);
                    //将"开始"按钮生效
                    $(":button").removeAttr("disabled");
                }       
            },200); 
            //将"开始"按钮失效
            $(this).attr("disabled","disabled");       
        });
    </script>

window窗口
单击按钮，打开或关闭一个窗口

<input id="open1" type="button" value="打开窗口1"/>
    <input id="open2" type="button" value="打开窗口2"/>
    <hr/>   
    <div id="win1"></div> 
    <div id="win2"></div>
    <script type="text/javascript">
        $("#open1").click(function(){
            $("#win1").window({
                title:"我的窗口1",
                width:200,
                height:300,
                top:100,
                left:400,
                collapsible:false,
                minimizable:false,
                maximizable:false,
                closable:true,
                draggable:false,
                resizable:false,
                shadow:false,
                modal:false,
                href:"08_datebox.html"
            });
        });
        $("#open2").click(function(){
            $("#win2").window({
                title:"我的窗口2",
                width:200,
                height:300,
                top:100,
                left:800,
                collapsible:false,
                minimizable:false,
                maximizable:false,
                closable:true,
                draggable:false,
                resizable:false,
                shadow:false,
                modal:false
            });
        });
    </script>

dialog对话框
单击按钮，打开或关闭一个对话框

    <input id="open1" type="button" value="打开对话框1"/>
    <hr/>
    <div id="dd1"></div>   
    <script type="text/javascript">
        $("#open1").click(function(){
            $("#dd1").dialog({
                width:300,
                height:400,
                left:400,
                top:100,
                title:"对话框1",
                toolbar:[
                    {
                        text:'编辑',
                        iconCls:'icon-edit',
                        handler:function(){alert('edit')}
                    },
                    {
                        text:'帮助',
                        iconCls:'icon-help',
                        handler:function(){alert('help')}

                    }
                ],
                buttons:[
                    {
                        text:'确定',
                        handler:function(){alert('ok')}
                    },
                    {
                        text:'关闭',
                        handler:function(){
                            //关闭本对话框
                            $("#dd1").dialog("close");
                        }
                    }
                ],
                href:"07_combobox_2.html"
            }); 
        });
    </script>

messager消息窗口
单击按钮，弹出警告框
单击按钮，弹出确认框
单击按钮，弹出显示框
单击按钮，弹出输入框

    <input type="button" value="警告框"/>
    <input type="button" value="确认框"/>
    <input type="button" value="输入框"/>
    <input type="button" value="显示框"/>
    <hr/>
    <div style="margin:200px"></div>        
    <script type="text/javascript">
        $(":button").click(function(){
            var tip = $(this).val();
            tip = $.trim(tip);
            if("警告框" == tip){
                $.messager.alert("我的警告框","不能睡觉了","warning");
            }else if("确认框" == tip){
                $.messager.confirm("我的确认框","你确定在关闭本窗口吗?",function(flag){
                    alert(flag);
                });
            }else if("输入框" == tip){
                $.messager.prompt("我的输入框","你决定要学习Android还是JavaEE吗?",function(value){
                    alert(value);
                });
            }else if("显示框" == tip){
                $.messager.show({
                    title:"我的显示框",
                    msg:"不要太区分Android和JavaEE了",
                    showType:"fade",
                    width:200,
                    height:200,
                    timeout:1000
                });
            }
        });
    </script>

tree树
》选中树中某个子节点，弹出选中的内容　
》用树替代linkButton按钮

<ul id="ttt" class="easyui-tree" style="width:222px">   
        <li>   
            <span>第一章</span> 
        </li>   
        <li>   
            <span>第二章</span> 
            <ul>
                <li>
                    <span>第一节</span> 
                </li>
                <li>
                    <span>第二节</span> 
                    <ul>
                        <li>第一条</li>
                        <li>第二条</li>
                        <li>第三条</li>
                    </ul>
                </li>
            </ul>  
        </li>   
    </ul>

<ul id="ttt"></ul>
    <script type="text/javascript">
        $("#ttt").tree({
            url:"tree_data.json",
            lines:true
        });
    </script>
    <script type="text/javascript">
        $("#ttt").tree({
            onClick:function(node){
                alert(node.text);
            }
        });
    </script>

tree_data.json:

[
  {
    "id":1,
    "text":"第一章" 
  },
  {
    "id":2,
    "text":"第二章",
    "state":"closed",
    "children":[
       {
      "id":21,
          "text":"第一节" 
       },
       {
      "id":22,
          "text":"第二节"        
       },
       {
      "id":23,
          "text":"第三节",
          "state":"closed",
          "children":[
         {
        "id":231,
            "text":"第一条" 

         }, 
         {
        "id":232,
            "text":"第二条"    
         }
      ]      
       }
    ] 
  }
]

datagrid数据表格
DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数
* page：需要显示的页号
* rows：需要获取多少条记录

开发过程：
DB：

use js;
drop table if exists users;
create table users(
    id  int(5) primary key auto_increment,
    name varchar(4) not null,
    sal int(5) not null
);
insert into users(name,sal) values('小赵君',1000);
insert into users(name,sal) values('中赵君',1500);
insert into users(name,sal) values('大赵君',2000);
insert into users(name,sal) values('赵小君',2500);
insert into users(name,sal) values('赵中君',3000);
insert into users(name,sal) values('赵大君',3500);
insert into users(name,sal) values('赵君小',4000);
insert into users(name,sal) values('赵君中',4500);
insert into users(name,sal) values('赵君大',5000);
insert into users(name,sal) values('赵君',5500);
select id,name,sal from users;

Entity

public class User {
    private Integer id;
    private String name;
    private Integer sal;
    public User(){}
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getSal() {
        return sal;
    }
    public void setSal(Integer sal) {
        this.sal = sal;
    }
}

public class PageBean {
    private Integer currPageNO;
    private Integer perPageNO;
    private Integer allRecordNO;
    private Integer allPageNO;
    private List<User> userList = new ArrayList<User>();
    public PageBean(){}
    public Integer getCurrPageNO() {
        return currPageNO;
    }
    public void setCurrPageNO(Integer currPageNO) {
        this.currPageNO = currPageNO;
    }
    public Integer getPerPageNO() {
        return perPageNO;
    }
    public void setPerPageNO(Integer perPageNO) {
        this.perPageNO = perPageNO;
    }
    public Integer getAllRecordNO() {
        return allRecordNO;
    }
    public void setAllRecordNO(Integer allRecordNO) {
        this.allRecordNO = allRecordNO;
    }
    public Integer getAllPageNO() {
        return allPageNO;
    }
    public void setAllPageNO(Integer allPageNO) {
        this.allPageNO = allPageNO;
    }
    public List<User> getUserList() {
        return userList;
    }
    public void setUserList(List<User> userList) {
        this.userList = userList;
    }
}

JdbcUtil

public class JdbcUtil {
    private static ComboPooledDataSource dataSource = new ComboPooledDataSource();
    public static ComboPooledDataSource getDataSource() {
        return dataSource;
    }
}

src/c3p0-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
    <default-config>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/js</property>
        <property name="user">root</property>
        <property name="password">root</property>
        <property name="acquireIncrement">2</property>
        <property name="initialPoolSize">5</property>
        <property name="minPoolSize">1</property>
        <property name="maxPoolSize">5</property>
    </default-config>
</c3p0-config>

Dao：

public class UserDao {
    //select count(id) from users where 1=1 and name like '%赵%';
    public Integer getAllRecordNO(String sql) throws Exception{
        QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());
        Long temp = (Long) runner.query(sql,new ScalarHandler());
        return temp.intValue();
    }
    //select id,name,sal from users where 1=1 and name like '%赵%' limit ?,?;
    public List<User> findAllRecord(String sql,Integer start,Integer size) throws Exception{
        QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());
        return runner.query(sql,new BeanListHandler<User>(User.class),new Object[]{start,size});
    }
}

Service：

public class UserService {
    private UserDao userDao = new UserDao();
    //show("赵",2);
    public PageBean show(String keywords,Integer currPageNO) throws Exception{
        PageBean pageBean = new PageBean();

        String sqlA = "select count(id) from users where 1=1";
        String sqlB = "select id,name,sal from users where 1=1";

        if(keywords != null && keywords.trim().length() > 0){
            sqlA += " and name like '%" + keywords + "%'";
            sqlB += " and name like '%" + keywords + "%'";
        }

        pageBean.setCurrPageNO(currPageNO);

        Integer allRecordNO = userDao.getAllRecordNO(sqlA);
        pageBean.setAllRecordNO(allRecordNO);

        Integer allPageNO = null;
        if(pageBean.getAllRecordNO() % pageBean.getPageSize() == 0){
            allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize();
        }else{
            allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize() + 1;
        }
        pageBean.setAllPageNO(allPageNO);

        Integer size = pageBean.getPageSize();
        Integer start = (pageBean.getCurrPageNO()-1) * size;
        sqlB += " limit ?,?";
        List<User> userList = userDao.findAllRecord(sqlB,start,size);
        pageBean.setUserList(userList);

        return pageBean;
    }
}

Action：

public class UserServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        try{
            request.setCharacterEncoding("UTF-8");

            String keywords = request.getParameter("keywords");
            if(keywords==null || keywords.trim().length()==0){
                keywords = "";
            }
            System.out.println("keywords=" + keywords);//赵

            String temp = request.getParameter("page");
            if(temp == null || temp.trim().length()==0){
                temp = "1";
            }
            Integer currPageNO = Integer.parseInt(temp);
            System.out.println("currPageNO=" + currPageNO);//2

            UserService userService = new UserService();
            PageBean pageBean = userService.show(keywords,currPageNO);

            Map<String,Object> map = new LinkedHashMap<String,Object>();
            map.put("total",pageBean.getAllRecordNO());
            map.put("rows",pageBean.getUserList());

            JSONArray jsonArray = JSONArray.fromObject(map);
            String jsonJAVA = jsonArray.toString();
            jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);

            response.setContentType("text/html;charset=UTF-8");
            PrintWriter pw = response.getWriter();
            pw.write(jsonJAVA);
            pw.flush();
            pw.close();

        }catch(Exception e){
            e.printStackTrace();
        }
    }
}

WebRoot/userList.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link>
    <!-- 引入外部JS文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/locale/easyui-lang-zh_CN.js"></script>
  </head>
  <body>

    姓名:
    <input type="text" size="10px" id="name"/>
    <input type="button" value="查询" onclick="find()"/>
    <table id="dg"></table>  

    <script type="text/javascript">
        function find(){
            $("#dg").datagrid("load",{
                "keywords" : $.trim( $("#name").val() )
            });
        }
    </script>
    <script type="text/javascript">
        $("#dg").datagrid({   
            width:400, 
            url:"${pageContext.request.contextPath}/UserServlet",    
            fitColumns:true,
            columns:[[    
                {field:'id',title:'编号',width:100},    
                {field:'name',title:'姓名',width:100},    
                {field:'sal',title:'薪水',width:100}    
            ]],
            singleSelect:true,
            pagination:true,
            pageNumber:1,
            pageSize:2,
            pageList:[2]    
        });     
    </script>

  </body>
</html>