Easyui入门学习知识

第一步：什么是easyui(容易)

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

学习目地：

1. 掌握前端框架的相关概念
2. 理解什么是组件
3. 学习API文档的查看(重点)
4. jquery的深入学习

第二步：在项目中添加easyui支持

需要下载一个：jquery-easyui-1.5.1.zip压缩文件.

内容：

第三步：导入需要的文档和包

1. 导入jquery

2. 导入easyui

3. 导入easyui所需要的css

在WebContent下面创建一个common - - > heab.jsp:下面是源代码方便与每个页面不要每次导入

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%><% String ctx=request.getContextPath();request.setAttribute("ctx", ctx);%>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-			 1.5.1/themes/icon.css">

<script src="${ctx}/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script src="${ctx}/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

4. 创建easyui组件

4.1：直接通过html标签创建(定义easyui属性)

data-*：H5之后一个新属性，用来给程序员添加自定义属性的，data-yf="name:zs,age:20" 
    
4.2：JS创建 ：

jquery.min.js
 
min：js原代码压缩，空格、回车、换行，studentName-->s_，下载js压缩工具

第四步：开始easyui的布局

1.第一种：panel(面板)

2.第二种：tabs(选项卡)

3.第三种：accordion(分类)

4.第四种：layout(布局)

---- 布局属性

---- 面板属性

---- 分类属性

---- 选项卡属性

第五步：树形表格

TreeGrid（树形表格）
扩展自$.fn.datagrid.defaults。使用$.fn.treegrid.defaults重写默认值对象。

树形表格用于显示分层数据表格。它是基于数据表格、组合树控件和可编辑表格。树形表格允许用户创建可定制的、异步展开行和显示在多列上的分层数据。

1. tree：
   根节点
   父节点/子节点
   枝节点/叶节点

   < iframe scrolling="no" frameborder="0" src="" width="99%" height="99%">< /iframe >