jqueryEasyUi 后台页面结构设计
2016-03-27 21:13
567 查看
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>
相关文章推荐
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- 一步一步跟我学易语言之第二个易程序菜单设计
- 注册表的组织结构
- 样式表CSS布局经验
- 在winform下实现左右布局多窗口界面的方法之续篇
- SQLSERVER的非聚集索引结构深度理解
- 调整SQLServer2000运行中数据库结构
- C#基础语法:结构和类区别详解
- 深入c# 类和结构的区别总结详解
- c#结构和类的相关介绍
- 基于逻辑运算的简单权限系统(原理,设计,实现) VBS 版
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页
- 使用CSS框架布局的缺点和优点小结
- div+CSS网页布局的意义与副作用原因小结第1/2页
- C#中结构(struct)的部分初始化和完全初始化实例分析
- 在winform下实现左右布局多窗口界面的方法
- C#中类与结构的区别实例分析
- C#枚举类型与结构类型实例解析