easyui实例案例介绍

最新推荐文章于 2025-06-19 14:19:06 发布

原创

最新推荐文章于 2025-06-19 14:19:06 发布 · 2.3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

这篇博客简要介绍了easyui的一些基本实例，包括datagrid数据表格、validatebox验证框、message提示框架和layout布局。作者建议深入学习easyui的官方文档以获取更全面的知识。

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

本篇主要例举easyui的实例如下：博主这里也只是简单的介绍了一些easyui常用的，建议学习的话，可以参考easyui的学习文档api学习，可能要更加好，更加全面，博主这里可能介绍的并不全面。希望对你有点帮助，加油!

easyui datagrid数据表格一：

运行项目：输入：http://localhost:8080/easyuiDemo1/easyui/12-datagrid.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyui数据表格</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

</head>
 <body>
 <table id="tt" width="100%"></table>
 </body>
 <script type="text/javascript">
$('#tt').datagrid({
    url : '/UserServlet?method=findAll',
    title:'用户列表',
    height:800,
    fitColumns:true,//扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
    columns:[[   
        {field:'id',title:'编号',width:80},
        {field:'username',title:'用户名',width:80},
        {field:'password',title:'密码',width:80},
        {field:'sex',title:'性别',width:80},
        {field:'age',title:'年龄',width:80},
        {field:'birthday',title:'出生日期',width:80},
        {field:'city',title:'所属城市',width:80},
        {field:'salary',title:'薪资',width:80},
        {field:'starttime',title:'开始时间',width:200},
        {field:'endtime',title:'结束时间',width:200},
        ]],
        pagination:true,  //在 datagrid 的底部显示分页栏
        pageSize:10,      //初始化页码 ,每页显示多少条
        pageList:[5,10,15,20],  //初始化页面尺寸的选择列表
});

</script>
</html>

效果图如下：