2019-05-31 laydate 动态生成页面后每个子页面初始化时间插件

因为我的是总清单，然后点击后里面生成苗木页面（默认有一个苗木），他们关系是1对多，总清单结束时间默认是当天，苗木的结束时间不能超过总清单的结束时间

添加苗木下面有添加苗木按钮

代码开始：

#初始化清单上的结束时间

var endTime = laydate.render({

elem: '#endTime', //选择需要初始化时间控件的元素（dom或者JQdou 都可以）

min: getNowFormatDate() - 1,//设置一个默认最大值

value: new Date(), //设置默认值

done: function(value,date){ //添加回调事件

laydateDestory() //调用销毁所有苗木里结束时间控件方法

for (let i = 0; i < $(".endTime").length; i++) {

if ($(".endTime")[i].value >= value) {

console.log($(".endTime")[i].value)

laydate.render({

elem: $(".endTime")[i],

min: getNowFormatDate() - 1,//设置一个默认最小值

max: $("#endTime").val(),

value: $("#endTime").val(),

});

}else {

console.log($(".endTime")[i].value)

laydate.render({

elem: $(".endTime")[i],

min: getNowFormatDate() - 1,//设置一个默认最小值

max: $("#endTime").val(),

});

}

});

//页面加载时，初始化第一个苗木的时间控件

$(function () {

addTimePlugs()

})

//为每个最后动态生成的页面里的结束时间初始化时间控件

function addTimePlugs() {

laydate.render({

elem: $('.endTime')[$('.endTime').length - 1],

min: getNowFormatDate() - 1,//设置一个默认最大值

max: $("#endTime").val(),

value: $("#endTime").val(),

});

}

//获取当前时间

function getNowFormatDate() {

var date = new Date();

var seperator1 = "-";

var seperator2 = ":";

var month = date.getMonth() + 1;

var strDate = date.getDate() + 1;

if (month >= 1 && month <= 9) {

month = "0" + month;

}

if (strDate >= 0 && strDate <= 9) {

strDate = "0" + strDate;

}

var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

+ " " + date.getHours() + seperator2 + date.getMinutes()

+ seperator2 + date.getSeconds();

return currentdate;

}

//销毁所有的苗木里结束时间控件的方法

function laydateDestory() {

var endTimeClone = $(".endTime").clone(true);//复制所有苗木页面节点（复制后的是没有时间控件的，不过有lay-key属性）

for (var i = 0; i < endTimeClone.length; i++) {

$(endTimeClone[i]).attr("lay-key",null) //每次初始化时间控件会自动生成一个lay-key的值，复制时把此值也复制了，所以需要清空此值

$(".endTime").get(i).replaceWith(endTimeClone[i])//替换页面节点

}

js代码结束

动态生成页面后页面加载控件调用addTimePlugs()方法生成控件

#endTime初始化时增加事件，如果值改变回调后先销毁所有的（.endTime)控件，再生成新的控件

后面是整个页面代码：

@layout("/common/_container.html"){

.purchase_add_sin {

padding:20px;

box-sizing:border-box;

position:relative;

}

.purchase_add_sin >div {

background:#f3f2f2;

}

.purchase_add_single {

}

.purchase_add_single_span {

vertical-align:middle;

display:inline-block;

width:12.5%;

font-size:13px;

font-weight:700;

text-align:right;

padding:20px 10px 20px 0;

box-sizing:border-box;

}

.purchase_add_single_div {

width:85%;

display:inline-block;

padding:20px 0;

}

.purchase_add_single_div input {

background-color:#FFFFFF;

background-image:none;

border:1px solid #e5e6e7;

border-radius:1px;

margin-right:20px;

color:inherit;

padding:6px 12px;

}

.purchase_add_single_div p {

width:100%;

}

.purchase_add_single_div p span {

display:inline-block;

width:12.5%;

font-size:13px;

text-align:right;

padding:10px 10px 10px 0;

box-sizing:border-box;

}

.purchase_add_single_div p input {

margin-right:0;

width:100px;

}

.purchase_add_single_div_list p {

margin-top:20px;

}

.purchase_add_single_div_list p span {

display:inline;

}

.purchase_add_single_div_list p span i {

font-style:normal;

margin-right:10px;

padding:5px 10px;

cursor:pointer;

}

.purchase_add_single_div_list p span i.active {

background:#ccc;

color:#ffffff;

border-radius:3px;

}

textarea {

resize:none

}

.detele_btn {

display:inline-block;

position:absolute;

right:30px;

top:30px;

padding:10px;

background:#b1b1b1 !important;

border-radius:3px;

color:#ffffff;

cursor:pointer;

}

.select_btn {

display:inline-block;

padding:6px 12px;

background:#b1b1b1 !important;

border-radius:3px;

color:#ffffff;

cursor:pointer;

}

.treeName{position:absolute;

background:#ffffff;

width:200px; max-height:250px;

overflow-y:auto;}

.treeName p{padding:5px;border-bottom:1px solid #f3f3f3;cursor:pointer;}

.col-sm-12{border-bottom:1px solid #efefef;}

<title>发布订单分配

<h1 style="text-align:center"><p style="width:100%;background-color:rgba(159,159,157,0.9)">基本信息

<#input id="company" name="用苗公司*" underline="true" />

<#input id="name" name="负责人*" underline="true"/>

<#input id="endTime" name="截止时间*" underline="true" />

<#input id="projectName" name="项目名*" underline="true"/>

<label class="col-md-3 control-label" style="float:left;width:25%;">用苗地*

<option selected value="">选择所在的省份

@for(province in provinces){

<option value="${province.id}">${province.name}

<option selected value="">请选择所在的市

<option selected value="">请选择所在的区/县

<#input id="telephone" name="联系电话*" underline="true"/>

<#input id="num" name="苗木品种数" underline="true" value="0" readonly="readonly"/>

<h1 style="text-align:center"><p style="width:100%;background-color:rgba(159,159,157,0.9)">添加苗木

<span class="purchase_add_single_span">苗木名称*

<span class="select_btn">查询

<span class="purchase_add_single_span">集采数量*

<input type="number" step="1" class="number">棵

<span class="purchase_add_single_span">预估价格

<input type="number" step="0.01" class="price">元/棵

<span class="purchase_add_single_span">截止时间

<span class="purchase_add_single_span" style="vertical-align:top;">备注

<#button btnCss="info" name="添加苗木" id="ensure" icon="fa-check" clickFun=""/>

<#button btnCss="danger" name="返回" id="cancel" icon="fa-eraser" clickFun="PurchaseInfoDlg.close()"/>

<button class="btn btn-info fa fa-save" id="submit_btn" style="font-size:20px;">保存

var endTime =laydate.render({

elem:'#endTime',

min:getNowFormatDate() -1,//设置一个默认最大值

value:new Date(),

done:function(value,date){

laydateDestory()

for (let i =0; i <$(".endTime").length; i++) {

if ($(".endTime")[i].value >= value) {

console.log($(".endTime")[i].value)

laydate.render({

elem:$(".endTime")[i],

min:getNowFormatDate() -1,//设置一个默认最小值

max:$("#endTime").val(),

value:$("#endTime").val(),

});

}else {

console.log($(".endTime")[i].value)

laydate.render({

elem:$(".endTime")[i],

min:getNowFormatDate() -1,//设置一个默认最小值

max:$("#endTime").val(),

});

}

});

$(function () {

addTimePlugs()

})

function addTimePlugs() {

laydate.render({

elem:$('.endTime')[$('.endTime').length -1],

min:getNowFormatDate() -1,//设置一个默认最大值

max:$("#endTime").val(),

value:$("#endTime").val(),

});

}

function getNowFormatDate() {

var date =new Date();

var seperator1 ="-";

var seperator2 =":";

var month = date.getMonth() +1;

var strDate = date.getDate() +1;

if (month >=1 && month <=9) {

month ="0" + month;

}

if (strDate >=0 && strDate <=9) {

strDate ="0" + strDate;

}

var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

+" " + date.getHours() + seperator2 + date.getMinutes()

+ seperator2 + date.getSeconds();

return currentdate;

}

function laydateDestory() {

var endTimeClone =$(".endTime").clone(true);

for (var i =0; i < endTimeClone.length; i++) {

$(endTimeClone[i]).attr("lay-key",null)

$(".endTime").get(i).replaceWith(endTimeClone[i])

}

function bindClicks() {

//删除按钮绑定事件

$(".detele_btn").bind("click", function () {

$(this).parent().remove()

})

//查询按钮绑定事件

$(".select_btn").bind("click", function () {

var tempThis =this

if ($(tempThis).prev().val().trim() =='') {

Feng.info("苗木名称不能为空")

}else {

//查询苗木名称

$.ajax({

type:'post',

url: Feng.ctxPath +"/tree/getTrees",

data: {

treeName:$(tempThis).prev().val().trim()

success:function (data) {

// console.log(data.data)

var tempTreeNameP ='';

for (var i =0; i < data.data.length; i++) {

tempTreeNameP +='<p data-treeId="' + data.data[i].treeId +'">' + data.data[i].treeName +''

}

$(tempThis).next().html(tempTreeNameP)

$(tempThis).next().css("display", "block");

//绑定选择事件

$('.treeName p').bind("click", function () {

var treeNameThis =this

//查询苗木标签

$.ajax({

type:'post',

url: Feng.ctxPath +"/tree/getStandards",

async:false,

data: {

treeId:$(treeNameThis).attr("data-treeId")

success:function (data) {

console.log(data.data)

$(treeNameThis).parent().prev().prev().val($(treeNameThis).html())

$(treeNameThis).parent().css("display", "none");

var htmlSelectTemp ='';

htmlSelectTemp +='<div>';

htmlSelectTemp +='<span class="purchase_add_single_span">苗木名称*</span><input class="input_name" type="text" data-treeId="' + data.data.treeId +'" value="' + data.data.treeName +'" disabled>';

htmlSelectTemp +='<div class="purchase_add_single_div" style="width:100%;">';

for (var i =0; i < data.data.standards.length; i++) {

htmlSelectTemp +='<p class="standards" data-standardId="' + data.data.standards[i].standardId +'"><span>' + data.data.standards[i].standardName +'</span><input type="number" class="minInput"> - <input class="maxInput" type="number"> cm</p>';

}

htmlSelectTemp +='</div>';

htmlSelectTemp +='<div class="purchase_add_single">';

htmlSelectTemp +='<span class="purchase_add_single_span" style="vertical-align: top;">苗木标签</span>';

htmlSelectTemp +='<div class="purchase_add_single_div purchase_add_single_div_list" style="padding-top:0;">';

for (var i =0; i < data.data.propertyAndTags.length; i++) {

htmlSelectTemp +='<p><span>' + data.data.propertyAndTags[i].name +'</span><span>';

for (var j =0; j < data.data.propertyAndTags[i].tags.length; j++) {

// if(j==0){

// htmlSelectTemp += ''+data.data.propertyAndTags[i].tags[j].tagName+'';

// }else{

// htmlSelectTemp += ''+data.data.propertyAndTags[i].tags[j].tagName+'';

// }

htmlSelectTemp +='<i data-tagId="' + data.data.propertyAndTags[i].tags[j].tagId +'">' + data.data.propertyAndTags[i].tags[j].tagName +'</i>';

}

htmlSelectTemp +='</span></p>';

}

htmlSelectTemp +='</div>';

$(treeNameThis).parent().parent().parent().next().remove()

$(treeNameThis).parent().parent().parent().after(htmlSelectTemp)

$(".purchase_add_single_div_list p span i").bind("click", function () {

$(this).parent().children().removeClass("active")

$(this).addClass("active")

})

}

})

error:function (data) {

Feng.error("请求失败！")

}

})

}

})

}

$(function () {

//添加按钮绑定事件

bindClicks();

//点击保存按钮

$('#submit_btn').bind("click", function () {

var strObj = []

for (var i =0; i <$(".purchase_add_sin").length; i++) {

var strObjSingle = {}

strObjSingle.treeId =$(".purchase_add_sin").eq(i).find('.input_name').attr('data-treeId')//苗木id

if (!strObjSingle.treeId) {

Feng.info("请搜索选择苗木")

return

}

strObjSingle.number =$(".purchase_add_sin").eq(i).find('.number').val()//集采数量

if (strObjSingle.number ==0) {

Feng.info("请填写数量")

return

}else if (strObjSingle.number >0) {

}else {

Feng.info("数量格式错误")

return

}

strObjSingle.endTime =$(".purchase_add_sin").eq(i).find('.endTime').val()//截止时间

if (strObjSingle.endTime ==0) {

Feng.info("请选择苗木的截止日期")

return

}else if (strObjSingle.endTime >$("#endTime").val()) {

Feng.info("截止日期不能超过清单截止日期")

return

}

strObjSingle.price =$(".purchase_add_sin").eq(i).find('.price').val()//预估价格

if (strObjSingle.price ==0) {

Feng.info("请填写价格")

return

}else if (strObjSingle.price >0) {

}else {

Feng.info("价格格式错误")

return

}

strObjSingle.content =$(".purchase_add_sin").eq(i).find('.content').val()//备注

var tempTag = []

for (var j =0; j <$(".purchase_add_sin").eq(i).find('.active').length; j++) {

tempTag[j] =$(".purchase_add_sin").eq(i).find('.active').eq(j).attr('data-tagId')//标签ID

}

// console.log(tempTag)

strObjSingle.tags = tempTag

var tempStandard = []

for (var k =0; k <$(".purchase_add_sin").eq(i).find('.standards').length; k++) {

var standardVoTemp = {}

standardVoTemp.standardId =$(".purchase_add_sin").eq(i).find('.standards').eq(k).attr("data-standardId")

standardVoTemp.minSize =$(".purchase_add_sin").eq(i).find('.standards').eq(k).find(".minInput").val()

standardVoTemp.maxSize =$(".purchase_add_sin").eq(i).find('.standards').eq(k).find(".maxInput").val()

tempStandard.push(standardVoTemp)

}

strObjSingle.standardVo = tempStandard

console.log(strObjSingle, '单个苗木')

strObj.push(strObjSingle)

}

var company =$("#company").val()

if (!company) {

Feng.info("请填写用苗公司")

return

}

var endTime =$("#endTime").val()

if (!endTime) {

Feng.info("请填写清单截止时间")

return

}

var telephone =$("#telephone").val()

if (!telephone) {

Feng.info("请填写联系电话")

return

}

var name =$("#name").val()

if (!name) {

Feng.info("请填写负责人")

return

}

var area1 =$("#area1").val()

if (!area1) {

Feng.info("请选择用苗地")

return

}

var projectName =$("#projectName").val()

if (!projectName) {

Feng.info("请填写项目名")

return

}

var purchaseTreeVo = JSON.stringify(strObj)

console.log(JSON.stringify(strObj), "拼接后数据")

$.ajax({

type:"post",

async:false,

url: Feng.ctxPath +"/purchasePlatform/add",

data: {

company: company,

name: name,

telephone: telephone,

endTime: endTime,

city: area1,

projectName: projectName,

purchaseTreeVo: purchaseTreeVo

success:function (data) {

Feng.info("添加成功")

location.href = Feng.ctxPath +"/purchasePlatform";

error:function (data) {

Feng.error("添加失败")

}

})

//----------------------------------------拼接完成提交字符串（JSON.stringify(strAll)）---------------------------------------------------

})

$("#ensure").bind("click", function () {

var htmlTemp =''

htmlTemp +='<div class="purchase_add_sin" class="col-sm-12">';

htmlTemp +='<div class="detele_btn">删除苗木</div>';

htmlTemp +='<div class="purchase_add_single">';

htmlTemp +='<span class="purchase_add_single_span">苗木名称*</span>';

htmlTemp +='<div class="purchase_add_single_div">';

htmlTemp +='<input type="text"><span class="select_btn">查询</span>';

htmlTemp +='<div class="treeName"></div>';

htmlTemp +='</div>';

htmlTemp +='</div><div></div>';

htmlTemp +='<div class="purchase_add_single">';

htmlTemp +='<span class="purchase_add_single_span">集采数量*</span>';

htmlTemp +='<div class="purchase_add_single_div">';

htmlTemp +='<input type="number" step="1" class="number">棵';

htmlTemp +='</div>';

htmlTemp +='<div class="purchase_add_single" >';

htmlTemp +='<span class="purchase_add_single_span">预估价格</span>';

htmlTemp +='<div class="purchase_add_single_div">';

htmlTemp +='<input type="number" step="0.01" class="price">元/棵';

htmlTemp +='</div>';

htmlTemp +='<div class="purchase_add_single">';

htmlTemp +='<span class="purchase_add_single_span">截止时间</span>';

htmlTemp +='<div class="purchase_add_single_div">';

htmlTemp +='<input type="text" class="endTime">';

htmlTemp +='</div>';

htmlTemp +='<div class="purchase_add_single">';

htmlTemp +='<span class="purchase_add_single_span" style="vertical-align: top;">备注</span>';

htmlTemp +='<div class="purchase_add_single_div">';

htmlTemp +='<textarea name="" id="" style="width:70%;border-radius: 3px;" rows="10" class="content" placeholder="备注说明"></textarea>';

htmlTemp +='</div>';

$('#purchase_add').append(htmlTemp)

bindClicks();

addTimePlugs();

})

function chooseMarket() {

var options=$("#province option:selected");

if(options.text()!="选择所在的省份"){

$.post(Feng.ctxPath +"/common/getLowerCityData",{"id":options.val()},function (data) {

for(var i=0; i

$("#market").append('<option value="' + data[i].id +'">' + data[i].name +'</option>')

};

var id=data[0].id;

defaultNext(id);

});

}

$("#market").empty();

$("#area1").empty();

}

function chooseArea() {

var options=$("#market option:selected");

if(options.text()!="请选择所在的市"){

$.post(Feng.ctxPath +"/common/getLowerCityData",{"id":options.val()},function (data) {

for(var i=0; i

$("#area1").append('<option value="' + data[i].id +'">' + data[i].name +'</option>')

};

});

}

$("#area1").empty();

}

function defaultNext(id) {

$.post(Feng.ctxPath +"/common/getLowerCityData",{"id":id},function (data) {

for(var i=0; i

$("#area1").append('<option value="' + data[i].id +'">' + data[i].name +'</option>')

};

});

$("#area1").empty();

}

2019-05-31 laydate 动态生成页面后每个子页面初始化时间插件

推荐阅读更多精彩内容