登陆首页界面：index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图示管理系统</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="图书管理" />
<meta name="description" content="图书管理系统" />
<script src="./scripts/boot.js" type="text/javascript"></script>
<script src="./scripts/core.js" type="text/javascript"></script>
<style type="text/css">
html, body{
margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
}
.logo
{
font-family:"微软雅黑", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:28px;
font-weight:bold;
cursor:default;
position:absolute;top:25px;left:14px;
line-height:28px;
color:#444;
}
.topNav
{
position:absolute;right:8px;top:12px;
font-size:12px;
line-height:25px;
}
.topNav a
{
text-decoration:none;
font-weight:normal;
font-size:12px;
line-height:25px;
margin-left:3px;
margin-right:3px;
color:#333;
}
.topNav a:hover
{
text-decoration:underline;
}
.mini-layout-region-south img
{
vertical-align:top;
}
</style>
</head>
<body>
<div class="mini-layout" style="width:100%;height:100%;">
<div title="north" region="north" class="app-header" bodyStyle="overflow:hidden;" height="80" showHeader="false" showSplit="false">
<div class="logo" onclick="window.location.href='index.html'" style="cursor:pointer">图书管理系统</div>
<!-- <div class="topNav">
<a href="../index.html">首页</a> |
<a href="../demo/index.html">在线示例</a> |
<a href="../docs/api/index.html">Api手册</a> |
<a href="../index.html#tutorial">开发教程</a> |
<a href="../index.html#quickstart">快速入门</a>
</div> -->
<div style="position:absolute;right:12px;bottom:8px;font-size:12px;line-height:25px;font-weight:normal;">
皮肤：
<select id="selectSkin" onchange="onSkinChange(this.value)" style="width:100px;margin-right:10px;" >
<optgroup label="传统风格">
<option value="default">default</option>
<option value="blue">blue</option>
<option value="pure">pure</option>
<option value="gray">gray</option>
<option value="olive2003">olive2003</option>
<option value="blue2003" >blue2003</option>
<option value="blue2010" >blue2010</option>
<option value="bootstrap">bootstrap</option>
<option value="jqueryui-cupertino">jqueryui-cupertino</option>
<option value="jqueryui-smoothness">jqueryui-smoothness</option>
</optgroup>
<optgroup label="扁平风格">
<option value="cupertino" selected>cupertino</option>
<option value="metro-white" >metro-white</option>
<option value="metro-green">metro-green</option>
<option value="metro-orange">metro-orange</option>
<option value="metro-gray">metro-gray</option>
<option value="metro-blue">metro-blue</option>
</optgroup>
</select>
尺寸：
<select id="selectMode" onchange="onModeChange(this.value)" style="width:100px;" >
<option value="default">Default</option>
<option value="medium" selected >Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
<div showHeader="false" region="south" style="border:0;text-align:center;" height="25" showSplit="false">
Copyright © 上海普加软件有限公司版权所有
</div>
<div region="west" title="在线演示" showHeader="true" bodyStyle="padding-left:1px;" showSplitIcon="true" width="230" minWidth="100" maxWidth="350">
<ul id="demoTree" class="mini-tree" showTreeIcon="true" style="width:100%;height:100%;"
enableHotTrack="true" onbeforeexpand="onBeforeExpand" >
<li>
<span expanded="false">用户信息</span>
<ul>
<li><a href="datagrid.html" target="main">用户管理 </a></li>
<li><a href="datagrid.html" target="main">部门管理 </a></li>
<li><a href="datagrid.html" target="main">部门管理1 </a></li>
</ul>
</li>
<li>
<span expanded="false">图书信息</span>
<ul>
<li><a href="book.html" target="main">图书管理</a></li>
<li><a href="book.html" target="main">借还管理 </a></li>
</ul>
</li>
</ul>
</div>
<div title="center" region="center" style="border:0;">
<div id="mainTabs" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;"
onactivechanged="onTabsActiveChanged"
>
<div title="Demo">
<iframe onload="onIFrameLoad()" src="welcome.html" id="mainframe" frameborder="0" name="main" style="width:100%;height:100%;" border="0"></iframe>
</div>
<div title="Code">
<iframe id="codeframe" frameborder="0" name="code" style="width:100%;height:100%;" border="0"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
mini.parse();
function onBeforeExpand(e) {
var tree = e.sender;
var nowNode = e.node;
var level = tree.getLevel(nowNode);
var root = tree.getRootNode();
tree.cascadeChild(root, function (node) {
if (tree.isExpandedNode(node)) {
var level2 = tree.getLevel(node);
if (node != nowNode && !tree.isAncestor(node, nowNode) && level == level2) {
tree.collapseNode(node, true);
}
}
});
}
</script>
登陆的起始界面（登陆窗口）：login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用户登录</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
width:100%;height:100%;margin:0;overflow:hidden;
}
</style>
<script src="./scripts/boot.js" type="text/javascript"></script>
</head>
<body >
<div id="loginWindow" class="mini-window" title="用户登录" style="width:350px;height:185px;"
showModal="true" showCloseButton="false"
>
<div id="loginForm" style="padding:15px;padding-top:10px;">
<table >
<tr>
<td style="width:60px;"><label for="username$text">帐号：</label></td>
<td>
<input id="username" name="username" class="mini-textbox" required="true" style="width:150px;"/>
</td>
</tr>
<tr>
<td style="width:60px;"><label for="pwd$text">密码：</label></td>
<td>
<input id="pwd" name="pwd" onvalidation="onPwdValidation" class="mini-password" requiredErrorText="密码不能为空" required="true" style="width:150px;" onenter="onLoginClick"/>
<a href="#" >忘记密码?</a>
</td>
</tr>
<tr>
<td></td>
<td style="padding-top:5px;">
<a onclick="onLoginClick" class="mini-button" style="width:60px;">登录</a>
<a onclick="onResetClick" class="mini-button" style="width:60px;">重置</a>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
mini.parse();
var loginWindow = mini.get("loginWindow");
loginWindow.show();
function onLoginClick(e) {
var form = new mini.Form("#loginWindow");
form.validate();
if (form.isValid() == false) return;
var o = form.getData();
$.ajax({
url: "userLogin",
type: 'post',
async: false,//非异步
data: [o][0],
cache: false,
success: function (text) {
if(text!="success"){
alert("账号或密码错误！");
}else{
loginWindow.hide();
mini.loading("登录成功，马上转到系统...", "登录成功");
setTimeout(function () {
window.location = "./index.html";
}, 1500);//每隔1.5秒执行一次当前函数。当前功能：1.5秒以后跳转到首页
}
}
});
}
function onResetClick(e) {
var form = new mini.Form("#loginWindow");
form.clear();
}
/
function isEmail(s) {
if (s.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
return false;
}
function onUserNameValidation(e) {
if (e.isValid) {
if (isEmail(e.value) == false) {
e.errorText = "必须输入邮件地址";
e.isValid = false;
}
}
}
function onPwdValidation(e) {
if (e.isValid) {
if (e.value.length < 5) {
e.errorText = "密码不能少于5个字符";
e.isValid = false;
}
}
}
</script>
</body>
</html>
功能主页界面：datagrid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid 数据表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="./css/demo.css" rel="stylesheet" type="text/css" />
<script src="./scripts/boot.js" type="text/javascript"></script>
</head>
<body>
<h1>用户管理</h1>
<div style="width:100%;">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
<table style="width:100%;">
<tr>
<td style="width:100%;">
<a class="mini-button" iconCls="icon-add" onclick="add()">增加</a>
<a class="mini-button" iconCls="icon-add" onclick="edit()">编辑</a>
<a class="mini-button" iconCls="icon-remove" onclick="remove()">删除</a>
</td>
<td style="white-space:nowrap;">
<input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>
<a class="mini-button" onclick="search()">查询</a>
</td>
</tr>
</table>
</div>
</div>
<div id="datagrid1" class="mini-datagrid" style="width:100%;" allowResize="true"
url="findUserInfoList" idField="userid" multiSelect="true"
>
<div property="columns">
<!--<div type="indexcolumn"></div> -->
<div type="checkcolumn" ></div>
<div field="userno" width="120" headerAlign="center" allowSort="true">帐号</div>
<div field="username" width="120" headerAlign="center" allowSort="true">姓名</div>
<div field="sex" width="100" renderer="onGenderRenderer">性别</div>
<div field="address" width="100" allowSort="true">地址</div>
<div field="phone" width="100" >电话</div>
<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd hh:mm:ss" allowSort="true">创建日期</div>
</div>
</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
grid.load();
grid.sortBy("createtime", "desc");
function add() {
mini.open({
url: bootPATH + "../userInfoWindow.html",
title: "新增用户", width: 600, height: 260,
onload: function () {
var iframe = this.getIFrameEl();
var data = { action: "new"};
iframe.contentWindow.SetData(data);
},
ondestroy: function (action) {
grid.reload();
}
});
}
function edit() {
var row = grid.getSelected();//选中一条对象
if (row) {
mini.open({
url: bootPATH + "../userInfoWindow.html",//以boot.js为默认地址
title: "编辑员工", width: 600, height: 260,
onload: function () {
var iframe = this.getIFrameEl();
var data = { action: "edit", id: row.userid};
iframe.contentWindow.SetData(data);
},
ondestroy: function (action) {
grid.reload();
}
});
} else {
alert("请选中一条记录");
}
}
//删除
function remove() {
var rows = grid.getSelecteds();//可以选中多条记录
if (rows.length > 0) {
if (confirm("确定删除选中记录？")) {
var ids = [];
for (var i = 0, l = rows.length; i < l; i++) {
var r = rows[i];
ids.push(r.userid);
}
var id = ids.join(',');//id1,id2,id3
grid.loading("操作中，请稍后......");
$.ajax({
url: "deleteUserInfo?userids=" +id,
success: function (text) {
grid.reload();
},
error: function () {
}
});
}
} else {
alert("请选中一条记录");
}
}
function search() {
var key = mini.get("key").getValue();
grid.load({ key: key });
}
function onKeyEnter(e) {
search();
}
/
function onBirthdayRenderer(e) {
var value = e.value;
if (value) return mini.formatDate(value, 'yyyy-MM-dd');
return "";
}
function onMarriedRenderer(e) {
if (e.value == 1) return "是";
else return "否";
}
var Genders = [{ id: 1, text: '男' }, { id: 0, text: '女'}];
function onGenderRenderer(e) {
for (var i = 0, l = Genders.length; i < l; i++) {
var g = Genders[i];
if (g.id == e.value) return g.text;
}
return "";
}
</script>
</body>
</html>
页面展示：
扫一扫
4593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
