这篇博客是在实习期间在公司写的，公司让用miniui来作为软件开发的前端框架，在学习了一段时间后做一个总结，算是给自己实习的一份小礼物吧。
首先，先来看看效果图，虽然比不上工作经验丰富的同事，但也可借鉴一番！
我设计显示了三个界面，这是第一个界面，只是简单的数据的增删改查界面，是我用来做后面两个界面的练手界面。
这是第二个界面，用来进行新增信息的界面，新增的信息保存后会在第三个界面显示。
这是第三个界面，用来显示表格数据的，同时也可进行修改和删除操作！
上面三张图就是这次要做的内容，希望对miniui新手有帮助！
一：准备篇
1：安装JDK、安装MyEclipse、安装Sqlserver(公司用的数据库)、tomcat7.0。
以上这些都是基础的内容，这里就不赘述了，不知道的度娘吧！
2：建数据库+建表。建数据库就不说了，可自行建立和取名字，给出两张表的数据字典，可以根据数据字典来建表。
这是第一张表，表的名字可以用数据字典上的名字。
这是第二张表，名字也按照数据字典来命名。
3：测试数据。在测试数据库中数据是否可以被MyEclipse获取到时，先在建好的表中添加适量的数据，数据的添加注意字段的类型。
3.1：ＪＤＢＣ连接。写一个TestDB.java类,并写jdbc连接代码。
3.2：在MyEclipse中创建数据库对象并连接。
点击Finish后右键数据库-->Open就可打开你创建的数据库
二：界面篇
1：框架界面，outlookmenu.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'outlookmenu.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/boot.js"></script>
<style type="text/css">
body{
margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
}
.header{
background:url(${pageContext.request.contextPath}/demo/back_color.gif) repeat-x 0 -1px
}
.Node{
background:url(Notes_Large.png)no-repeat;width:32px;height:32px;
}
.Reports{
background:url(Reports_Large.png)no-repeat;width:32px;height:32px;
}
</style>
</head>
<body>
<div id="layout1" class="mini-layout" style="width:100%;height:100%">
<div class="header" region="north" height="70px" showSplit="false" showHeader="false">
<table align="left">
<tr>
<td rowspan="3"><h1 style="margin:0;padding:15px;cursor:default;font-family:'Trebuchet MS',Arial,sans-serif;width:300px">微讯通管理系统</h1>
</td>
</tr>
</table>
<table align="right">
<tr align="right">
<td ><label name="username" class="mini-text">用户名:</label>
</td>
<td><input name="username" id="ls_username" autocomplete="off" class="mini-textbox" />
</td>
<td class="fastlg_l"><input name="cookietime" id="ls_cookietime" class="mini-checkbox" align="center" />自动登录</label>
</td>
<td> <a href="showWindow()">找回密码</a>
</td>
</tr>
<tr>
<td><label name="password" class="mini-text">密 码:</label>
</td>
<td><input name="password" id="ls_password" class="mini-password" />
</td>
<td ><a class="mini-button" >
登 录
</button>
</td>
<td> <a href="http://www.miniui.com/bbs/member.php?mod=register" >立即注册</a>
</td>
</tr>
</table>
</div>
<div title="south" region="south" showSplit="false" showHeader="false" height="30">
<div style="line-height:28px;text-align:center;cursor:default">Copyright © 深圳微讯通软件有限公司版权所有</div>
</div>
<div region="west" width="180" style="background:#C2D3F0" maxWidth="250" minWidth="100" showHeader="false">
<div id="leftTree" class="mini-outlookmenu" url="${pageContext.request.contextPath }/demo/data/outlookmenu.txt" onitemselect="onItemSelect"
idField="id" parentField="pid" textField="text" borderStyle="border:0"
></div>
</div>
<div region="center" title="center" bodyStyle="overflow:hidden">
<iframe id="mainframe" frameborder="0" name="main" style="width:100%;height:100%" border="0"></iframe>
</div>
</div>
<script type="text/javascript">
mini.parse();
//iframe src
var iframe = document.getElementById("mainframe");
iframe.src = "${pageContext.request.contextPath}/demo/datagrid/Tab.jsp";
function onItemSelect(){
var item = e.item;
iframe.src = item.url;
}
</script>
</body>
</html>
[
{ id: "user", text: "用户管理", iconCls: "icon-add"},
{ id: "addUser", pid: "user", text: "增加用户", iconCls: "icon-add", url: "../datagrid/celledit.html" },
{ id: "editUser", pid: "user", text: "修改用户", iconCls: "icon-edit", url: "../datagrid/rowedit.html" },
{ id: "removeUser", pid: "user", text: "删除用户", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },
{ id: "right", text: "权限管理"},
{ id: "addRight", pid: "right", text: "查询权限", iconCls: "icon-Note", url: "${pageContext.request.contextPath}/demo/tree/detailgrid.html", iconPosition: "top" },
{ id: "editRight", pid: "right", text: "操作权限", iconCls: "icon-Reports", url: "../buttonedit/selectGrid.html", iconPosition: "top" }
]2：数据显示界面，Tab.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String masterId = request.getParameter("masterId");
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<base href="<%=basePath%>">
<title>Tab 表单编辑</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<script src="${pageContext.request.contextPath}/scripts/boot.js" type="text/javascript"></script>
</head>
<body>
<div id="tabs1" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;background:#C2D3F0" bodyStyle="padding:0;border:0">
<div title="用户管理" iconCls="icon-user">
<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<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" οnclick="addRow1()" plain="true">增加</a> <a class="mini-button" iconcls="icon-remove" οnclick="removeRow1()" plain="true">删除</a>
<span class="separator"></span> <a class="mini-button" iconcls="icon-save" οnclick="saveData1()" plain="true">保存</a></td>
<td style="white-space:nowrap;">年月 <input id="birthday" showNullItem="true" class="mini-monthpicker" style="width:120px;" showClearButton="true" onvaluechanged="search1()" /> 国家 <input
id="countrys" showNullItem="true" class="mini-combobox" style="width:80px;" url="" onvaluechanged="search1()" /> <input id="key" class="mini-textbox" emptytext="请输入姓名"
style="width:150px;" onenter="search1()" /> <a class="mini-button" οnclick="search1()">查询</a></td>
</tr>
</table>
</div>
</div>
<div class="mini-fit">
<div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;" url="${pageContext.request.contextPath}/demo/data/AjaxService.jsp?method=SearchEmployeesByMultiSort" idfield="id"
allowresize="true" pagesize="20" allowcelledit="true" allowcellselect="true" multiselect="true" editnextonenterkey="true" editnextrowcell="true">
<div property="columns">
<div type="indexcolumn"></div>
<div type="checkcolumn"></div>
<div field="name" width="100" allowsort="true">
姓名 <input property="editor" class="mini-textbox" minwidth="200" />
</div>
<div name="LoginName" field="loginname" headeralign="center" allowsort="true" width="150">
员工帐号 <input property="editor" class="mini-textbox" minwidth="200" />
</div>
<div field="age" width="100" allowsort="true">
年龄 <input property="editor" class="mini-spinner" minvalue="0" maxvalue="200" value="25" />
</div>
<div name="birthday" field="birthday" width="100" allowsort="true" dateformat="yyyy-MM-dd">
出生日期 <input property="editor" class="mini-datepicker" />
</div>
<div field="remarks" width="120" headeralign="center" allowsort="true">
备注 <input property="editor" class="mini-textarea" style="width:200px;" minwidth="200" minheight="50" />
</div>
<!--ComboBox：本地数据-->
<div type="comboboxcolumn" autoshowpopup="true" name="gender" field="gender" width="100" allowsort="true" align="center" headeralign="center">
性别 <input property="editor" class="mini-combobox" data="Genders" />
</div>
<!--ComboBox：远程数据-->
<div type="comboboxcolumn" field="country" width="100" headeralign="center">
国家 <input property="editor" class="mini-combobox" url="${pageContext.request.contextPath}/demo/data/countrys.txt" />
</div>
<div type="checkboxcolumn" field="married" truevalue="1" falsevalue="0" width="60" headeralign="center">婚否</div>
</div>
</div>
</div>
</div>
<div title="新增管理" iconCls="icon-add">
<style type="text/css">
html,body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<div style="mini-fit" id="form1">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
<table>
<td style="width:100%;"><a class="mini-button" iconcls="icon-save" οnclick="saveData2()" plain="true">保存</a> <a class="mini-button" iconcls="icon-remove" οnclick="removeRow2()" plain="true">关闭</a>
</td>
</table>
</div>
<div style="width:100%;height:100%;">
<table style="width: 800px">
<tr style="width: 800px">
<td><label style="float:right;">流水号：</label></td>
<td style="width: 220px"><input type="hidden" id="JyId" name="Jyid" style="width: 220px" class="mini-textbox" /> </td>
<td><label style="float:right;">控制人：</label></td>
<td><input id="control" name="control" textName="control" class="mini-buttonedit" required="true" /></td>
<td><label style="float:right;">归档：</label></td>
<td><input id="archive" name="archive" textName="archive" class="mini-buttonedit" class="mini-textbox" /></td>
</tr>
<tr>
<td><label style="float:right;">版本号：</label></td>
<td><input id="version" style="width:220px" textName="version" name="version" class="mini-buttonedit" /></td>
<td><label style="float:right;">编号：</label></td>
<td><input id="number" name="number" class="mini-textbox" />
</td>
<td><label style="float:right;">年度：</label></td>
<td><input name="year" class="mini-combobox" showNullItem="true" emptytext="请选择年份" textField="text" valueField="id" data="yearData" /></td>
</tr>
<tr>
<td><label style="float:right;">生效日：</label></td>
<td colspan="5"><input id="attachDate" style="width: 220px" name="attachDate" class="mini-datepicker" /></td>
</tr>
<tr style="height: 40px">
<td style="width:60px;" align="right">检验项目：</td>
<td colspan="2"><input id="testProject" name="testProject" textName="testProject" class="mini-buttonedit" height="50" style="width: 100%" /></td>
<td style="width:60px;" align="right">分析仪器：</td>
<td colspan="2"><input id="analyze" name="analyze" textName="analyze" class="mini-buttonedit" height="50" style="width: 100%" /></td>
</tr>
<tr style="height: 40px">
<td><label style="float:right;">新批号：</label></td>
<td colspan="2"><input id="newBeach" name="newBeach" class="mini-textbox" style="width: 100%" /></td>
<td><label style="float:right;">旧批号：</label></td>
<td colspan="2"><input id="oldBeach" name="oldBeach" class="mini-textbox" style="width: 100%" /></td>
</tr>
<tr style="height: 50px">
<td style="width:60px;" align="right">判断标准：</td>
<td colspan="5"><input id="judge" name="judge" textName="judge" class="mini-buttonedit" height="50" style="width: 100%" /></td>
</tr>
<tr style="height: 50px">
<td style="width:60px;" align="right">对比方案：</td>
<td colspan="5"><input id="comparison" name="comparison" textName="comparison" class="mini-buttonedit" height="50" style="width: 100%" /></td>
</tr>
</table>
</div>
</div>
<div class="mini-fit">
<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" οnclick="addRow2()" plain="true">新增</a></td>
</tr>
</table>
</div>
<div id="datagrid2" class="mini-datagrid" style="width:100%;height:350px;" editnextonenterkey="true" editnextrowcell="true" showPager="false" allowcellselect="true" multiselect="true"
allowresize="true" fitColumns="false" allowcelledit="true">
<div property="columns">
<div type="indexcolumn">序号</div>
<div type="checkcolumn"></div>
<div name="Sample" field="sample" width="130px" allowsort="true" headeralign="center">
<b>样本标识或条码号</b> <input property="editor" class="mini-textbox" />
</div>
<div field="oldx" vtype="required;float" headeralign="center" width="100px">
<b>旧(Y)(%)</b> <input property="editor" class="mini-textbox" />
</div>
<div field="newx" vtype="required;float" headeralign="center" width="100px">
<b>新(X)(%)</b> <input property="editor" class="mini-textbox" />
</div>
<div field="absolute" width="180px" type="required;float" headeralign="center">
<b>X-Y/Y*100%绝对值或符合性</b> <input property="editor" class="mini-textbox" />
</div>
<div field="scope" headeralign="center" width="180px">
<b>可接受范围(1/2TEa或符合率)</b> <input property="editor" class="mini-textbox" />
</div>
</div>
</div>
<div class="mini-fit" id="form1">
<table style="width: 800px">
<tr style="width: 800px">
<td align="left" colspan="2" style="width: 120px">结论</td>
<td style="width: 115px">
<div id="cbl1" class="mini-checkboxlist" repeatItems="1" repeatLayout="table" textField="text" valueField="id" multiSelect="false" data="das"></div></td>
<td colspan="3" style="width:360px" valign="bottom">(描述:<input id="Conclusion" name="Conclusion" class="mini-text" style="border:0px;width: 90%" />)</td>
</tr>
<tr style="width: 800px">
<td align="left">分析人:</td>
<td style="width: 100px"><input class="mini-buttonedit" name="analysisPeople" height="50" style="width: 100%" /></td>
<td>签名:</td>
<td><input class="mini-buttonedit" name="Remark1" height="50" style="width: 100%" /></td>
<td>分析日期:</td>
<td><input class="mini-datepicker" name="analysisTime" height="50" style="width: 100%" format="yyyy-MM-dd" /></td>
</tr>
<tr style="width: 800px">
<td align="left">审核者:</td>
<td style="width: 100px"><input class="mini-buttonedit" name="audit" height="50" style="width: 100%" /></td>
<td>组长:</td>
<td><input class="mini-buttonedit" name="Remark1" height="50" style="width: 100%" /></td>
<td>审核日期:</td>
<td><input class="mini-datepicker" name="auditTime" height="50" style="width: 100%" format="yyyy-MM-dd" /></td>
</tr>
</table>
</div>
</div>
</div>
<div title="查询管理" showCloseButton="true" iconCls="icon-search">
<style type="text/css">
.New_Button,.Edit_Button,.Delete_Button,.Update_Button,.Cancel_Button {
font-size: 11px;
color: #1B3F91;
font-family: Verdana;
margin-right: 5px;
}
</style>
<div class="mini-fit">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
<table style="width:100%;">
<tr>
<td style="white-space:nowrap;">年度 <input id="year2" showNullItem="true" align="center" data="yearData" width="100px"class="mini-combobox" onvaluechanged="search3()" /> 版本号 <input
id="version" showNullItem="true" width="80px" class="mini-combobox" data="varsionData" onvaluechanged="search3()" /> <input id="key2" class="mini-textbox" emptytext="请输入控制人" style="width:150px;"
onenter="search3()" /> <a class="mini-button" οnclick="search3()">查询</a></td>
<td style="width:100%;"><a class="mini-button" iconcls="icon-search" οnclick="search3()" plain="true">刷新</a></td>
</tr>
</table>
</div>
<div id="datagrid3" class="mini-datagrid" style="width:100%;height:420px;" editnextonenterkey="true" editnextrowcell="true" showPager="true" allowcellselect="true" multiselect="true"
allowresize="true" pagesize="10" fitColumns="false" onselectionchanged="onSelectionChanged" selectOnLoad="true" allowcelledit="true"
url="${pageContext.request.contextPath}/demo/data/AjaxService2.jsp?method=SearchEmployeesByMultiSort">
<div property="columns">
<div field="JyId" width="120" visible="true" > ID
</div>
<div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">
<b>操作</b>
</div>
<div name="Number" field="Number" width="130px" allowsort="true" headeralign="center">
<b>编号</b> <input class="mini-textbox" />
&
最低0.47元/天 解锁文章
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
