标签：date 弹窗 没有 jquery插件 一段 link over cache 工具包
我从开始工作,直至现在已经可以说有好几年了,所以说谈谈我过去的那些编程的思想,算是个人工作历程的一段总结吧.
在过去做过的项目中曾经发生过这样的事情,那就是项目中有茫茫多的js,一个页面,dom元素没有多少,但是与其相关的js到是有很多,可能是上百行亦或是上千行,可是不幸的是,写这些代码的人离职了,而项目又没有留下什么开发文档之类的技术手册,结果可想而知,就这是一个大大的坑,由于新接手的人不可能立马就能上手该项目的业务流程,更不可能在繁杂的js中理清项目的业务逻辑,遇到了问题,连个请教的人都找不到.
从此我就知道了,前端,尤其是页面是一个坑,一个大大的坑,但是坑总是要解决的,尤其是我当上了项目负责人之后,我意识到,这种问题不解决不行,否则整个项目就无法进行把控,所以必须得解决,我的解决方法是这样的,先从容易上手的方面入手,前端页面,其实严格划分的话可以分为前台前端与后台的前端,前台的前端有时候需要很多展示css样式特效,对其相应的操作也就会显得麻烦些,js的操作既有操作css样式的js,又有操作数据交互的js;而后台的js则主要是数据交互的js，相比较而言就比较的简单了，所以说我就先从后台的前端开始干起，不断的简化其相关的操作，我的终极目标是消灭js，消灭这个容易出现问题的大坑。
下面是我过去开发的一些代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix(‘*‘);</script>
<![endif]-->
<title></title>
</head>
<body>
<nav class="breadcrumb">
<a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a>
</nav>
<div class="pd-20">
<div id="search" class="text-c">
<!-- 日期范围：
<input type="text" onfocus="WdatePicker({maxDate:‘#F{$dp.$D(\‘datemax\‘)||\‘%y-%M-%d\‘}‘})" id="datemin" class="input-text Wdate" style="width:120px;">
-
<input type="text" onfocus="WdatePicker({minDate:‘#F{$dp.$D(\‘datemin\‘)}‘,maxDate:‘%y-%M-%d‘})" id="datemax" class="input-text Wdate" style="width:120px;">
-->
<input type="text" class="input-text" style="width:250px" placeholder="输入信息内容" id="M_NAME" name="" value="">
<button type="submit" class="btn btn-success radius" name="" onclick="searchMethod(‘#HomeMessageList‘)" ><i class="Hui-iconfont"></i> 搜索</button>
</div>
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l">
<a href="javascript:;" onclick="member_del(‘../homeMessage/deleteHomeMessage‘)" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 删除</a>
<a href="javascript:;" onclick="member_add(‘添加‘,‘../homeMessage/insertHomeMessage‘,‘‘,‘510‘)" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 添加</a>
<a href="javascript:;" onclick="member_edit(‘修改‘,‘../homeMessage/updateHomeMessage‘,‘‘,‘510‘)" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 修改</a>
<a href="javascript:;" onclick="member_msg_single(‘../homeMessage/pushHomeMessage‘,‘推送‘)" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 推送</a>
</span>
<div class="mt-20">
<table id="HomeMessageList" class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th data-field="H_ID">ID</th>
<th data-field="H_MESSAGE">信息内容</th>
<th data-field="H_TIME" data-formatter="dateFormatter">添加时间</th>
<th data-field="H_MESSAGE_1">推送状态</th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/moment.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableAddData.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableBtnGroup.js"></script>
</body>
</html>
可以看出,该页面中没有任何相关的js操作,通过扔掉js,也就扔掉了开发过程中经常所面临的那个大坑,这样就为项目的快速开发打下了基础,这样的代码天生就具有快速开发,低出错率,容易实现模块化的特性.
下面我来解读一下该页面的详细开发过程.
该页面采用的是现在主流的开发框架H-ui,页面表单采用的是datatable,,页面中的字段显示思路是这样的,通过js工具类获取表单中的td,然后扫描td上的相关属性,比如说这里遇到的属性主要是有两个,分别是:"data-field"和"data-formatter",其中"data-field"的值是数据库的字段,也就是说数据库中的ID字段为"H_ID",那么此处的"data-field"的值是"H_ID",依此类推，信息内容的数据库字段为“H_MESSAGE”，那么其相关的"data-formatter"的值是“H_MESSAGE”等，这样，只需要js插件扫描到td的相关属性，就会将从后台取出来的信息放到相应的td中去。
页面中的"data-formatter"属性，代表的是数据类型，数据的类型可以是图片，也可以是时间，一个页面的数据类型主要是这连个，当该数据类型是时间时，从后台取出来的是时间类型的数据，在前台展示的时候是不方便阅读的，要想方便阅读，那就必须得进行格式话，我采用的格式化插件是“moment.min.js”，这是一个专门用于时间格式化的js插件，在js的工具类“tableAddData.js”中有其相关的调用方法，当其扫描到data-formatter="dateFormatter"时，了解到，这里的“data-formatter”代表的是date日期类型的格式化，所以说会自动的格式化时间数据，因而我们在开发该页面的table表单时，只需要这么三个简单的操作：
一、命名当前的table表单的id，因为jquery操作table是根据的table表的id来进行的。
二、从数据库中拷贝相关的字段名，将其赋值为相应的"data-field"
三、指定数据类型data-formatter,如果是纯显示，不管是字符串还是数字，此处均可以省略操作，如果想自定义数据操作，只需要将其值设置成自定义的函数名即可，但是前提是该函数名不能与默认相同，否则就执行默认，不执行自定义了。
通过上面，我们发现对于table表单的操作，最少只需要两步，至多三步就可以解决，而且绝大多数页面都可以实现页面的零js操作。
页面的请求分为两种，一种是页面数据的查询，一种是页面数据的持久化，我是这样规定的，所有的数据请求用get方法，所有的持久化操作（增、删、改）用post操作，其中get请求路径放在工具类“tableAddData.js”中，并且是集中存放，比如说下面的get请求：
//管理员管理
table_add_data(‘#AdminList‘,‘../admin/adminList‘);
//会员管理
table_add_data(‘#MemberList‘,‘../member/memberList‘);
//通知公告管理
table_add_data(‘#HomeMessageList‘,‘../homeMessage/homeMessageList‘);
页面的增、删、改于此类似，与此相关的js操作在js的工具类“tableBtnGroup.js”中进行，通过a标签的onclick属性来进行调用。这里是该js中的部分代码：
/*用户-添加*/
function member_add(title,url,w,h){
layer_show(title,url,w,h);
}
/*用户-编辑*/
function member_edit(title,url,w,h){
var checkboxes=$(‘table tbody tr‘).find(‘input[type="checkbox"]‘);
var tr_num = null;
var checkboxVal=‘‘;
checkboxes.each(function(){
if($(this).prop(‘checked‘)==true){
tr_num++;
checkboxVal=$(this).val();
}
});
if(tr_num==null){
layer.msg(‘请选择要修改的数据！‘,{icon:0,time:1000});
}else if(tr_num==1){
url+=‘?id=‘+checkboxVal;
layer_show(title,url,w,h);
}else{
layer.msg(‘请选择一条数据！‘,{icon:0,time:1000},function(){
return null;
});
}
}
数据的查询操作：
数据的查询操作是通过扫描id="search"包裹下元素的所有id来实现的，凡是被该元素所包裹下的所有元素的id均被视为搜索条件，id的值即为后台数据库中对应的相关字段，当然，这里传递的值绝大多数是文本框中的，但是除了这些之外还有其它的，比如说select下拉列表框等，所以说要想执行查询操作，只需一步，就是简单的添加id即可。如上面截图中的查询信息内容，就是简单的添加一个id="M_NAME".
这里是修改页面：
可以看到页面很简洁，我的观点是简介就是美，所以说我所设计的页面一向都比较简洁。但是简洁之处并不失强大，比如说该页面，弹窗口是采用的现在比较前卫的layer弹层插件，该插件简洁，美观，容易上手功能还不失强大。
在该页面中还有表单验证，此处我采用的表单验证插件是比较流行的“Validform”，如果你要是以为该页面中采用了js相关操作，那你就是打错特错了，该页面仍然不用编写任何js，如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix(‘*‘);</script>
<![endif]-->
<title></title>
</head>
<body>
<div class="pd-20">
<form action="" method="post" class="form form-horizontal" id="add_HomeMessage_Form">
<input type="hidden" name="hId" value="${homeMessage.hId }">
<div class="row cl">
<label class="form-label col-3"><span class="c-red">*</span>信息内容：</label>
<div class="formControls col-5">
<input type="text" class="input-text" value="${homeMessage.hMessage }" placeholder="" id="hMessage" name="hMessage" datatype="*2-16" nullmsg="信息内容不能为空">
</div>
<div class="col-4"> </div>
</div>
<div class="row cl">
<div class="col-9 col-offset-3">
<a class="btn btn-primary radius" onclick="operationdata(‘../homeMessage/updateHomeMessage‘,‘.form-horizontal‘)"> 提交 </a>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableBtnGroup.js"></script>
</body>
</html>//保存表单数据
function operationdata(dataurl,fromid){
//判断必填文本框是否为空
$(fromid).find(‘[datatype]‘).each(function(){
if($(this).val().trim() == ""){
var tishistr = $(this).addClass(‘Validform_error‘);
$(this).parent().next().find(‘span‘).addClass(‘Validform_wrong‘).html(‘不能为空！‘);
}
});
//判断文本框的内容是否填写正确
var haserror = $(fromid).find(‘.Validform_error‘).length;
if(haserror>0){
alert(‘请填写正确数据！‘);
}else{
var index1 = layer.load(1); //换了种风格
$.ajax({
async:false,
url:dataurl,
data:$(fromid).serialize(),
type:‘post‘,
success:function(result){
var status=result.msg.status;
var desc=result.msg.desc;
if(status == 0){
layer.msg(desc, {icon: 1,time: 1000},
function(){
//关闭子页面，刷新父页面
var index = parent.layer.getFrameIndex(window.name);
window.parent.location.reload();
parent.layer.close(index);//关闭弹框
layer.close(index1);
}
);
}else{
layer.msg(desc, {icon: 0,time: 1000});
layer.close(index1);
}
},
error:function(){
alert("运行错误！");
}
});
}
}
由于用户的添加操作页面于此类似，这里我就不分开讲了。
页面的树形列表：
我们先看页面效果图，页面的树形列表如下：
该页面也相当的简介，这是我的一贯风格，我不喜欢在页面中堆一大堆的各种文本框，各种面板以及其它dom组件。
这个看似复杂的界面貌似要写好多js，实际上。。。。仍然是不用的，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix(‘*‘);</script>
<![endif]-->
<title></title>
</head>
<body>
<div class="pd-20">
<form action="javascript:void(0)" method="post" class="form form-horizontal" id="form-user-add">
<input type="hidden" id="ssId" name="ssId" value="${signSchool.ssId }">
<div class="row cl">
<label class="form-label col-2"><span class="c-red">*</span>岗位名称：</label>
<div class="formControls col-5">
<input type="text" class="input-text" value="${signSchool.ssName }" placeholder="请输入岗位名称" datatype="*2-16" id="user-name" name="ssName">
</div>
<div class="col-5"> </div>
</div>
<div class="row cl">
<label class="form-label col-2"><span class="c-red">*</span>类别：</label>
<div class="formControls col-5">
<input type="text" class="input-text" value="${signSchool.ssType }" placeholder="请输入类别" datatype="*2-16" id="user-name" name="ssType">
</div>
<div class="col-5"> </div>
</div>
<div class="row cl">
<label class="form-label col-2"><span class="c-red">*</span>计划报名人数：</label>
<div class="formControls col-5">
<input type="text" class="input-text" value="${signSchool.ssMessage2 }" placeholder="请输入计划报名人数" datatype="n" id="user-name" name="ssMessage2">
</div>
<div class="col-5"> </div>
</div>
<%-- <div class="row cl">
<label class="form-label col-2">岗位备注：</label>
<div class="formControls col-5">
<textarea name="sscMessage1" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,100)">${signSchoolClass.sscMessage1 }</textarea>
<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
</div>
<div class="col-5"> </div>
</div> --%>
<div class="row cl">
<div class="col-9 col-offset-2">
<!-- <input class="btn btn-primary radius" type="submit" value=" 提交 "> -->
<a class="btn btn-primary radius" onclick="operationdataZtree(‘../signSchool/updateSignSchoolClass‘,‘.form-horizontal‘)"> 修改 </a>
<a class="btn btn-danger radius" onclick="deleteZtree(‘../signSchool/deleteSignSchoolClass‘,‘.form-horizontal‘)"> 删除 </a>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableAddData.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableBtnGroup.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/ztreeBtnGroup.js"></script>
</body>
</html>
树节点的添加于此类似，我就在此省去了代码，此处仍然是有数据效验，以及数据的ajax回调等，功能一点都不少。
下面是图片的添加：
仍然延续了我的那种简洁的风格，这里采用的图片上传插件为“webuploader”，页面中仍然没有js，而调用的时候采用的是工具类中封装的方法，默认是将图片上传到服务器的“upload”文件夹下，所以说路径是直接写死的，采用的是相对路径。
如果说想上传多张图片怎么办？
答案是如下所示：
要知道，这个和上面那个是同样的上传图片控件，同样是采用的“webuploader”控件，所以说在这里，仍然不用写任何的js。
其实该页是被弹层出来的页面，其父页面由于组件比较多，所以说就采用了弹层方式来进行处理，其父页面如下：
这里的每一个组件都有表单验证，在写这么多内容的情况下，我们的页面中仍然不用写任何js，不信，看下面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<title>添加面料</title>
</head>
<body>
<body onload="uploadSingleImg(‘${pageContext.request.contextPath }/upload/upload‘)">
<div class="pd-20">
<form action="" method="post" class="form form-horizontal" id="add_Fabric_Form">
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>类型：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fType" name="fType" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">面料目录</option>
<option value="2">版布开发</option>
<option value="3">开发样本</option>
</select>
</span>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>货源：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fState" name="fState" class="select" datatype="*">
<option value="">请选择</option>
<option value="0">现货区</option>
<option value="1">订货区</option>
<option value="2">印花底布</option>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>名称（中文）：</label>
<div class="formControls col-2">
<input type="text" class="input-text" value="" placeholder="请输入名称" id="fName" name="fName" datatype="*" nullmsg="名称不能为空">
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>名称（英文）：</label>
<div class="formControls col-2">
<input type="text" class="input-text" value="" placeholder="请输入名称" id="fMessage1" name="fMessage1" datatype="*" nullmsg="名称不能为空">
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>生产地（中文）：</label>
<div class="formControls col-2">
<input type="text" class="input-text" value="" placeholder="" id="fOrigin" name="fOrigin" datatype="*" nullmsg="生产地不能为空">
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>生产地（英文）：</label>
<div class="formControls col-2">
<input type="text" class="input-text" value="" placeholder="" id="fMessage2" name="fMessage2" datatype="*" nullmsg="生产地不能为空">
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>编号：</label>
<div class="formControls col-2">
<input type="text" class="input-text" value="" placeholder="请输入编号" id="fNo" name="fNo" datatype="*" nullmsg="编号不能为空" ajaxurl="${pageContext.request.contextPath }/admin/fabric/isNoExits" errormsg="编号已存在！！">
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>克重：</label>
<div class="formControls col-2">
<input type="text" class="input-text" id="fGProperty" onkeyup="this.value=this.value.replace(/\D/g,‘‘)" onafterpaste="this.value=this.value.replace(/\D/g,‘‘)" name="fGProperty" datatype="*"style="width:70%;" nullmsg="克重不能为空">
<label style="display: inline;">克</label>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>原料：</label>
<div class="formControls col-2">
<input type="text" class="input-text" id="fMaterial" name="fMaterial" datatype="*" nullmsg="原料不能为空">
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>门封：</label>
<div class="formControls col-2">
<input type="text" class="input-text" id="fOrdinary" name="fOrdinary" datatype="*" nullmsg="门封不能为空">
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>价格：</label>
<div class="formControls col-2">
<input type="text" class="input-text" t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}" id="fPrice" name="fPrice" datatype="*" nullmsg="价格不能为空" style="width:70%;">
<label style="display: inline;">元/米</label>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>成分：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fIngredients" name="fIngredients" class="select" datatype="*">
<option value="">请选择</option>
<c:forEach items="${ffList }" var="list">
<c:if test="${list.ffParentId==1 }">
<option value="${list.ffId }">${list.ffName }</option>
</c:if>
</c:forEach>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>制造：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fWeaving" name="fWeaving" class="select" datatype="*">
<option value="">请选择</option>
<c:forEach items="${ffList }" var="list">
<c:if test="${list.ffParentId==2 }">
<option value="${list.ffId }">${list.ffName }</option>
</c:if>
</c:forEach>
</select>
</span>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>种类：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fSpecies" name="fSpecies" class="select" datatype="*">
<option value="">请选择</option>
<c:forEach items="${ffList }" var="list">
<c:if test="${list.ffParentId==4 }">
<option value="${list.ffId }">${list.ffName }</option>
</c:if>
</c:forEach>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>克重范围：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fG" name="fG" class="select" datatype="*">
<option value="">请选择</option>
<c:forEach items="${ffList }" var="list">
<c:if test="${list.ffParentId==3 }">
<option value="${list.ffId }">${list.ffName }</option>
</c:if>
</c:forEach>
</select>
</span>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>是否发布：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fSendState" name="fSendState" class="select" datatype="*">
<option value="">请选择</option>
<option value="0">否</option>
<option value="1">是</option>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>厚度：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fThickness" name="fThickness" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>光度：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fPhotometric" name="fPhotometric" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>柔软度：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fSoft" name="fSoft" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>弹性：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fElastic" name="fElastic" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>吸水性：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fAbsorption" name="fAbsorption" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>透气度：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fBreathable" name="fBreathable" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>易皱性：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fFold" name="fFold" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>透明度：</label>
<div class="formControls col-2">
<span class="select-box" style="width:150px;">
<select id="fTransparent" name="fTransparent" class="select" datatype="*">
<option value="">请选择</option>
<option value="1">1分</option>
<option value="2">2分</option>
<option value="3">3分</option>
<option value="4">4分</option>
<option value="5">5分</option>
</select>
</span>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>供应商（中文）：</label>
<div class="formControls col-2">
<input type="text" class="input-text" id="fMessage3" name="fMessage3" datatype="*" nullmsg="供应商不能为空">
</div>
<div class="col-1"> </div>
<label class="form-label col-1"><span class="c-red">*</span>供应商（英文）：</label>
<div class="formControls col-2">
<input type="text" class="input-text" id="fMessage4" name="fMessage4" datatype="*" nullmsg="供应商不能为空">
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>展示图片：</label>
<input type="hidden" id="returnImg" name="fImg" value="">
<div class="formControls col-2">
<div class="uploader-thum-container">
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>
</div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red">*</span>颜色图片:</label>
<input type="hidden" name="returnImgArray1" value="">
<div class="formControls col-7" id="returnImgArray1">
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red"></span></label>
<div class="formControls col-7">
<a class="btn btn-primary" style="display: inline;" onclick="member_add_full(‘颜色图片上传‘,‘../fabric/uploadImg?domId=returnImgArray1‘)">颜色图片上传</a>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1">详情图片:</label>
<input type="hidden" name="returnImgArray" value="">
<div class="formControls col-7" id="returnImgArray">
</div>
<a id="aaId" onclick="aa()"></a>
<div class="col-1"> </div>
</div>
<div class="row cl">
<label class="form-label col-1"><span class="c-red"></span></label>
<div class="formControls col-7">
<a class="btn btn-primary" style="display: inline;" onclick="member_add_full(‘详情图片上传‘,‘../fabric/uploadImg?domId=returnImgArray‘)">详情图片上传</a>
</div>
<div class="col-1"> </div>
</div>
<div class="row cl">
<div class="col-9 col-offset-3">
<a class="btn btn-primary save" onclick="operationdataValidate(‘../fabric/save‘,‘#add_Fabric_Form‘)">保存</a>
<a class="btn btn-primary" onclick="closethis()">取消</a>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/uploadSingleImg.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/jqthumb/jqthumb.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableBtnGroup.js"></script>
</body>
</html>
这里我采用的是“ueditor”，下面是其实现的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<title>添加</title>
</head>
<body onload="uploadSingleImg(‘${pageContext.request.contextPath }/upload/upload‘)">
<div class="pd-20">
<form action="" method="post" class="form form-horizontal" id="add_HomeMessage_Form">
<input type="hidden" name="state" value="${state}">
<!-- centerState默认有两种状态：0或1。0、表示新增，1、表示修改。 -->
<input type="hidden" name="centerState" value="${centerState}">
<c:if test="${centerState ==0 }">
<div class="row cl">
<label class="form-label col-1">中文内容：</label>
<div class="formControls col-10">
<!-- 副文本编辑器，此处隐藏，因为这里面有点坑 -->
<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>
</div>
</div>
</c:if>
<c:if test="${centerState ==1 }">
<div class="row cl">
<label class="form-label col-1">中文内容：</label>
<div class="formControls col-10">
<!-- 副文本编辑器，此处隐藏，因为这里面有点坑 -->
<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>
</div>
</div>
</c:if>
<c:if test="${centerState ==0 }">
<div class="row cl">
<label class="form-label col-1">英文内容：</label>
<div class="formControls col-10">
<!-- 副文本编辑器，此处隐藏，因为这里面有点坑 -->
<script id="editor2" type="text/plain" style="width:100%;height:400px;"></script>
</div>
</div>
</c:if>
<c:if test="${centerState ==1 }">
<div class="row cl">
<label class="form-label col-1">英文内容：</label>
<div class="formControls col-10">
<!-- 副文本编辑器，此处隐藏，因为这里面有点坑 -->
<script id="editor2" type="text/plain" style="width:100%;height:400px;"></script>
</div>
</div>
</c:if>
<div class="row cl">
<div class="col-9 col-offset-1">
<a class="btn btn-primary radius" onclick="operationdataValidate(‘../helpCenter/helpCenterDetails‘,‘.form-horizontal‘)"> 提交 </a>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/uploadSingleImg.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/jqthumb/jqthumb.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/ueditor/1.4.3/ueditor.all.js"> </script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/ueditor/1.4.3/ueditor.parse.js"> </script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableBtnGroup.js"></script>
<script type="text/javascript">
$(function(){
var content=‘${helpCenter.hContent }‘;
var content2=‘${helpCenter.hContentEn }‘;
var ue = UE.getEditor(‘editor‘);
var ue2 = UE.getEditor(‘editor2‘);
ue.addListener("ready", function () {
// editor准备好之后才可以使用
ue.setContent(content);
ue2.setContent(content2);
});
});
//提交
function operationdataValidate(postUrl,formId){
//editorValue
var centerState=‘${centerState}‘;
var textarea1=$(‘textarea‘).eq(0).val();
var textarea2=$(‘textarea‘).eq(1).val();
//如果是新增的信息
if(centerState==0){
if(textarea1==‘‘){
layer.msg(‘中文内容不能为空！‘,{icon:0,time:1000});
}else if(textarea2==‘‘){
layer.msg(‘英文内容不能为空！‘,{icon:0,time:1000});
}else{
operationdata(postUrl,formId);
}
}else if(centerState==1){ //如果是修改的信息
if(textarea1==‘‘){
layer.msg(‘中文内容不能为空！‘,{icon:0,time:1000});
}else if(textarea2==‘‘){
layer.msg(‘英文内容不能为空！‘,{icon:0,time:1000});
}else{
operationdata(postUrl,formId);
}
}
}
</script>
</body>
</html>再后来页面的时间控件后来也改成了laydate,单选，复选改成了icheck，图片展示改成了jqthumb，包括还升级了jquery插件，比如下面就是laydate的工具类中的方法：
function initLaydate(){
var layer_date=$(‘.layer-date‘);
if(layer_date.length>0){
var elementId=‘#layerDate‘;
if($(elementId).length>0){
var end = {
elem: elementId,
format: "YYYY-MM-DD hh:mm:ss",
min: laydate.now(),
max: "2099-06-16 23:59:59",
istime: true,
istoday: false,
choose: function(datas){ //选择日期完毕的回调
$(elementId).removeClass(‘Validform_error‘);
$(elementId).parent().next().find(‘span‘).removeClass(‘Validform_wrong‘).addClass(‘Validform_right‘).text(‘‘);
}
};
laydate(end);
}
}
}
除此之外还有页面命名规范，java命名规范，包括数据库数据表建表规范，业务逻辑，工作流程处理等等的我都有相关的规定，这里由于篇幅有限，我就不一一展看来讲了。
最后我还要说的是，干程序，永远都不要死记硬背，能简化就简化，能查文档就查文档，要知道，在这个符合摩尔定律的it行业，每隔18个月就会涌现出一些新的东西需要我们去学习，有些经久不用的东西总会忘记，之后还要再次记起，我包括我对下面的组员的要求从来都不是去死记硬背代码，去背方法，参数之类的，相反，我要求他们会查文档，尤其是查一手文档的能力，在这个知识不断涌现的行业，只有掌握了查api文档的机巧，这样才能将主要的精力放置于业务的处理以及代码的逻辑上来，而这才是我们应该发挥的地方，而绝不是去敲那些既耗时又费力的机械式的重复代码操作。
标签：date 弹窗 没有 jquery插件 一段 link over cache 工具包
原文地址：http://blog.csdn.net/zzy1078689276/article/details/71104140
