easyui datagrid url不请求请求_Java框架从入门到装逼,用EasyUI绘制主界面

1.引入资源包

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

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

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

c362327d4b08f9f3e8f704204f2a1b5f.png

2.绘制主界面

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

a16309ed48e14d4a5516134a7c229baa.png

目录结构如下:

6a52103f450df034aa28cca899a19306.png

代码:

 学生管理主界面

现在,我们来画四个按钮:

  
新增用户 编辑用户 删除用户 密码重置

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

5bfc1cc5866ae9dcdd21630b35e229b3.png

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

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

代码:

  

自定义css样式:

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

页面效果:

5c884a4fc439338e98609deeb5f4493a.png

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

  

最终效果:

ff50f55128fc81e1e46561b2ae91b0a4.png

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值