javaWeb核心技术第十四篇之easyui
网站是分为网站的前台和网站的后台.
前台--给用户看的 例如:商城
后台--给管理员看的 例如:商城后台 目的:用来添加维护数据 BootStrap:jsp 页面显示,效果好,美观,适合作为用户界面.
EasyUI : jsp页面,快速开发,格式统一,美观效果一般. EasyUI里面有很多组件(功能模块):有自己的特使,但编写简单,只需固定html代码结构. EasyUI环境搭建:
1.导入css , 需要2个css
2.导入jquery,需要2个js
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/demo.css">
<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> EasyUI的定义方式:
easyui规定:我们只需要提供简单html代码结构,就可以生成特殊的效果.
easyui的定义方式:
1.html代码结构.
1.1:需要有class="easyui-*" *表示组件的名称.
1.2:easyui提供另外一个属性:data-options:里面可以写easyui提供的属性.
data-options格式:json格式:key:value,key:value...... 2.js渲染.
2.1:语法 : 对象.组件名称();
2.2:语法 : 对象.组件名称({key:value,key:value.....}); 例如:
html例子:
<div class="easyui-window" data-options="title:'this is 标题',width:200,height:400"></div> js例子:
<div id="myDiv"></div>
<script>
//如果使用js渲染,语法 : 对象.组件名称({key:value,key:value.....});
$("#myDiv").window({
title:'这是新的标题',
width:400,
height:400
});
</script>
Easy--属性--事件--方法:
easyui的属性 : 事件,方法
属性 : 组件自身特点,事件和属性可以写在一起,格式:key:value,key:value....
事件 : (被动)完成某件事情后触发的动作.
$(对象).组件名称({
属性:属性值,
属性:属性值,
事件:函数
}) 方法:(主动)主动完成某件事件.
语法:
$(对象).组件名称(方法名称,方法的参数) <div class="easyui-dialog" data-options="width:200,height:200",onBeforeClose:function(){
alert('窗口即将关闭');
}"></div> 例如:
<div id="myDiv2"></div>
<input type="button" value="关闭窗口" onclick="closeDialog()">
<input type="button" value="打开窗口" onclick="openDialog()">
//事件
<script type="text/javascript">
$("#myDiv2").dialog({
width:200,
height:200,
onBeforeClose:function(){
alert('窗口即将关闭')
}
}); function closeDialog() {
//方法设置的标准语法 : $(对象).组件名称(方法名称[,方法的值])
$("#myDiv2").dialog("close"); }
function openDiaLog() {
$("#myDiv2").dialog("open");
}
</script> 表单:
默认情况下,表单是传统表单,传统表单同步,easyui的表单是异步的.
<script>
$("#ff").from({
url:"${pageContext.request.contextPath}/DemoServlet",//等效action属性,表单提交的路径.
onSubmit : function() {
//在此处可以做效验,表单提交前效验.
//alert(1);
//return false;
},
success:function(data) {
//回调函数,此处是没有判断状态码为200情况,以后是需要判断data值.
alert(data)
}
});
</script>
Tabs:选项卡
<script>
function addTabs(){
var flag = $("#tt").tabs("exists","工资条"); if(flag){
//如果面板已经存在,选中该面板
$("#tt").tabs("select","工资条");
}else{
//如果面板不存在,添加面板
$("#tt").tabs("add",{
title : "工资条", //标题
content : "Tab Body", //内容
closable : true //是否可以关闭 });
} }
</script> 下拉框:
<input id="cc" name="dept" value="请选择">
<script>
$("#cc").combobox({
//可以加载远程事件,支持json easyui都支持json
url:"combobox_data.json",
valueField : "id", //对应value值,需要将json的key放在此处, // <option value="">文本</option>
textFiedld : "name" //将要显示的文本的key放在此处 });
</script> Datagrid:数据表单
url : 加载远程的数据,支持json
表格中的field的字段名称,必须和json的一致,如果一致,表单将自动填充json数据.
<table class="easyui-datagrid" data-options="url:'datagrid_data.json',fit:true">
<thead>
<tr>
<th data-options="field:'id',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'age',width:100,align:'right'">价格</th>
<th data-options="field:'pimage',width:100,align:'right',formatter:function( value , rows , index){ return '<img src='+value + '>';}">图片</th>
</tr>
</thead>
</table> <table id="dg"></table>
value : 表示当前json的值
rows : 表示当前行的对象
index : 表示当前行的索引
<script>
$('#dg').datagrid({
url:'datagrid_data.json', //url : 加载远程的数据 支持json
columns:[[
{field:'id',title:'id',width:100},
{field:'name',title:'Name',width:100},
{field:'age',title:'age',width:100,align:'right'},
{field:'pimage',title:'pimage',width:100,align:'right',
formatter:function(value , rows , index){
return "<img src='"+value+"' style='width:40px'>";
}
}
]],
fit:true ,//表格自动填充
fitColumns:true, //列自动填充
autoRowHeight:true,//高度填充
toolbar:[{
iconCls: 'icon-edit',
handler: function(){alert('编辑按钮')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('帮助按钮')}
}],
singleSelect:true, //只能选择一个
pagination:true,//页面的底部加上分页条
pageNumber:1, //默认打开第一页
pageSize:5,
pageList:[5,10,15,20,25,30]
});
</script> 后台代码:
接收的分页参数:
响应回去的数据: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//问题1: 页面需要传入 pageSize 和 pageNumber
//问题2: 响应数据 是什么? 页面需要什么数据来进行分页 //0.编码
request.setCharacterEncoding("utf-8");
response.setHeader("content-type", "text/html;charset=utf-8");
//1.获得数据
String pageNumberStr = request.getParameter("page");
String pageSizeStr = request.getParameter("rows"); int pageNumber = Integer.valueOf(pageNumberStr);
int pageSize = Integer.valueOf(pageSizeStr); //int pageNumber= 1;
//int pageSize = 5; //2.处理数据
ProductService service = new ProductService();
//List<Product> pList = service.findAll();
//如果响应回去的只是list 不会进行分页
//List<Product> pList = service.findByPage( pageNumber , pageSize);
EasyUIPageBean<Product> easyUIPageBean = service.findByEasyUIPage( pageNumber , pageSize); //需要响应的数据{total:28 , "rows" : [ {} , {} ,{} ]} ==>> 可以使用map 也可以封装对象
//但目前是 [{key:value,key:value},{key:value,key:value}..] //3.响应
Gson gson = new Gson();
String json = gson.toJson(easyUIPageBean);
System.out.println(json);
response.getWriter().print(json);
} catch (Exception e) {
e.printStackTrace();
} }
javaWeb核心技术第十四篇之easyui的更多相关文章
- javaWeb核心技术第十二篇之分页和条件
分页:limit ?,? 参数1 : startIndex 开始索引. 参数2 : pageSize 每页显示的个数 n 表示第几页 给定一个特殊的单词 pageNumber select * fro ...
- 【第十四篇】easyui datagrid导出excel
<a class="btn btn-app" onclick="exportExcel()"><i class="fa fa-edi ...
- 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译)
解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...
- 第十四篇 Integration Services:项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- Python之路【第十四篇】:AngularJS --暂无内容-待更新
Python之路[第十四篇]:AngularJS --暂无内容-待更新
- 【译】第十四篇 Integration Services:项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- 跟我学SpringCloud | 第十四篇:Spring Cloud Gateway高级应用
SpringCloud系列教程 | 第十四篇:Spring Cloud Gateway高级应用 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 ...
- SpringBoot第二十四篇:应用监控之Admin
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前一章(S ...
- Egret入门学习日记 --- 第十四篇(书中 5.4~5.6节 内容)
第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...
随机推荐
- elasticsearch7.5.0+kibana-7.5.0+cerebro-0.8.5集群生产环境安装配置及通过elasticsearch-migration工具做新老集群数据迁移
一.服务器准备 目前有两台128G内存服务器,故准备每台启动两个es实例,再加一台虚机,共五个节点,保证down一台服务器两个节点数据不受影响. 二.系统初始化 参见我上一篇kafka系统初始化:ht ...
- 【nginx+keepalived】nginx+keepalived搭建高可用
一.结构及环境 1.1 环境介绍 操作系统:centos7 nginx+keepalived:106.53.73.200 master nginx+keepalived:182.254.184.102 ...
- NLP(十六)轻松上手文本分类
背景介绍 文本分类是NLP中的常见的重要任务之一,它的主要功能就是将输入的文本以及文本的类别训练出一个模型,使之具有一定的泛化能力,能够对新文本进行较好地预测.它的应用很广泛,在很多领域发挥着重要 ...
- 一个proc预编译代码时coredump的问题分析
最近有同事在搞编译环境迁移,碰上一个问题让我帮他看一下. 他建了一个新目录,然后把现在的代码拷过去,编译的时候发现有一个文件编译不了一执行就出现core,不知道啥情况. 我进到他的编译环境 ...
- vue-UI(mui和muit-UI)
MUI和MUIT-UI 这里使用了连个UI---mui和mit-ui mit-ui是基于vue.js的,而mui是一个高性能前端框架(H5+提供的),类似于bootstrap,所以在引入时区别还是很大 ...
- 由于ie浏览器ajax缓存 导致layui table表格重载失败的解决办法
where: { time:new Date()//增加一个数据接口的额外参数→时间戳 }
- ProcessExplorer 工具下载
链接:https://pan.baidu.com/s/1RPYkFqIMvBX2OKvTm0bgkw 提取码:4v5v
- Java之缓冲流(字节/字符缓冲流)
概述 缓冲流,也叫高效流,是对4个基本的 FileXxx 流的增强,所以也是4个流,按照数据类型分类: 字节缓冲流: BufferedInputStream , BufferedOutputStrea ...
- 从eslint规则学点JavaScript知识
在知识星球陆续发了些eslint小知识,意在通过eslint知识去了解规则内部的原理,汇总在此: prefer-const 含义:始终用const定义你从不修改的变量,如果会被修改则使用let,永不使 ...
- Java对象导论
Java对象导论 1.1 抽象过程 万物皆对象. 程序是对象的集合(即:类),他们通过发送消息(调用方法)来告知彼此要做的. 每个对象都有自己的由其他对象所构成的存储(引用其他对象或基本类型,即组合) ...