学习笔记 - EasyUI官方网站演示
EasyUI官方网站演示
撰写：2016/03/21
更新：2016/04/07
博客地址：http://www.cnblogs.com/gibbonnet/p/5362801.html
演示地址：http://www.jeasyui.com/tutorial/index.php
应用程序示例
使用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>
