javaWeb核心技术第十四篇之easyui
程序员文章站
2022-08-03 20:54:32
网站是分为网站的前台和网站的后台. 前台--给用户看的 例如:商城 后台--给管理员看的 例如:商城后台 目的:用来添加维护数据 BootStrap:jsp 页面显示,效果好,美观,适合作为用户界面. EasyUI : jsp页面,快速开发,格式统一,美观效果一般. 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核心技术第七篇之HTTP、Tomcat、Servlet、Request和Response
-
.NET Core实战项目之CMS 第十四章 开发篇-防止跨站请求伪造(XSRF/CSRF)攻击处理
-
javaWeb核心技术第三篇之JavaScript第一篇
-
javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式
-
java基础第十四篇之Map
-
java核心技术第六篇之断言、日志、包装类型和工具类
-
javaWeb核心技术第六篇之BootStrap
-
javaWeb核心技术第十四篇之easyui
-
带你从零学大数据系列之Java篇---第十四章:正则表达式
-
java核心技术第二篇之数据库SQL语法