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();
		}
	
	}