jQuryEasyUi 后台页面结构设计
<!DOCTYPE>
<html>
<head>
<title>页面LayOut</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.easyui.min.js" type="text/javascript"></script>
<link href="themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$('#_easyui_tree_3').click(function(){
$("#home").show('1000');
});
$('#_easyui_tree_4').click(function(){
});
<!--分页-->
var pager = $('#wordtable').datagrid('getPager');
pager.pagination({
showPageList : false,
buttons:[{
iconCls:'icon-search',
handler:function(){
alert('search');
}
},{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-edit',
handler:function(){
alert('edit');
}
}],
onBeforeRefresh:function(){
alert('正在刷新页面');
return true;
}
});
<!--行内可编辑-->
$('#wordtable').datagrid({
});
});
function doSave(){
/**数据网格（datagrid）组件包含两种方法来检索选中行数据：
getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。
getSelections：取得所有选中行数据，返回元素记录的数组数据。
var row=$('#wordtable').datagrid('getSelected');
if (row){
alert('Item ID:'+row.itemid);
}else{
alert('没有选中行');
}
**/
var ids = [];
var rows = $('#wordtable').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
ids.push(rows[i].itemid);
}
alert(ids.join('\n'));
}
function doDelete(){
var ids = [];
var rowsObj = $('#wordtable').datagrid('getSelections');
for(var i=0;i<rowsObj.length;i++){
ids.push(rowsObj[i].itemid);
}
alert(ids);
}
</script>
<style type="text/css">
.foot{
background-color:#d8e4fe;
text-align:center;
padding-top:15px;
height:30px;
}
.top{
background-color:#d8e4fe;
height:40px;
}
.title{
text-align:center;
padding-top:10px;
}
.exitlogin{
padding-right:10px;
padding-top:1px;
text-align:right;
color:red;
}
</style>
</head>
<body class="easyui-layout">
<!--北(上)-->
<div region="north" class="top" style="overflow: hidden;">
<div class="title">日语学习后台管理系统</div>
<div class="exitlogin">注销登录</div>
</div>
<!--西(左)-->
<div region="west" boder="true" split="true" style="width:15%;overflow: hidden;" title="导航菜单" >
<div id="treeInit" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">
<!--iconcls:图片-->
<div title="日语初级上单词" iconcls="icon-search" style="overflow: auto; padding:10px;">
<ul class="easyui-tree">
<li>
<span>日语单元一</span>
<ul>
<li>
<span>单词</span>
<ul>
<li>所有单词</li>
<li>重点单词</li>
</ul>
</li>
</ul>
</li>
<li>
<span>日语单元二</span>
<ul>
<li>
<span>单词</span>
<ul>
<li>所有单词</li>
<li>重点单词</li>
</ul>
</li>
</ul>
<ul>
<li>单元二所有语法</li>
</ul>
</li>
<li>
<span>总结</span>
</li>
</ul>
</div>
<!--iconcls:图片-->
<div title="日语初级下单词" iconcls="icon-search" style="overflow: auto; padding:10px;">
<ul class="easyui-tree">
<li>
<span>日语单元一</span>
<ul>
<li>
<span>单词</span>
<ul>
<li>所有单词</li>
<li>重点单词</li>
</ul>
</li>
</ul>
</li>
<li>
<span>日语单元二</span>
<ul>
<li>
<span>单词</span>
<ul>
<li>所有单词</li>
<li>重点单词</li>
</ul>
</li>
</ul>
</li>
<li>
<span>总结</span>
</li>
</ul>
</div>
<div iconcls="icon-help" title="关于">
<div style="padding:10px">版权所有:宝辰科技</br>电话:024-88888888</div>
</div>
</div>
</div>
<!--南(下)-->
<div region="south" class="foot">
<div>本页面所用框架jqueryEasyUI设计</div>
</div>
<!--东(右) ,主页,-->
<div id="mainPanle" region="center" style="overflow: hidden;">
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<!--日期插件
<input class="easyui-datebox"></input>
<div style="margin:20px 0;">
</div>-->
<!--给表格添加工具栏,只需通过 'toolbar' 属性附加工具栏（toolbar）到数据网格（datagrid）。singleSelect:true 单选 -->
<div id="gongjulan">
<div style="padding:5px">
开始日期:<input class="easyui-datebox"></input>
到 <input class="easyui-datebox"></input>
<!--下拉列表-->
Language:<input class="easyui-combobox" style="width:100px"
url="data/combobox_data.json"
valueField="id" textField="text" >
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
<div style="padding-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add1')">添加行</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add2')">添加列</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="doDelete()">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="doSave()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="javascript:window.location.reload() ">刷新</a>
</div>
</div>
<table id="wordtable" class="easyui-datagrid" title="背诵重点" style="width:700px;height:700px"
data-options="collapsible:true,url:'datagrid_data1.json',method:'get'" toolbar="#gongjulan" pagination="true">
<thead>
<tr>
<th data-options="field:'checkboxId',width:10" rowspan="2" checkbox="true"></th>
<th data-options="field:'itemid',width:80" rowspan="2" editor="{type:'numberbox',options:{precision:1}}">序号</th>
<th data-options="field:'write',width:100" rowspan="2">日语写法</th>
<th data-options="field:'speak',width:80" rowspan="2">日语读音</th>
<th data-options="field:'fanyi',width:80" rowspan="2">日译汉</th>
<th colspan="3">通过/不通过</th>
</tr>
<tr>
<th field="name4" width="50" align="right">日期</th>
<th field="name5" width="50" align="right">正确</th>
<th field="name6" width="50" align="right">错误</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div title="课后练习" style="padding:20px;overflow:hidden;" id="tab2">
content2
</div>
<div title="课后练习(2)" style="padding:20px;overflow:hidden;" id="tab3">
content3
</div>
</div>
</div>
</body>
</html>