我要评论网站是分为网站的前台和网站的后台.
前台--给用户看的 例如:商城
后台--给管理员看的 例如:商城后台 目的:用来添加维护数据
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();
}
}
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论