百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

Java框架从入门到装逼，用EasyUI绘制主界面

toyiye 2024-09-16 05:58 3 浏览 0 评论

1.引入资源包

在上一节中，我们把基本的框架都搭好了，用了Spring，SPringMVC。这一节，我们先来画页面，前端框架采用EasyUI来实现。

easyui是一种基于jQuery的用户界面插件集合，使用easyui我们就不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。

现在，我们把easyui需要的资源包拷贝进来。

2.绘制主界面

界面的话，我们就用html来实现吧，在WebContent目录下新建一个页面叫index.html。

目录结构如下：

代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>学生管理主界面</title>
 <!-- 引入EasyUI资源文件 -->
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
 <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
</body>
</html>

现在，我们来画四个按钮：

 <!-- 工具栏 -->
 <div id="toolbar">
 <a href="javascript:openUserAddPage()" class="easyui-linkbutton" iconCls="icon-add" >新增用户</a>
 <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" >编辑用户</a>
 <a href="javascript:delUser()" class="easyui-linkbutton" iconCls="icon-remove">删除用户</a>
 <a href="javascript:resetPassword()" class="easyui-linkbutton" iconCls="icon-modifyPassword">密码重置</a>
 </div>

可以看到每一个按钮都是用a标签来做的，我们给每一个a标签添加一个 easyui-linkbutton 的class，就可以实现这一效果：

同时，每一个按钮还有一个点击事件，对应的函数我们先不写，预留一个接口。

接下来，我们绘制搜索栏，到时候可以根据某些条件来查询学生数据。

代码：

 <!-- 搜索栏 -->
 <div id="searchBox">
 用户名 <input type="text" id="username_search" size="20" onkeydown="if(event.keyCode==13) searchUser()"/>
 昵称 <input type="text" id="nickname_search" size="20" onkeydown="if(event.keyCode==13) searchUser()"/>
 
 <a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
 </div>

自定义css样式：

#searchBox{
 margin-top: 16px;
 background: #fff8f8;
 padding: 4px;
 font-size: 14px;
 width: 500px;
}

页面效果：

最后，画数据列表，我们使用easyUI给我们提供的datagrid组件来实现：

 <br>
 
 <!-- 数据列表 -->
 <table id="grid0" class="easyui-datagrid" title="用户列表" style="width:980px;height:550px"
 data-options="pagination:true,pageSize:10,rownumbers:true,fitColumns:true,
 singleSelect:false,collapsible:false,url:''">
 <thead>
 <tr>
 <th data-options="field:'ck',checkbox:true"></th>
 <th data-options="field:'username',width:80">用户名</th>
 <th data-options="field:'password',width:100">密码</th>
 <th data-options="field:'nickname',width:120">昵称</th>
 <th data-options="field:'xb',width:0,hidden:true" >性别</th>
 <th data-options="field:'vip',width:0,hidden:true">贵族等级</th>
 <th data-options="field:'xb_displayname',width:80" >性别</th>
 <th data-options="field:'vip_displayname',width:80">贵族等级</th>
 <th data-options="field:'createtime',width:250"">创建时间</th>
 <th data-options="field:'updatetime',width:250">最后更新时间</th>
 </tr>
 </thead>
 </table>

最终效果：

打开浏览器访问：http://localhost/student/index.html 即可看到该页面。

本节我们就简单的画一个页面，下一讲我们继续写后台代码。

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表