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>