1、EasyUI 是前端框架，封装大量 css和封装大量 JS

2、使用前端框架时，给标签定义class 属性，就会有样式和脚本功能了

3、data-options 属性是定义 easyui 属性的，如果 easyui 提供的属性和 html 标签属性相同,这个属性可以不写在 data-options 中

4、如果效果是静态的建议使用纯 html 标签方式，如果效果是动态建议使用 html 结合 js 方式

5、easyui 中所有脚本功能语法:

　　如果该效果(组件)是 abc,控制 abc 的语法

  1. $(“jquery 选择器获取到 abc”).abc({
  2.     属性名:值,
  3.     事件:function([参数]){}
  4. })

6、如果该效果(组件)是 abc,控制 abc 方法的语法

  1. $(“jquery 选择器获取到 abc”).abc(“方法名”);//调用方法
  2. $(“jquery 选择器获取到 abc”).abc(“方法名”,”参数”);//调用方法

7、EasyUI 适用于后台管理界面,不适用于前台项目页面

8、优点:处理服务器传递过来的 json数据能力比较强，只要服务器传回固定格式的json数据，几乎不用写代码，效果就会呈现出来

注：能复制绝对不手写，html为弱规范，就算写错一个字母也不会报错

easyUI项目案例详解

一、登陆界面（login.jsp）

　　1、Panel（面板）　　通过纯 html 标签方式创建面板

  1. <div id="p" class="easyui-panel" title="登录"
  2.             style="width:400px;height:200px;padding:10px;background:#fafafa;"
  3.             data-options="iconCls:'myicon-login'">
  4.                 <form action="login" method="post" id="login_form">
  5.                      <table width="225" align="center">
  6.                          <tr>
  7.                              <td colspan="2" style="text-align:center;font-size:20px; font-weight:bold">用户管理系统</td>
  8.                          </tr>
  9.                          <tr style="height:40px;">
  10.                              <td>登录名</td>
  11.                              <td><input type="text" name="username"/> </td>
  12.                          </tr>
  13.                          <tr style="height:40px;">
  14.                              <td>
  15.                                  密码
  16.                              </td>
  17.                              <td><input type="password" name="password"/> </td>
  18.                          </tr>
  19.                          <tr>
  20.                              <td colspan="2" align="right">
  21.                                  <a id="login_submit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登录</a>
  22.                              </td>
  23.                          </tr>
  24.                      </table>
  25.                 </form>
  26.         </div>

　　2、LinkButton（按钮）

  1. $(function(){
  2.     $("#btn").click(function(){
  3.         alert('easyui');
  4.     });
  5. });

　　3、Form（表单）

  1. $('#ff').form('submit', {
  2.     url:...,
  3.     onSubmit: function(){    
  4.  
  5.     },
  6.     success:function(data){
  7.         alert(data)
  8.     }
  9. });

　　4、Messager（消息窗口）

  1. $.messager.alert('警告','警告消息');
  2. $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
  3.     if (r){
  4.         alert('确认删除');
  5.     }
  6. });

二、主界面（main.jsp）

　　1、Layout（布局）

  1. <body class="easyui-layout">
  2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
  3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
  4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
  5.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
  7. </body>

　　2、Tree（树）　　通过html 结合 js 方式创建树

  1. <ul id="tt"></ul> 
  1. $('#tt').tree({
  2.     url:'tree_data.json'
  3. });

　　树控件数据格式化

　　每个节点都具备以下属性：
　　　　id：节点ID，对加载远程数据很重要。
　　　　text：显示节点文本。
　　　　state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
　　　　checked：表示该节点是否被选中。
　　　　attributes: 被添加到节点的自定义属性。
　　　　children: 一个节点数组声明了若干节点。

　　点击树节点

  1. $('#tt').tree({
  2.     onClick: function(node){
  3.         alert(node.text);  // 在用户点击的时候提示
  4.     }
  5. });

　　3、Tabs（选项卡）

  1. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
  2.     <div title="Tab1" style="padding:20px;display:none;">
  3.         tab1
  4.     </div>
  5.     <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
  6.         tab2
  7.     </div>
  8.     <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
  9.         tab3
  10.     </div>
  11. </div>  
  1. //如果此标题在选项卡中不存在，则新增选项卡，否则选中此标题对应的选项卡
  2. if($("#tt").tabs("getTab",title)==null){
  3.     $('#tt').tabs('add',{
  4.         title: '新选项卡面板',
  5.         //是否选中选项卡
  6.         selected: true,
  7.         //是否可以关闭
  8.         closable:true,
  9.         href：……
  10.     });
  11. }else{
  12.     $("#tt").tabs("select",title);
  13. }

 三、角色页面（role.jsp）

　　1、DataGrid（数据表格）

  1. <table id="dg"></table>  
  1. $('#dg').datagrid({
  2.     url:'datagrid_data.json',
  3.     columns:[[
  4.         {field:'code',title:'Code',width:100},
  5.         {field:'name',title:'Name',width:100},
  6.         {field:'price',title:'Price',width:100,align:'right'}
  7.     ]]
  8. });

　　数据表格控件数据格式化，分页时需要具备以下属性：

