SSM项目实战 之 EasyUI

目录

• EasyUI
  • 简介
    • 概述
    • 使用EasyUI
  • panel组件
    • 简介
    • 示例
    • JS形式及属性介绍
    • panel事件与方法
  • Window组件
    • 概述
    • 使用
    • 行为
  • dialog
    • 概述
    • 使用
  • tabs组件
    • 概述
    • 使用
      • 使用css
      • 使用js
    • 添加与删除标签
  • linkButton
    • 概述
  • accordion
    • 概述
    • 使用
    • 方法
  • DataGrid
    • 概述
    • 使用

EasyUI

简介

概述

• jQuery EasyUI是一组基于jQuery的UI插件集合
• jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
• 开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者只需要了解一些简单的html标签。
• jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。

使用EasyUI

• 创建web工程
• 引入easyUI样式与核心库

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/custom/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/custom/uimaker/icon.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/custom/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/custom/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/custom/easyui-lang-zh_CN.js"></script>

• 编写的两种形式

  方式1:使用css样式

  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超链接</a>
  

  方式2:使用js形式

  <a href="#" id="btn">超链接</a>
  <script type="text/javascript">
      $(function(){
          $("#btn").linkbutton({
              "iconCls":"icon-search"
          });
      });
  </script>
  

panel组件

简介

• 面板作为承载其它内容的容器。

• 这是构建其他组件的基础（比如：layout,tabs,accordion等）。

• 它还提供了折叠、关闭、最大化、最小化和自定义行为。

• 面板可以很容易地嵌入到web页面的任何位置。

示例

<div id="p" class="easyui-panel" title="My Panel"
	 style="width:500px;height:150px;padding:10px;background:#fafafa;"
	 data-options="iconCls:'icon-save',closable:true,
				collapsible:true,minimizable:true,maximizable:true">
	<p>panel content.</p>
	<p>panel content.</p>
</div>

JS形式及属性介绍

<div id="myPanel"></div>
<!-- 定义js -->
<script>
      $ (function() {
		  $("#myPanel"). panel({
			  title:'我的面板’，/*标题*/
			  width:300, /*宽度*/
			  height:300, /*高度*/
			  iconCls:'icon-add' , /*设置一个16x16图标的CSS类ID显示在面板左上角。 */
			  content:'myxq',/*面板主体内容。*/
			  collapsible:true, /*定义是否显示可折叠按钮。*/
			  minimizable:true, /*定义是否显示最小化按钮。*/
			  maximizable:true, /*定义是否显示最大化按钮。*/
			  closable:true, /*定义是否显示关闭按钮。*/
			  collapsed:false, /*定义是否在初始化的时候折叠面板。*/
			  href:'my.htm1', /*从URL读取远程数据并且显示到面板*/
			  loadingMessage:"正在加载...", /*在加载远程数据的时候在面板内显示一条消息。*/
			  cache:true, /*如果为true,在超链接载入时缓存面板内容。*/
			})
	  });
</script>

panel事件与方法

<script>
	//事件:直接在属性下方添加事件名称和对应的回调
    $(function() {
        $("#myPanel").panel({
            title:'我的面板',/*设置标题*/
            width:300,
            height:300,
            content:'Myxq',
            iconCls:'icon-save',/*定义面板左上角图标*/
            collapsible:true,/*定义是否显示可折叠按钮。*/
            closable:true,/*定义是否显示关闭按钮。*/
            maximizable:true,/*定义是否显示最大化按钮。*/
            href:'myxq.html',/*从URL读取远程数据并且显示到面板*/
            loadingMessage:'正在努力中...',
            /*事件名称:回调方法*/
            onClose:function () {
                alert("监听到窗口关闭");
            }
        });
    });

    //方法:通过方法可以设置panel的一些属性
    $("#mybtn").click(function () {
        /*重新设置面板的标题*/
        $("#myPanel").panel("setTitle",'新标题');
        $("#myPanel").panel("resize",{
            width: 600,
            height: 400
        });
    });
</script>

Window组件

概述

• 扩展自\(.fn.panel.defaults。使用\).fn.window.defaults重写默认值对象。
• 窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口
• 默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

使用

<div id="win"></div>
<script>
    $(function() {
          $(’#win').window({
              title:'窗口标题’，
              width: 600,
              height : 400,
              modal:false, /*定义是否将窗体显示为模式化窗口。*/
              draggable:true, /*定义是否能够拖拽窗口。*/
              shadow:true /*如果设置为true,在窗体显示的时候显示阴影。*/
          });
    });
</script>

行为

$('#win').window('open');  // 打开窗口
$('#win').window('close');  // 关闭窗口

dialog

概述

• 扩展自$.fn.window.defaults

• 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。

• 对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具

使用

<div id="myDialog"></div>
<!-- 通过已存在的DOM节点元素标签创建工具栏图标&第一种写法 -->
<div id="tt">
    <a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
