黑马day45EasyUI总结。

黑马day45EasyUI总结。

/*

1、EasyUI 概述
   A、EasyUI 作用:做页面的的框架 第三方工具
      与 BootStrap 类似：
      JQuery 插件 内置了大量的 CSS 样式与 JS 实现，大大提高我们的开发效率
   B、既然 EasyUI 和 BootStrap 类似，为什么还要学习 EasyUI?
      前提知识:一个程序有前台和后台之分
	       前台 ----- 一般用户
	       后台 ----- 管理员'
      UI 实现的设计原则:
               前台 ----- 重视觉效果 重用户体验  ----------------- BootStrap
	       后台 ----- 重应用，重功能实现，页面简洁，功能清晰 - EasyUI
      
   

2、EasyUI 搭建环境
   A、下载 EasyUI
      easyUI 目录结构:
	demo --- 演示案例
	local -- 国际化的语言包
	plugins - 插件
	src ----- 源码
	themes -- 主题
	jquery.easyui.min.js--- EasyUI 的核心实现，是 plugins 中插件的集合
	
   B、演示 EasyUI 版本的 HelloWorld
      1、创建 EasyUI 模板
         怎么导入 js 以及 Css 文件?
	 demo 中的导入方式:
	 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	 <link rel="stylesheet" type="text/css" href="../demo.css">
	 <script type="text/javascript" src="../../jquery.min.js"></script>
	 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
     
      2、根据路径查找并导入相关 JS 以及 CSS
      3、注意：最后还缺少图片素材，根据 CSS 中的图片资源的引用查找并导入图片素材。


3、EasyUI 基本语法
   dialog ---- 对话框
   A、渲染
      将一个 HTML 标签变为某种样式的 EasyUI 的组件，此过程称之为渲染
   B、EasyUI 渲染方式
      方式1:以 HTML 方式进行渲染 ---- 在 HTML 中使用键值对格式的属性
	    <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   
	     data-options="iconCls:'icon-save',resizable:false,modal:true"> 
      方式2:以 JS 方式进行渲染 ------ 在 JS 中使用 键值对格式属性
	     $('#dd').dialog({    
			    title: 'My Dialog',    
			    width: 400,    
			    height: 200,    
			    closed: false,    
			    href: '${pageContext.request.contextPath}/SendTime',    
			    modal: true   
			});   
 
    C、EasyUI 渲染时的三个方面
       1、属性 ---- 键值对
          组件的一些参数配置
       2、事件 
          onXxx:function(){}
       3、方法 ---- 组件的一些行为
          $("#xxx").函数名(参数)
          


4、EasyUI 组件 ---- Dialog
   Dialog 方法:
     window("open");
     window("close");
     window("refresh","资源路径")
   
   Dialog 属性:
     class="easyui-dialog" ---- 声明这是一个 Dialog
     title="My Dialog"  ------- 标题
     style="width:400px;height:200px;" --- 尺寸   
     iconCls:'icon-save' ---- 图标	=======值是css样式名称。
     resizable:false, ------- 大小可变
     modal:true ------------- 模态模式

5、EasyUI 组件 ---- Datagrid(重点)
   DataGrid ----- 数据表格(网格)
   前提:页面中显示数据，最常用的方式是表格，因为比较规整，符合一般人的审美
   两个要素:
     Grid ---- 表格 ----- 创建
     Data ---- 数据 ----- 设置
   重要属性:
     url ---- 指向数据资源
     formatter ---- 可以设置【某列】数据的显示样式
     使用语法:
       formatter: function(value){
		return 对value处理后的结果;
		//return "<font color='red'>" + value + "</font>";
       }
   分页属性(重要):
     pagination:true,//显示分页组件
     pageList:[5,10,15,20],//显示一页记录数的列表。
   
6、EasyUI 组件 ---- form(重点)
   EasyUI 中经常把 form 和 ajax 结合在一起使用
   A、EasyUI 的 form 可以进行简单校验
   B、可以以ajax 的方式进行表单提交
   C、可以进行表单填充
      form("load","json数据")
   D、可以进行表单清空
      form("clear")

7、案例
   删除商品
   分析:
     A、为按钮添加单击事件
     B、事件实现：
        以 ajax 的方式删除
	提交当前被选定的商品的 pid
     C、服务器根据 pid 删除
     D、响应删除结果
     E、DataGrid 数据重新加载
   
   修改商品
   分析:
     A、为修改按钮添加单击事件
     B、显示修改窗体，回显商品信息
     C、取消按钮单击,直接关闭
     D、保存按钮单击,表单 ajax 方式提交到服务器
     E、服务器修改数据库
     F、给响应，解析响应，DataGrid 加载


*/