点击确定动态生成数据
标签（空格分隔）： 动态生成数据 js模板
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"><!-- thymeleaf里包含了许多引入的css文件，去掉thymeleaf需要正常引入html文档所需要的css文件
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
<link href="/ajax/libs/bootstrap-treetable/bootstrap-treetable.css" rel="stylesheet"/>
<link href="/css/animate.css" rel="stylesheet"/>
<link href="/css/style.css" rel="stylesheet"/>
<link href="/ajax/libs/select/select2.css" rel="stylesheet"/>
<link href="/ruoyi/css/ry-ui.css" rel="stylesheet"/>
-->
<title>开始借用设备界面</title>
</head>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-select.min.css}"/>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content"><!--会在页面中出现一条横线-->
<h2 style="text-align: center;">设备借用申请表</h2>
<form role="form" name="form">
<div class="ibox-content">
<div class="col-sm-4">
<h3 class="col-md-offset-9">设备类型</h3>
</div>
<div class="col-sm-7">
<div class="col-md-offset-1" style="padding: 0 0 20px 10px">
<ul class="todo-list" style="display: none" id="lendList">
<li style="padding-left: 100px"><b>设备</b><b style="display: inline-block;width: 80px;height: 20px;margin-left: 180px">类型</b><b style="display: inline-block;width: 80px;height: 20px;margin-left: 185px">数量</b></li>
<!--<li>-->
<!--<input type="checkbox" value="" name="" class="i-checks"/>-->
<!--<span class="m-l-xs" id='device' style="margin-left: 75px"></span><span class="col-md-offset-2" id='deviceType'></span><span class="col-md-offset-2" id='number'></span>-->
<!--<a class="btn btn-primary btn-xs pull-right">删除</a>-->
<!--</li>--><!--所注释的代码就是待在js里引入的模板代码-->
</ul>
<div class="col-sm-8 form-inline" style="padding-left: 0px;">
<div class="form-group" style="width:100%">
<h5>请选择借用的设备:</h5>
<select class="form-control" id='lendDevice' style="width:48%;">
<option value="001" selected>手机</option>
<option value="002">电脑电脑</option>
<option value="003">鼠标</option>
<option value="004">手表</option>
<option value="005">键盘</option>
</select>
<select class="form-control" id="lendDeviceType" style="width:48%;">
<option value="0011" selected>iphone</option>
<option value="0012">华为</option>
<option value="0021">联想</option>
<option value="0014">小米</option>
<option value="0015">vivo</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h5>数量:</h5>
<div class="input-group">
<span class="input-group-btn"><button class="btn btn-default subtract" type="button">-</button></span>
<input type="text" class="form-control valueNumber" value="1" style="text-align: center;height: 40px">
<span class="input-group-btn"><button class="btn btn-default add" type="button">+</button></span>
</div>
</div>
</div>
<div class="col-sm-1" style="padding-left: 0px;">
<h5> </h5>
<div class="form-group">
<a class=" btn btn-primary ensure">确定</a>
</div>
</div>
</div>
</div>
</div>
<div class="ibox-content">
<div class="form-group col-sm-offset-5" style="padding-left: 818px">
<a class=" btn btn-primary submit">提交</a>
<a class=" btn btn-primary cancel">取消</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<!--
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
bootstrap-table 表格插件
<script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
jquery-validate 表单验证插件
<script src="/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="/ajax/libs/validate/messages_zh.min.js"></script>
<script src="/ajax/libs/validate/jquery.validate.extend.js"></script>
jquery-validate 表单树插件
<script src="/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
jquery-export 表格导出插件
<script src="/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/export/tableExport.js"></script>
遮罩层
<script src="/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="/ajax/libs/iCheck/icheck.min.js"></script>
<script src="/ajax/libs/layer/layer.min.js"></script>
<script src="/ajax/libs/layui/layui.js"></script>
<script src="/js/plugins/handlebars/dist/handlebars.js"></script>
<script src="/ruoyi/js/common.js?v=2.4.0"></script>
<script src="/ruoyi/js/ry-ui.js?v=2.4.0"></script>
<script src="http://tajs.qq.com/stats?sId=62048022"></script>
<script> var ctx = "\/"; </script>
</div>
自定义js
<script src="/js/bootstrap-select.min.js"></script>
<script src="/js/borrowApply/borrowApply.js"></script>
-->
<!-- 自定义js -->
<script th:src="@{/js/bootstrap-select.min.js}"></script>
<script th:src="@{/js/borrowApply/borrowApply.js}"></script>
<script th:inline="javascript">
bindTimePicker('#borrowStartDate','#borrowEndDate');
</script>
</body>
</html>
// 二类用户的申请借用
// 描述：以表单为基础，实现对二类用户所借设备暂存数据并传递；
// 依赖：jQuery bootstrap
// 作者：iszhangdc
;(function (window, $, tableWapper) {
//对数值进行增加
$('.add').click(function () {
var valueNumber = $('.valueNumber').val();//获取当前数量值
valueNumber++;
$('.valueNumber').val(valueNumber);//当点击增加按钮后赋予新值
});
//对数值进行减少
$('.subtract').click(function () {
var valueNumber = $('.valueNumber').val();//获取当前数量值
if (valueNumber > 1) {
valueNumber--;
$('.valueNumber').val(valueNumber);//当点击减少按钮后赋予新值
} else {
layer.msg("所选取的数量不能小于1");
}
});
var count = 0;//初始化点击借用设备的确认按钮的次数
$('.ensure').click(function () {
document.getElementById('lendList').style.display = 'block';//点击借用设备的确定按钮后显示隐藏的‘借用设备’列表
$('#lendList').append(' <li> ' +
'<input type="checkbox" value="0" class="lendCheckbox" class="i-checks"/>' +
'<span class="m-l-xs device" data-id={{id}} style="display:inline-block;width: 80px;height:20px; margin:10px 0 0 78px">{{name}}</span><span class="deviceType" data-id={{id}} style="display:inline-block;width: 80px;height:20px; margin:10px 0 0 137px"></span><span style="margin-left: 150px"><button class="btn btn-default spanSubtract" type="button" style="margin-top: 3px;height: 34px;line-height: 10px">-</button><input type="text" class="number" name="number" value="1" data-val={{val}} readonly="readonly" style="text-align: center;width: 50px"><button class="btn btn-default spanAdd" type="button" style="margin-top: 3px;height: 34px;line-height: 10px">+</button></span>' +
'<a class="btn btn-primary btn-xs pull-right deleteBtn"style="margin-top: 8px">删除</a>' +
'</li>');//固定的借用生成数据模板
document.getElementsByClassName("device")[count].setAttribute('name',$('#lendDevice option:selected').text());//得到‘设备借用’列表的设备值并赋值
document.getElementsByClassName("device")[count].innerHTML=document.getElementsByClassName("device")[count].getAttribute('name');//获取设备值并写入所在位置
document.getElementsByClassName('deviceType')[count].innerHTML = $('#lendDeviceType option:selected').text();//得到‘设备借用’列表的类型列所在位置并赋值
document.getElementsByClassName('number')[count].value = $('.valueNumber').val();//得到‘设备借用’列表的借用数量列所在位置的input里的value属性并赋值
document.getElementsByClassName('lendCheckbox')[count].value=count;//为所借设备列表按照顺序编号即显示多少条行数据，从0开始
document.getElementsByClassName("device")[count].setAttribute('data-id',$('#lendDevice option:selected').val());//为设备大类里的data-id属性赋予获取到的html里select的id值
document.getElementsByClassName("deviceType")[count].setAttribute('data-id',$('#lendDeviceType option:selected').val());//为设备大类里的设备类型data-id属性赋予获取到的html里select的类型id值
count++;//点击借用设备的确认按钮的次数加一
});
//为‘设备借用’列表里的删除按钮绑定事件
$('#lendList').delegate(".deleteBtn", "click", function () {//点击删除按钮
$(this).parents('li').remove();//$(this) 含义是当前的dom元素即删除的deleteBtn按钮，获取父元素li标签
count--;//当每删除一项计数器减1
if (count < 1) {
document.getElementById('lendList').style.display = 'none';//如果计数器小于1时即代表没有li标签了同时隐藏标题
}
for(var i=0;i<=count;i++){
document.getElementsByClassName('lendCheckbox')[i].value=i;
}
})
//为‘设备借用’列表里的 按钮减 绑定事件
$('#lendList').delegate(".spanSubtract", "click", function () {//点击借用设备列表里的数量 减
var spanValueNumber = $(this).next()[0].value;// $(this).next()[0]代表点击当前按钮的下一个元素,获取它的value
if (spanValueNumber > 1) {
spanValueNumber--;
$(this).next()[0].value = spanValueNumber;//减一的值在赋予给value
} else {
layer.msg("所选取的数量不能小于1");
}
})
//为‘设备借用’列表里的 按钮加 绑定事件
$('#lendList').delegate(".spanAdd", "click", function () {//点击借用设备列表里的数量 加
var spanValueNumber = $(this).prev()[0].value;// $(this).prevvalue()[0]代表点击当前按钮的上一个元素,获取它的value
spanValueNumber++;
$(this).prev()[0].value = spanValueNumber;//加一的值在赋予给value
})
//为表单的提交按钮绑定事件
$('.submit').click(function () {
var borrowApplyArray=new Array();//初始化一个借用数组，包含用户选择的设备、设备类型、设备顺序以及所借设备在申请表中的顺序
for(var i=0;i<=count-1;i++){
var deviceClassId=document.getElementsByClassName("device")[i].getAttribute('data-id');//获取借用列表的设备自定义属性data-id的值
var deviceTypeId=document.getElementsByClassName("deviceType")[i].getAttribute('data-id');//获取借用列表的设备类型自定义属性data-id的值
document.getElementsByClassName("number")[i].setAttribute('data-val',document.getElementsByClassName('number')[i].value);//为借用列表里的借用数量data-val属性赋予获取到的val值
var deviceNum=document.getElementsByClassName("number")[i].getAttribute('data-val');//获取借用设备的数量
var deviceClassSeq=document.getElementsByClassName('lendCheckbox')[i].value;//获取设备分类在申请表中的顺序
borrowApplyArray.push({"deviceClassId":deviceClassId,"deviceTypeId":deviceTypeId,"deviceNum":deviceNum,"deviceClassSeq":deviceClassSeq})
}
console.log(borrowApplyArray);
var sendData = {
"storeroomId": $('#storeroomId').val(),//获取库房编号
"borrowStartDate": $('#borrowStartDate').val(),//获取借用开始日期
"borrowEndDate": $('#borrowEndDate').val(),//获取归还日期
"reason": $('#reason').val(),//获取借用的理由
"deviceClassList":borrowApplyArray
};
$.ajax({
url: "/borrowapply/create",
type: 'post',
contentType: 'application/json',
dataType: "json",
data: JSON.stringify(sendData),
success: function (result) {
if (result && (result.code === 1) && (result.data.isSuccessful === true)) {
console.log("borrowApply success!");
layer.msg('申请成功');
} else {
console.log(result.msg);
layer.msg(result.msg)
}
},
error: function (err) {
alert("提交申请出现参数错误" + err);
}
});
});
//当点击取消按钮时弹出模态框以防止用户误操作以及为表单的取消按钮绑定事件
function cancelModal() {
var cancelModalTpl =
'<div id="applicationModal" class="modal fade" tabindex="-1" role="dialog">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>' +
'<h4 class="modal-title">取消</h4>' +
'</div>' +
'<div class="modal-body">' +
'<p>你确定需要取消该操作吗？</p>' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>' +
'<button type="button" class="btn btn-primary confirm">确定</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var template = Handlebars.compile(cancelModalTpl);
var html = template();
$("body").append(html);
this.cancelModal = $("#applicationModal").modal({show: true});
}
$('.cancel').click(function () {
cancelModal();//当点击取消按钮时执行模态弹框
$("#applicationModal").delegate(".confirm", "click", function () {
location.reload(true);//刷新当前页面
});
});
})(window, jQuery, window.bootstrapTableWapper);
涉及知识点总结
#### 1.获取ul标签，用apend('<li></li>')来添加 **模板数据**
#### 2.document.getElementsByClassName("device") 获取class为device所有的标签存在数组里，比如document.getElementsByClassName("device")[0]代表的是获取class为device的第一个标签
<img src="https://img-blog.csdnimg.cn/20181107212707425.png" width=256 height=256 />
#### 3.为生成的模板数据绑定事件比如点击确定按钮后生成一条条数据，行数据的末尾有一个删除的按钮如何绑定它并且如何确定点击是当前行的删除按钮呢？如图：
//为‘设备借用’列表里的删除按钮绑定事件
$('#lendList').delegate(".deleteBtn", "click", function () {//点击删除按钮
$(this).parents('li').remove();//$(this) 含义是当前的dom元素即删除的deleteBtn按钮
})
#### 4.生成的加减按钮绑定事件以及如何确定点击哪一行的数据里的加减
$(this).next()[0].value;// $(this).next()[0]代表点击当前按钮($(this))的下一个元素(.next())即input元素,获取它的value，如果想要获取上一个元素就是.prev()。
#### 5.html5的data-*自定义属性（html5新增属性）
所有主流浏览器都支持 data-* 属性。
data-* 属性用于存储私有页面后应用的自定义数据。
data-* 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。
data-* 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。
实例：
document.getElementsByClassName("device")[count].**setAttribute**('data-id',$('#lendDevice option:selected').val());//为设备大类里的data-id属性赋予获取到的html里select的id值
var deviceClassId=document.getElementsByClassName("device")[i].**getAttribute**('data-id');//获取借用列表的设备自定义属性data-id的值
#### 6.当遇到后端接口有list时，前端用ajax发送数据时必须用**数组来传递**
扫一扫
1466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