<script>
	$(function() {
        //设置工具栏图标
        //第一种写法
        $(’#myDialog').dialog({
            title:'窗口标题’，
            width: 600,
            height : 400,
            tools:'#tt'/*设置工具栏图片*/
        });
        //第二种写法
		$(’#myDialog').dialog({
            title:'窗口标题’，
            width: 600,
            height : 400,
            tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },
                {
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }
            ]
        });

        //设置toolbar
		$(’#myDialog').dialog({
            title:'窗口标题’，
            width: 600,
            height : 400,
            toolbar:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },
                {
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }
            ]
        });

        //设置buttons
    $(’#myDialog').dialog({
            title:'窗口标题’，
            width: 600,
            height : 400,
            buttons:[
            	{
                    text:'保存',
                    handler:function(){alert("保存")}
            	}，
            	{
                    text:'关闭',
                    handler:function(){alert("关闭")}
            	}
            ]
        });
	});
</script>

tabs组件

概述

• 选项卡显示一批面板。

• 但在同一个时间只会显示一个面板。

• 每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮

使用

使用css

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" >tab1</div>
    <div title="Tab2" data-options="closable:true">tab2</div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">tab3</div>
</div>

使用js

$("#myTabs").tabs({
	width:500,
	height:500,
	plain:false,
	fit:false,/*设置为true时，选项卡的大小将铺满它所在的容器。*/
	border:true,/*设置为true时，显示选项卡容器边框。*/
	tabPosition:'top',/*toolPosition*/
	headerWidth:50, /*headerWidth 选项卡标题宽度，为'left'或'right'有效*/
	tools:[{ /*工具栏添加在选项卡面板头的左侧或右侧*/
		iconCls:'icon-add',
		handler:function(){
			alert('添加')
		}
	},{
		iconCls:'icon-remove',
		handler:function(){
			alert('保存')
		}
	}]
})

添加与删除标签

<script>
	$(function () {
		var i = 1;
		$("#tabs").tabs({
			width:600,
			height:400,
			plain:false,
			fit:true,
			tools:[{
				/*添加*/
				iconCls:'icon-add',
				handler:function(){
					 $("#tabs").tabs('add',{
						 title:'选项卡'+i,
						 selected:true,
						 closable:true,
						 content:'选项卡Content'+ i++
					 })
				}
			},{
				/*删除*/
				iconCls:'icon-remove',
				handler:function(){
					/*1.获取选中的选项卡*/
					var tab = $("#tabs").tabs('getSelected');
					/*2.获取选项卡索引 */
					var index = $("#tabs").tabs('getTabIndex',tab);
					/*3.关闭标签*/
					$("#tabs").tabs('close',index);
				}
			}],
			toolPosition:'right',
			tabPosition:'top',
			/*headerWidth:100*/

		});
	});
</script>		

linkButton

概述

• 按钮组件使用超链接按钮创建。
• 它使用一个普通的标签进行展示。
• 它可以同时显示一个图标和文本,或只有图标或文字。
• 按钮的宽度可以动态和折叠/展开以适应它的文本标签。

使用

<a id="btn" href="#">easyui</a>
<script>	
    $('#btn').linkbutton({
        iconCls: 'icon-search',/*设置图标*/
        plain:false,/*显示简洁效果 */
        text:'我是按钮文字',
        iconAlign:'right',/*可用值有：'left','right'*/
        disabled:true/*是否禁用按钮*/
    });
    /*方法*/
    $('#btn').linkbutton('enable');
</script>	

accordion

概述

• 分类空间允许用户使用多面板，但在同一时间只会显示一个。
• 每个面板都内建支持展开和折叠功能。

使用

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
	<div title="Title1" >
		content1
	</div>
	<div title="Title2" data-options="iconCls:'icon-reload',selected:true" >
		content2
	</div>
	<div title="Title3">
		content3
	</div>
</div>

方法

//获取当前面板
var pp = $('#aa').accordion('getSelected');

DataGrid

概述

• 数据表格以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。

使用

$('#dg').datagrid({
	width:1000,
	height:500,
	url:'datagrid_data.json',/*加载的数据*/
	columns:[
		[{field:'id',checkbox:true},
		{field:'productid',title:'商品编号',width:200},
		{field:'productname',title:'商品名称',width:200},
		{field:'unitcost',title:'商品单价',width:200,align:'center'} ,
		{field:'status',title:'商品状态',width:200,align:'center'} ,
		{field:'attr1',title:'商品属性',width:200,align:'center'} ,
		 ]
	],
	fit:true,
	fitColumns:true,/*自动展开/收缩列的大小*/
	scrollbarSize:0,/*去除最右侧空间*/
	rownumbers:true,/*显示行号*/
	checkOnSelect:true,
});