学习笔记 - EasyUI官方网站演示

EasyUI官方网站演示

撰写：2016/03/21

更新：2016/04/07

博客地址：http://www.cnblogs.com/gibbonnet/p/5362801.html

演示地址：http://www.jeasyui.com/tutorial/index.php

[TOC]

应用程序示例

使用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="width: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="width: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="width: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#