<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后台管理系统模板</title> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.1/themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.1/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="js/JQuery-zTree-v3.5.15/css/zTreeStyle/zTreeStyle.css"> <script type="text/javascript" src="js/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/jQuery-zTree-v3.5.15/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/extends.js"></script> <script type="text/javascript" src="js/common.js"></script> </head> <body class="easyui-layout"> <!-- 头部标题 --> <div data-options="region:'north',border:false" style="height:60px; padding:5px; background:#F3F3F3"> <a href="#"><span class="northTitle">后台管理系统模板</span></a> <span class="loginInfo">登录用户:admin 姓名:管理员 角色:系统管理员</span> </div> <!-- 左侧导航 --> <div data-options="region:'west',split:true,title:'导航菜单', fit:false" style="width:200px;"> <ul id="menuTree" class="ztree"></ul> </div> <!-- 页脚信息 --> <div data-options="region:'south',border:false" style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;"> <span id="sysVersion">系统版本:V1.0</span> <span id="nowTime"></span> </div> <!-- 内容tabs --> <div id="center" data-options="region:'center'"> <div id="tabs" class="easyui-tabs"> <div title="首页" style="padding:5px;display:block;" > <p>模板说明:</p> <ul> <li>主界面使用 easyui1.3.5</li> <li>导航树使用 JQuery-zTree-v3.5.15</li> </ul> <p>特性说明:</p> <ul> <li>所有弹出框均显示在顶级父窗口</li> <li>修改easyui window拖动,移动时显示窗口而不显示虚线框,并限制拖动范围</li> </ul> </div> </div> </div> </body> </html>
index.js
/* 主页加载方法 */ //系统时间显示 setInterval("document.getElementById('nowTime').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); var setting = { data: { simpleData: { enable: true } }, view: { selectedMulti: false }, callback: { onClick:function(e, id, node){ var zTree = $.fn.zTree.getZTreeObj("menuTree"); if(node.isParent) { zTree.expandNode(); } else { addTabs(node.name, node.file); } } } }; var zNodes =[ { id:1, pId:0, name:"系统管理", open:true}, { id:11, pId:1, name:"用户管理", file:"user/user.html"}, { id:12, pId:1, name:"数据备份", file:"backup.html"}, { id:13, pId:1, name:"权限管理", file:"authority.html"}, { id:14, pId:1, name:"角色管理", file:"role.html"}, { id:2, pId:0, name:"父节点", open:true}, { id:21, pId:2, name:"子节点21", file:""}, { id:22, pId:2, name:"子节点22", file:""}, { id:23, pId:2, name:"子节点23", file:""} ]; $(function() { $.fn.zTree.init($("#menuTree"), setting, zNodes); var zTree = $.fn.zTree.getZTreeObj("menuTree"); //中间部分tab $('#tabs').tabs({ border:false, fit:true, onSelect: function(title, index){ var treeNode = zTree.getNodeByParam("name", title, null); zTree.selectNode(treeNode); } }); $('.index_panel').panel({ width:300, height:200, closable:true, minimizable:true, title: 'My Panel' }); }); //添加一个选项卡面板 function addTabs(title, url, icon){ if(!$('#tabs').tabs('exists', title)){ $('#tabs').tabs('add',{ title:title, content:'<iframe src="'+url+'" frameBorder="0" border="0" scrolling="no" style="width: 100%; height: 100%;"/>', closable:true }); } else { $('#tabs').tabs('select', title); } }
user.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户管理</title> <link rel="stylesheet" type="text/css" href="../css/default.css"> <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.5.1/themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.5.1/themes/icon.css" /> <script type="text/javascript" src="../js/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/extends.js"></script> <script type="text/javascript" src="../js/common.js"></script> <script> $(function(){ $("#tt").datagrid({ url:"datagrid.json?page=1&rows=10", height:$("#body").height()-$('#search_area').height()-5, width:$("#body").width(), idField:'userId', //data: data, method:'get', singleSelect:true, nowrap:true, fitColumns:true, rownumbers:true, showPageList:false, columns:[[ {field:'userName',title:'用户名',width:100,halign:"center", align:"left"}, {field:'name',title:'姓名',width:100,halign:"center", align:"left"}, {field:'sex',title:'性别',width:100,halign:"center", align:"left"}, {field:'department',title:'部门',width:100,halign:"center", align:"left"} ]], toolbar:'#tt_btn', pagination:true, onDblClickRow:function(rowIndex, rowData){ viewDetail(rowData.userId); } }); //新增弹出框 $("#save").on("click", function(){ $("#win").window({ width:350, height:250, modal:true, title:'新增用户' }); $('#win').window('open'); }); //修改 $("#update").on("click", function(){ $.messager.alert("提示","update", "info"); }); //删除 $("#delete").on("click", function(){ $.messager.alert("提示","delete", "info"); }); }) function viewDetail(date, id){ $parent.messager.alert("提示","查询详细", "info"); } //监听窗口大小变化 window.onresize = function(){ setTimeout(domresize,300); }; //改变表格宽高 function domresize(){ $('#tt').datagrid('resize',{ height:$("#body").height()-$('#search_area').height()-5, width:$("#body").width() }); } </script> </head> <body class="easyui-layout" > <div id="body" region="center" > <!-- 查询条件区域 --> <div id="search_area" > <div id="conditon"> <table border="0"> <tr> <td>用户名:</td> <td ><input name="userName" id="userName" /></td> <td> 性别:</td> <td><input name="sex" id="sex" /></td> <td> 部门:</td> <td><input name="department" id="department" /></td> <td> <a href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search" plain="true">查询</a> <a href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-reset" plain="true" >重置</a> </td> </tr> </table> </div> <span id="openOrClose">111</span> </div> <!-- 数据表格区域 --> <table id="tt" style="table-layout:fixed;"></table> <!-- 表格顶部工具按钮 --> <div id="tt_btn"> <a href="javascript:void(0)" id="save" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a> <a href="javascript:void(0)" id="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a> <a href="javascript:void(0)" id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a> </div> </div> <div id="win" style="display: none"> <!-- 内容 --> <div class="content"> <table width="280" border="0" align="center" cellpadding="3"> <tr> <td width="80" align="right"><label for="userName"><span class="x">*</span>用户名:</label></td> <td width="200"> <input type="text" name="userName" id="userName" /></td> </tr> <tr> <td align="right"><label for="password"><span class="x">*</span>密码:</label></td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td align="right"><label for="name"><span class="x">*</span>姓名:</label></td> <td><input type="text" name="name" id="name" /></td> </tr> <tr> <td align="right"><label for="sex"><span class="x">*</span>性别:</label></td> <td><input type="text" name="sex" id="sex" /></td> </tr> <tr> <td align="right"><label for="department"><span class="x">*</span>部门:</label></td> <td><input type="text" name="department" id="department" /></td> </tr> </table> </div> <!-- 弹出框按钮 --> <div class="windowButton"> <a id="addUser_saveAndAdd" class="easyui-linkbutton my-dialog-button" plain="true" icon="icon-ok" href="javascript:void(0)" > 保存并新增</a> <a id="addUser_save" class="easyui-linkbutton my-dialog-button" plain="true" icon="icon-save" href="javascript:void(0)" > 保存</a> <a id="addUser_cancel" class="easyui-linkbutton my-dialog-button" plain="true" icon="icon-cancel" href="javascript:void(0)" >取消</a> </div> </div> </body> </html>