学习目标：
优化之前做的前端表格，录入系统
学习内容：
1、 增加多个表单添加
2、 结构优化
3、 删除已添加的表单
4、 优化表单排序算法
学习时间：
3天学习产出：
subPage_PMdataCheckIn_v2.html
<head>
<title>项目信息录入</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link rel="stylesheet" type="text/css" href="css/subPage_PMdataCheckIn.css" />
<link rel="stylesheet" type="text/css" href="css/libHeader.css" />
<script type="text/babel" src="js/browser.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src = "js/jquery.serializejson.js" ></script>
</head>
<body >
<div id="app" style="width: 100%;height: 100%;">
<div class="fixedheader" id="fixedheader" style="opacity:1.0">
<fixedheader ref="fixedheader"></fixedheader>
<fixedsider ref="fixedsider" ></fixedsider>
<!-- <div class="navbar" >
<a href="#">Back</a>
<a href="#">Asset</a>
<a href="#">Price</a>
<a href="#" class="right">Home</a>
<a href="http://127.0.0.1:8848/public/about.html" class="right">About</a>
</div> -->
</div>
<div class="banner" style="margin-top: 90px;">
<div class="row">
<div class="main" id="root">
<div id="noneSubmit">
暂无可提交信息
</div>
</div>
</div>
</div>
<div class="footer" id ="footer" style="background-color: #333;" >
<div class="navbar row">
<div class="row" style="width: 30%;float: left;">
<input type="text" name="name" id="submissions" style="width:100%;height: 40%;margin: 30px;margin-top: 35px;margin-right: 0;margin-left: 0;"
placeholder="表单数">
<input id="creatBaseSubmissions" type="submit" value="创建表单" style="width:100%;height: 40%;margin: 30px;margin-top: 35px;margin-left: 0;background-color:#255AB5;">
<input id="AddTable" type="submit" value="新增表单" style="width:100%;height: 40%;margin: 30px;margin-top: 35px;margin-left: 0;background-color:#255AB5;">
<input id="SubmitTable" type="submit" value="提交表单" style="width:100%;height: 40%;margin: 30px;margin-top: 35px;margin-left: 0;background-color:#248ab5;">
</div>
</div>
<h2>
</h2>
</div>
<p id="demo" >
</p>
</div>
</div>
</body >
<!-- <script type="text/javascript" src = "components/c_fixheader.js"></script> -->
<script type="text/javascript" src = "js/subPage_PMdataCheckIn.js"></script>
subPage_PMdataCheckIn.css
.header_subPage_PMdataCheck {
padding: 80px;
/* some padding */
text-align: center;
/* center the text */
background: #1abc9c;
/* green background */
color: white;
/* white text color */
}
.header_subPage_PMdataCheck h1 {
font-size: 30px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
/* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar a {
float: left;
/* Make sure that the links stay side-by-side */
display: block;
/* Change the display to block, for responsive reasons (see below) */
color: white;
/* White text color */
text-align: center;
/* Center the text */
padding: 14px 14px;
/* Add some padding */
text-decoration: none;
/* Remove underline */
}
/* Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/* Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd;
/* Grey background color */
color: black;
/* Black text color */
}
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
input, textarea {
display: block;
justify-content: center;
width: 30%;
margin-left: auto;
margin-right: auto;
}
/* 适配 */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
/* ----------------------------------------- */
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/* 样式 */
/* Column container */
.row {
display: flex;
/* flex-wrap: wrap; */
justify-content: center;
}
.rowInRoot {
display: flex;
/* flex-wrap: wrap; */
justify-content: center;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
/* Set the width of the sidebar */
background-color: #f1f1f1;
/* Grey background color */
padding: 30px;
/* Some padding */
}
/* Main column */
.main {
flex: 70%;
/* Set the width of the main content */
background-color: white;
/* White background color */
padding: 20px;
/* Some padding */
}
.footer {
padding: 20px;
/* Some padding */
text-align: center;
/* Center text*/
background: #ddd;
/* Grey background */
}
/* ----------------------------------------- */
/* Style inputs */
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* Style the container/contact section */
.containerList {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}
/* Create two columns that float next to eachother */
.column {
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
padding: 0px;
}
.divList{
width:20%;
height:45px;
line-height:36px;/**设置行高和控件高一样，这是内部文字才能垂直居中*/
overflow:hidden;/**为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了*/
margin: 15 auto;/**让div在页面中居中显示*/
background-color:#ffffff;/**背景颜色*/
border:solid 15px #ffffff;
border-width:1px 1px 0px 1px;
text-align: center;
}
#wrapper {
width: 550px;
height: 100px;
border: 1px solid #000000;
margin: 0 auto;
}
#progressbar {
width: 180px;
height: 20px;
margin: 0 auto;
margin-top: 40px;
border: 1px solid #000000;
}
/* 设置进度条动画 */
#fill {
animation: move 2s;
text-align: center;
background-color: #6caf00;
color: #ffffff;
}
/* 实现元素宽度过度的动画效果 */
@keyframes move {
0% {
width: 0;
}
100% {
width: 100%;
}
}
subPage_PMdataCheckIn.js
// var App = new Vue({
// el: '#app',
// components:{
// 'fixedheader':c_fixheader
// }
// });
/* 参数名称修改 */
function FromInfor(name,type,remarks)
{
this.name = name;
this.type = type;
this.remarks = remarks;
}
const fromNaming = new FromInfor(':产品代号','产品类型','产品备注')
/* TODO从数据库读取类型 */
var typesOfOptions = "3D建模艺术作品,2D原画艺术作品,Ue4引擎材质,Unity引擎材质,Maya插件脚本,3DMax插件脚本";
var arrTypesOfOptions = typesOfOptions.split(",");
var clicked = false;
var count = 0;
/* 用户输入安全校验 */
document.getElementById("creatBaseSubmissions").onclick = function()
{
count = 1;
var a = document.getElementById("submissions").value;
a = parseInt(a);
if (typeof(a) == "number") {
if (isNaN(a) || a == 0||a>300) {
alert("请输入有效数字");
} else {
var main = document.getElementById("root");
// while (main.hasChildNodes()) //当elem下还存在子节点时 循环继续
// {
// main.removeChild(main.firstChild);
// }
if(clicked==false)
{
clicked = true;
document.getElementById("noneSubmit").remove();
}
count = 0;
var currtenNum = document.getElementById("root").childElementCount;
if(currtenNum!=0)
{
a=a-1;
/* 安全异步执行 */
window.setTimeout(function() {
console.log("步骤1完成");
/* 创建 */
for (var i = currtenNum; i <= a+currtenNum; i++) {
if(document.getElementById("column"+String(i)))
{
alert("错误");
}else{
creatSingle(getMaxIndex()+1);
/* 重新设置父子级 */
sortSingle(getMaxIndex());
}
}
window.setTimeout(function() {
console.log("步骤2完成");
window.setTimeout(function() {
alert(a + 1 + "张新表单创建成功")
}, 10)
}, 10)
}, 10)
}else{
a=a-1;
/* 安全异步执行 */
window.setTimeout(function() {
console.log("步骤1完成");
/* 创建 */
for (var i = 0; i <= a; i++) {
creatSingle(i);
}
window.setTimeout(function() {
console.log("步骤2完成");
/* 重新设置父子级 */
for (var i = 0; i <= a; i++) {
sortSingle(i);
}
window.setTimeout(function() {
}, 10)
}, 10)
}, 10)
alert(a + 1 + "张新表单创建成功");
}
}
} else {
alert("请输入有效数字");
}
}
document.getElementById("SubmitTable").onclick = function()
{
if (clicked == false) {
alert("请先创建表单");
} else {
// var a = document.getElementById("submissions").value;
// var lable = document.getElementById("inputCodename0").value;
// lable = "" + lable;
var currtenNum = document.getElementById("root").childElementCount;
var root = document.getElementById("root");
/* var outPutToServer = {产品代号:+lable,产品全称:+lable};
var outPutToServerJSON = JSON.stringify(outPutToServer);
document.getElementById("demo").innerHTML = outPutToServerJSON; */
/* var obj = $('form_PMcheckIn0').serializeJSON();
var jsonString = JSON.stringify(obj);
document.getElementById("demo").innerHTML = jsonString; */
/* var element = document.getElementById('form_PMcheckIn0');
if(element==null)
{
alert("没找到表单")
}else{
var html = element.outerHTML;
var data = { html:html };
var json = JSON.stringify(data);
document.getElementById("demo").innerHTML = json;
} */
for(var i=0; i<=currtenNum+1;i++)
{
var formData = JSON.stringify($("#form_PMcheckIn"+String(i)).serializeArray());
document.getElementById("demo").innerHTML = formData;
}
/* -------将表单数组打散成obj------- */
$.fn.serializeObject = function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
/* ------------------------------------ */
var objArr =[];
var formData ={};
for(var i=0; i<=300;i++)
{
/* formData = $("#form_PMcheckIn"+String(i)).serializeArray(); */
formData = $('#form_PMcheckIn'+String(i)).serializeObject();
if(JSON.stringify(formData)=="{}")
{
}else{
objArr.push(formData);
}
// if(i/a == 1)
// {
// alert("提交成功");
// }
}
objArr = JSON.stringify(objArr);
document.getElementById("demo").innerHTML = objArr;
/* window.setTimeout(function() {
console.log(1)
window.setTimeout(function() {
console.log(2)
window.setTimeout(function() {
console.log(3)
}, 50)
}, 50)
}, 50) */
}
}
document.getElementById("AddTable").onclick = function()
{
if (clicked == false)
{
alert("请先创建表单");
}else{
var currtenNum = document.getElementById("root").childElementCount;
window.setTimeout(function() {
console.log("添加一个表格")
creatSingle(getMaxIndex()+1);
window.setTimeout(function() {
console.log("排序一个表格")
sortSingle(getMaxIndex());
window.setTimeout(function() {
console.log(3)
}, 10)
}, 10)
}, 10)
}
}
function creatSingle(i)
{
var row = document.createElement('div');
row.id = "row" + String(i);
row.className = "row";
var div = document.createElement('div');
div.id = "column*" + String(i);
div.className = "rowInRoot";
/* document.getElementsByTagName('body')[0].appendChild(div); */
document.getElementsByClassName('main')[0].appendChild(div);
var form = document.createElement('form');
form.id = "form_PMcheckIn" + String(i);
form.action = "/action_page.php";
form.className = "row";
form.style.width = "100%";
/* document.getElementById('column'+String(i))[0].appendChild(form); */
div.parentNode.insertBefore(form, div);
var label = document.createElement('label');
label.id = "label" + String(i);
label.textContent = String(i) + fromNaming.name;
label.className = "divList";
div.parentNode.insertBefore(label, div);
var input = document.createElement('input');
input.id = "inputCodename" + String(i);
input.placeholder = "UBI_ProjectB_Name" + String(i);
/* input.name = "产品代号" + String(i); */
input.name = "ProductCode";
input.itemType = "text";
input.className = "divList";
input.itemType = "text";
input.style.width = "30%";
input.checked = true;
div.parentNode.insertBefore(input, div);
var labelS = document.createElement('label');
labelS.id = "labelS" + String(i);
labelS.textContent = fromNaming.type;
labelS.className = "divList";
div.parentNode.insertBefore(labelS, div);
var select = document.createElement('select');
select.id = "select" + String(i);
select.className = "divList";
/* select.name = "所属类型"; */
select.name ="ProductType";
div.parentNode.insertBefore(select, div);
for (var ii = 0; ii <= arrTypesOfOptions.length; ii++) {
var option0 = document.createElement('option');
option0.id = "option" + String(i) + "_" + arrTypesOfOptions[ii];
option0.itemValue = arrTypesOfOptions[ii];
option0.textContent = arrTypesOfOptions[ii];
select.parentNode.insertBefore(option0, select);
}
/* 备注 */
var labelT = document.createElement('label');
labelT.id = "labelT" + String(i);
labelT.textContent = fromNaming.remarks;
labelT.className = "divList";
div.parentNode.insertBefore(labelT, div);
var textarea = document.createElement('textarea');
textarea.id = "textarea" + String(i);
/* textarea.className = "div"; */
textarea.placeholder = "关于产品 " + String(i) + " 的备注";
textarea.style.height = "100%";
textarea.style.width = "100%";
textarea.name = "ProductRemarks";
div.parentNode.insertBefore(textarea, div);
var button = document.createElement('input');
button.id = "button" + String(i);
button.name = "删除" + String(i);
button.value = "删除";
button.onclick = function(){delDiv(String(i));};
button.type = "button";
button.style = "width:20%;height: 40%;margin: 30px;margin-top: 25px;margin-left: 0;background-color:#255AB5;color:white;";
button.placeholder = "删除 " + String(i) ;
div.parentNode.insertBefore(button, div);
}
function sortSingle(i)
{
var row = document.getElementById("row" + String(i));
var form = document.getElementById("form_PMcheckIn" + String(i));
var div = document.getElementById("column*" + String(i));
div.appendChild(form);
/* 删除按钮 */
var button = document.getElementById("button" + String(i));
form.appendChild(button);
/* 文本 */
var label = document.getElementById("label" + String(i));
form.appendChild(label);
var input = document.getElementById("inputCodename" + String(i));
form.appendChild(input);
var labelS = document.getElementById("labelS" + String(i));
form.appendChild(labelS);
var select = document.getElementById("select" + String(i));
form.appendChild(select);
for (var ii = 0; ii <= arrTypesOfOptions.length; ii++) {
var option0 = document.getElementById("option" + String(i) + "_" + arrTypesOfOptions[ii]);
select.appendChild(option0);
}
/* 备注 */
var labelT = document.getElementById("labelT" + String(i));
form.appendChild(labelT);
var textarea = document.getElementById("textarea" + String(i));
form.appendChild(textarea);
}
function delDiv(i)
{
document.getElementById("column*" + String(i)).remove();
var currtenNum = document.getElementById("root").childElementCount;
if(currtenNum==0)
{
var root = document.getElementById("root");
window.setTimeout(function() {
var none = document.createElement('div');
//none.value="暂无可提交信息";
none.textContent="暂无可提交信息";
none.id = "noneSubmit";
root.parentNode.insertBefore(none,root);
window.setTimeout(function() {
var noneSubmit = document.getElementById("noneSubmit");
root.appendChild(noneSubmit);
window.setTimeout(function() {
console.log("无表格");
clicked=false;
}, 100)
}, 100)
}, 100)
}
}
function getMaxIndex()
{
var nums = [];
rows = document.getElementsByClassName("rowInRoot");
for(var i=0; i<rows.length;i++)
{
var num = rows[i].id.split('*');
num[1] = parseInt(num[1]);
nums.push(num[1]);
}
var maxNum = Math.max.apply(Math,nums);
return maxNum;
}
效果：
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