　　　　rows：当前页显示的数据

　　　　total：表中总个数

　　toolbar（定义工具栏）

  1. $('#dg').datagrid({
  2.     toolbar: [{
  3.         iconCls: 'icon-edit',
  4.         handler: function(){alert('编辑按钮')}
  5.     },'-',{
  6.         iconCls: 'icon-help',
  7.         handler: function(){alert('帮助按钮')}
  8.     }]
  9. });

　　2、Dialog（对话框窗口）

  1. <div id="dd">Dialog Content.</div>  
  1. $('#dd').dialog({
  2.     title: 'My Dialog',
  3.     width: 400,
  4.     height: 200,
  5.     closed: false,
  6.     cache: false,
  7.     href: '……',
  8.     modal: true
  9. });

四、角色编辑页面（role_edit.jsp）

　　1、Form（表单）

  1. $('#ff').form('submit', {
  2.     url:...,
  3.     onSubmit: function(){
  4.         // do some check
  5.         // return false to prevent submit;
  6.     },
  7.     success:function(data){
  8.         alert(data)
  9.     }
  10. });

　　2、Messager（消息窗口）

  1. $.messager.show({
  2.     title:'我的消息',
  3.     msg:'消息将在5秒后关闭。',
  4.     timeout:5000,
  5.     showType:'slide'
  6. });

easyUI详解的更多相关文章

  1. jQuery EasyUI 详解

    EasyUI 简介 easyui 是一种基于 jQuery 的用户界面插件集合. easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能. 使用 easyui 你不需要写很多 ...

  2. easyui下载包详解

    easyui包详解: 文件夹: demo--该目录下存放的是 EasyUI PC 版各插件的示例示例.如果不想在官网上查看演示,可以在该目录下找到相应的演示示例 demo-mobile--该目录下存放 ...

  3. 如约而至，Java 10 正式发布！ Spring+SpringMVC+MyBatis+easyUI整合进阶篇（十四）Redis缓存正确的使用姿势 努力的孩子运气不会太差，跌宕的人生定当更加精彩 优先队列详解(转载)

    如约而至,Java 10 正式发布!   3 月 20 日,Oracle 宣布 Java 10 正式发布. 官方已提供下载:http://www.oracle.com/technetwork/java ...

  4. 基于easyui开发Web版Activiti流程定制器详解（二）——文件列表

    上一篇我们介绍了目录结构,这篇给大家整理一个文件列表以及详细说明,方便大家查找文件. 由于设计器文件主要保存在wf/designer和js/designer目录下,所以主要针对这两个目录进行详细说明. ...

  5. Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）

    上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页  了解了LigerUI 中Grid的基本用法  现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...

  6. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  7. ASP.NET MVC深入浅出系列(持续更新) ORM系列之Entity FrameWork详解（持续更新） 第十六节：语法总结(3)(C#6.0和C#7.0新语法) 第三节：深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字 各种通讯连接方式 设计模式篇 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借

    ASP.NET MVC深入浅出系列(持续更新)   一. ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模 ...

  8. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  9. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

随机推荐

  1. bind，unbind，one

    刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...

  2. Django REST framework 第六章 ViewSets & Routers

    REST framework包含了一个可以处理ViewSets的抽象, 它允许开发人员专注于API的状态跟交互进行建模,并使得URL构建结构基于通用的约定自动处理. ViewSet类跟View类几乎相 ...

  3. java jvm和android DVM区别

      本文转自:http://blog.csdn.net/yujun411522/article/details/45932247   1.Android dvm的进程和Linux的进程, 应用程序的进 ...

  4. Java 进制间的转换

    package com.touch.onlinedu; public class Test { public static void main(String[] args) { // 1 : 0001 ...

  5. P4843 清理雪道

    题目地址:P4843 清理雪道 上下界网络流 无源汇上下界可行流 给定 \(n\) 个点, \(m\) 条边的网络,求一个可行解,使得边 \((u,v)\) 的流量介于 \([B(u,v),C(u,v ...

  6. 统计分析与R软件-chapter2-6

    2.6 列表与数据框 2.6.1 列表 1.列表的构造 列表是一种特别的对象集合,它的元素也由序号(下标)区分,但是各元素的类型可以是任意对象,不同元素不必是同一类型,元素本身允许是其他复杂数据类型, ...

  7. Windows PowerShell 入門（5）－制御構文

    Windows PowerShellにおける制御構文について学びます.数ある制御構文の中でもSwitch文は.他の言語に比べ豊富な機能が用意されています. 対象読者 Windows PowerShel ...

  8. 关于DateTime自带的AddSeconds等函数的坑

    在此记录一下今天在写一个进程查杀小程序时碰到的关于DateTime的问题:  第一次是用AddSeconds后的时间直接和DateTime.Now做相等判断. class Program { stat ...

  9. 用UDP实现聊天功能

    // SK003Dlg.cpp : implementation file //   #include "stdafx.h" #include "SK003.h" ...

  10. 修改Linux主机名与IP之间的映射关系

    linux主机版本: Distributor ID: UbuntuDescription: Ubuntu 14.10Release: 14.10 一.修改linux主机名 1.使用hostname命令 ...