<body class="easyui-layout">
<div data-options="region:'north',split:false,border:true"
style="overflow: hidden; height: 80px; background-color: #d8e4fe;">
<div class="footer">歡迎xxxx登陸</div>
</div>
<div data-options="region:'south',split:false,border:true"
style="overflow: hidden; height: 40px;">
<div class="footer">版權所有 @Copyright By XXXXXX</div>
<div data-options="region:'west',title:'功能菜單',split:false"
style="width: 200px;">
<div id="left_accordion" class="easyui-accordion"
style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">
<div data-options="title:'檢視資料',selected:true"
style="overflow: auto; padding: 10px">
<ul class="easyui-tree">
<li><a href="#" onclick="addTab('使用者清單','user/list_user.html')">使用者玩家</a></li>
</ul>
<div data-options="title:'添加資料'" style="padding: 10px;">
<li><a href="#" onclick="addTab('添加使用者','user/add_user.html')">添加使用者</a></li>
<li><a href="#" onclick="addTab('添加管理者','user/add_user.html')">添加管理者</a>
</li>
<div data-options="title:'删除資料'" style="padding: 10px;">
<li><a href="#" onclick="addTab('删除使用者','user/delete_user.html')">删除使用者</a></li>
<div data-options="title:'修改資料'" style="padding: 10px;">
<li><a href="#" onclick="addTab('修改使用者','user/update_user.html')">修改資料</a></li>
<div id="mainPanel" data-options="region:'center',split:false"
style="overflow: auto;">
<div id="home" class="easyui-tabs">
<div title="home" style="padding: 10px;">
<p>home</p>
</body>
2.涉及到的javascript代碼
<script type="text/javascript">
function addTab(title, url) {
if ($('#home').tabs('exists', title)) {
$('#home').tabs('select', title);
}
else
{
var content = '<iframe scrolling="auto" frameborder="0" src="'
+ url + '" style="width:100%;height:600px;"></iframe>';
/* var content = '<div style="padding:20px;">' + url + '</div>'; */
$('#home').tabs('add', {
title : title,
closable : true,
selected : true,
content : content
});
$(document).ready(function() {
</script>
3.在list.html頁
<body style="width: 600px;">
<table id="user_table" title="MyUsers" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id',width:50">id</th>
<th data-options="field:'name',width:50">name</th>
<th data-options="field:'password',width:50,align:'center'">password</th>
</tr>
</thead>
<tbody>
<td>001</td>
<td>Tommy</td>
<td>111111</td>
<td>002</td>
<td>Jery</td>
<td>222222</td>
<td>003</td>
<td>Mike</td>
<td>333333</td>
<td>004</td>
<td>Susun</td>
<td>444444</td>
<td>005</td>
<td>Mary</td>
<td>55555</td>
<td>006</td>
<td>6666666666</td>
</tbody>
</table>
<div class="easyui-pagination" id="pager"
style="background: #efefef; border: 1px solid #ccc; width: 600px;"></div>
<div id="toolbar">
<a href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true" onclick="newUser()">增加使用者</a>
data-options="iconCls:'icon-edit',plain:true" onclick="editUser()">編輯使用者</a>
data-options="iconCls:'icon-remove',plain:true"
onclick="removeUser()">删除使用者</a>
4.list.html 頁涉及到的javascript代碼
$(function() {
$('#pager').pagination({
total : 87,
pageSize : 20,
buttons : [ {
iconCls : 'icon-reload',
handler : function() {
alert('hello world')
},{
iconCls:'icon-add',
handler:function(){
alert('add');
iconCls:'icon-edit',
alert('編輯');
}],
showRefresh:false,
showPageList:true,
displayMsg : '第{from}條{to}條 共{total}條'
$(function(){
$('#user_table').datagrid({
url:'user.json',
title:'使用者清單',
rownumbers:true,
fitColumns:true,
singleSelect:true,
toolbar:'#toolbar'
![EasyUI DataGrid 動态隐藏/顯示列 支援拖拽改變顯示順序或拖拽隐藏/顯示需求一、toolbar中添加彈窗按鈕二、增加彈窗統一處理邏輯整體效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)