学习笔记

EasyUI官方网站演示

撰写：2016/03/21
更新：2016/04/07
博客地址：http://www.cnblogs.com/gibbonnet/p/5362801.html
演示地址：http://www.jeasyui.com/tutorial/index.php

目录

• EasyUI官方网站演示
  • 应用程序示例
    • 使用jQuery EasyUI创建CURD应用)
      • 创建可以编辑的表格
    • 创建RSS阅读器
      • 布局器
      • 表格事件
      • 树
  • 树演示 TreeGrid
    • 基本使用
    • 表格动作
    • 复选框
    • 上下文菜单
    • 可编辑表格
    • 复杂的表格
  • 参考文档

应用程序示例

使用jQuery EasyUI创建CURD应用)

• datagrid class="easyui-datagrid"
• dialog class="easyui-dialog"
• form
• messager $.messager.show

创建可以编辑的表格

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
指定列的编辑器
editor="{type:'validatebox',options:{required:true}}"
指定载入数据、保存、更新、删除操作的服务器路径

$('#dg').edatagrid({
    url: 'get_users.php',
    saveUrl: 'save_user.php',
    updateUrl: 'update_user.php',
    destroyUrl: 'destroy_user.php'
});

创建RSS阅读器

• layout 布局器 class="easyui-layout"
• datagrid 表格 $('#dg').datagrid
• tree 树 $('#t-channels').tree

布局器

region="north" border="false"
region="west"
region="center"

表格事件

onSelect 选择事件
onLoadSuccess 数据载入成功后事件

树

onSelect 选择事件
onLoadSuccess 数据载入成功后事件

树演示 TreeGrid

演示地址：http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=

基本使用

<table title="Fluid Browser" class="easyui-treegrid" style="700px;height:250px"
       data-options="
                     url: 'treegrid_data1.json',
                     method: 'get',
                     idField: 'id',
                     treeField: 'name'
                     ">
<thead>
  <tr>
    <th data-options="field:'name'" width="50%">Name(50%)</th>
    <th data-options="field:'size'" width="20%" align="right">Size(20%)</th>
    <th data-options="field:'date'" width="30%">Modified Date(30%)</th>
  </tr>
</thead>
</table>

增加连线 lines: true

显示合计行 showFooter:true

表格动作

允许折叠 collapsible: true,

全部折叠 $('#tg').treegrid('collapseAll');

全部展开 $('#tg').treegrid('collapseAll');

展开到指定节点 $('#tg').treegrid('expandTo',21).treegrid('select',21);

复选框

属性设置 checkbox: true,

定制复选框

checkbox: function(row){
	var names = ['Java','eclipse.exe','eclipse.ini'];
	if ($.inArray(row.name, names)>=0){
		return true;
	}
}

上下文菜单

属性：onContextMenu: onContextMenu

显示菜单

function onContextMenu(e,row){
	if (row){
		e.preventDefault();
		$(this).treegrid('select', row.id);
		$('#mm').menu('show',{
			left: e.pageX,
			top: e.pageY
		});                
	}
}

定义菜单

<div id="mm" class="easyui-menu" style="120px;">
  <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
  <div onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
  <div class="menu-sep"></div>
  <div onclick="collapse()">Collapse</div>
  <div onclick="expand()">Expand</div>
</div>

定义动作

function removeIt(){
	var node = $('#tg').treegrid('getSelected');
	if (node){
		$('#tg').treegrid('remove', node.id);
	}
}
function collapse(){
	var node = $('#tg').treegrid('getSelected');
	if (node){
		$('#tg').treegrid('collapse', node.id);
	}
}
function expand(){
	var node = $('#tg').treegrid('getSelected');
	if (node){
		$('#tg').treegrid('expand', node.id);
	}
}

可编辑表格

开始编辑

var row = $('#tg').treegrid('getSelected');
editingId = row.id
$('#tg').treegrid('beginEdit', editingId);

结束编辑

$('#tg').treegrid('beginEdit', editingId);

取消编辑

$('#tg').treegrid('cancelEdit', editingId);

复杂的表格

合并列，合并行

<table title="Reports using TreeGrid" class="easyui-treegrid" style="700px;height:250px"
		data-options="
			url: 'treegrid_data3.json',
			method: 'get',
			rownumbers: true,
			showFooter: true,
			idField: 'id',
			treeField: 'region'
		">
	<thead frozen="true">
		<tr>
			<th field="region" width="200">Region</th>
		</tr>
	</thead>
	<thead>
		<tr>
			<th colspan="4">2009</th>
			<th colspan="4">2010</th>
		</tr>
		<tr>
			<th field="f1" width="60" align="right">1st qrt.</th>
			<th field="f2" width="60" align="right">2st qrt.</th>
			<th field="f3" width="60" align="right">3st qrt.</th>
			<th field="f4" width="60" align="right">4st qrt.</th>
			<th field="f5" width="60" align="right">1st qrt.</th>
			<th field="f6" width="60" align="right">2st qrt.</th>
			<th field="f7" width="60" align="right">3st qrt.</th>
			<th field="f8" width="60" align="right">4st qrt.</th>
		</tr>
	</thead>
</table>

参考文档

http://www.jeasyui.com/documentation/index.php#