java easyui开发_javaWeb核心技术第十四篇之easyui

网站是分为网站的前台和网站的后台.

前台--给用户看的 例如:商城

后台--给管理员看的 例如:商城后台 目的:用来添加维护数据

BootStrap:jsp 页面显示,效果好,美观,适合作为用户界面.

EasyUI : jsp页面,快速开发,格式统一,美观效果一般.

EasyUI里面有很多组件(功能模块):有自己的特使,但编写简单,只需固定html代码结构.

EasyUI环境搭建:1.导入css , 需要2个css2.导入jquery,需要2个js

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例子:

//如果使用js渲染,语法 : 对象.组件名称({key:value,key:value.....});

$("#myDiv").window({

title:'这是新的标题',

width:400,

height:400});Easy--属性--事件--方法:

easyui的属性 : 事件,方法

属性 : 组件自身特点,事件和属性可以写在一起,格式:key:value,key:value....

事件 : (被动)完成某件事情后触发的动作.

$(对象).组件名称({

属性:属性值,

属性:属性值,

事件:函数

})

方法:(主动)主动完成某件事件.

语法:

$(对象).组件名称(方法名称,方法的参数)

alert('窗口即将关闭');

}">

例如:

//事件

width:200,

height:200,

onBeforeClose:function(){

alert('窗口即将关闭')

}

});

function closeDialog() {//方法设置的标准语法 : $(对象).组件名称(方法名称[,方法的值])

$("#myDiv2").dialog("close");

}

function openDiaLog() {

$("#myDiv2").dialog("open");

}表单:

默认情况下,表单是传统表单,传统表单同步,easyui的表单是异步的.

url:"${pageContext.request.contextPath}/DemoServlet",//等效action属性,表单提交的路径.

onSubmit : function() {//在此处可以做效验,表单提交前效验.//alert(1);//return false;

},

success:function(data) {//回调函数,此处是没有判断状态码为200情况,以后是需要判断data值.

alert(data)

}

});Tabs:选项卡

var flag= $("#tt").tabs("exists","工资条");if(flag){//如果面板已经存在,选中该面板

$("#tt").tabs("select","工资条");

}else{//如果面板不存在,添加面板

$("#tt").tabs("add",{

title :"工资条", //标题

content : "Tab Body", //内容

closable : true //是否可以关闭

});

}

}下拉框:

url:"combobox_data.json",

valueField :"id", //对应value值,需要将json的key放在此处,//文本

textFiedld : "name" //将要显示的文本的key放在此处

});Datagrid:数据表单

url : 加载远程的数据,支持json

表格中的field的字段名称,必须和json的一致,如果一致,表单将自动填充json数据.

编码名称价格图片

value : 表示当前json的值

rows : 表示当前行的对象

index : 表示当前行的索引

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 "";

}

}

]],

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]

});后台代码:

接收的分页参数:

响应回去的数据:protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, 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 = newProductService();//List pList = service.findAll();//如果响应回去的只是list 不会进行分页//List pList = service.findByPage( pageNumber , pageSize);

EasyUIPageBean easyUIPageBean =service.findByEasyUIPage( pageNumber , pageSize);//需要响应的数据{total:28 , "rows" : [ {} , {} ,{} ]} ==>> 可以使用map 也可以封装对象//但目前是 [{key:value,key:value},{key:value,key:value}..]//3.响应

Gson gson = newGson();

String json=gson.toJson(easyUIPageBean);

System.out.println(json);

response.getWriter().print(json);

}catch(Exception e) {

e.printStackTrace();

}

}