标签：easyui后台管理模板
1.后台界面框架主页面
<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>
<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>
<div data-options="title:‘添加数据‘" style="padding: 10px;">
<ul class="easyui-tree">
<li><a href="#" onclick="addTab(‘添加用户‘,‘user/add_user.html‘)">添加用户</a></li>
<li><a href="#" onclick="addTab(‘添加管理员‘,‘user/add_user.html‘)">添加管理员</a>
</li>
</ul>
</div>
<div data-options="title:‘删除数据‘" style="padding: 10px;">
<ul class="easyui-tree">
<li><a href="#" onclick="addTab(‘删除用户‘,‘user/delete_user.html‘)">删除用户</a></li>
</ul>
</div>
<div data-options="title:‘修改数据‘" style="padding: 10px;">
<ul class="easyui-tree">
<li><a href="#" onclick="addTab(‘修改用户‘,‘user/update_user.html‘)">修改数据</a></li>
</ul>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
</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>
<tr>
<td>001</td>
<td>Tommy</td>
<td>111111</td>
</tr>
<tr>
<td>002</td>
<td>Jery</td>
<td>222222</td>
</tr>
<tr>
<td>003</td>
<td>Mike</td>
<td>333333</td>
</tr>
<tr>
<td>004</td>
<td>Susun</td>
<td>444444</td>
</tr>
<tr>
<td>005</td>
<td>Mary</td>
<td>55555</td>
</tr>
<tr>
<td>006</td>
<td>Mary</td>
<td>6666666666</td>
</tr>
</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>
<a href="#" class="easyui-linkbutton"
data-options="iconCls:‘icon-edit‘,plain:true" onclick="editUser()">编辑用户</a>
<a href="#" class="easyui-linkbutton"
data-options="iconCls:‘icon-remove‘,plain:true"
onclick="removeUser()">删除用户</a>
</div>
</body>
4.list.html 页涉及到的javascript代码
<script type="text/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‘,
handler:function(){
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‘
});
});
</script>
本文出自 “没有思想就没有未来” 博客，请务必保留此出处http://pingwei.blog.51cto.com/6658030/1616107
标签：easyui后台管理模板
原文地址：http://pingwei.blog.51cto.com/6658030/1616107
