<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="padding">
<div class="navInfo">
<div class="addNew">
<span>行业领域</span>
<span class="addBtn" onclick="addIndustry()">添加</span>
</div>
<table class="dataList">
<thead>
<tr>
<td>大标题</td>
<td>背景图</td>
<td>行业名称</td>
<td>排序序号</td>
<td>创建时间</td>
<td>最后修改时间</td>
<td>创建账号</td>
<td>最后修改账号</td>
<td>功能</td>
</tr>
</thead>
<tbody id="listTable">
</tbody>
</table>
<div class="addTable">
<form class="form-horizontal" role="form">
<input type="hidden" id="industryId" value="0">
<div class="group">
<label>主标题*:</label>
<input type="text" id="navName"/>
</div>
<div class="group">
<label>行业*:</label>
<div>
<table style="width: 500px;">
<thead>
<tr>
<th>行业名称</th>
<th>排序</th>
<th>链接</th>
<th></th>
</tr>
</thead>
<tbody class="items">
<tr>
<td>
<input type="text" name="title[]" style="width: 120px;">
</td>
<td>
<input type="text" name="sortNum[]" style="width: 120px;">
</td>
<td>
<input type="text" name="url[]" style="width: 120px;">
</td>
<td>
<input type="button" value="删除" style="width: 50px;" onclick="delLine(this)">
</td>
</tr>
</tbody>
</table>
<br/>
<a href="#" onclick="addNewLine()">+添加一行</a>
</div>
</div>
<div class="group">
<label>语言选择:</label>
<div class="dropdown">
<select class="form-control" id="languageChoose">
<option selected="selected">请选择</option>
<option value="zh_CN">中文</option>
<option value="en_US">英文</option>
</select>
</div>
</div>
<div class="group">
<label>图片*:</label>
<div class="formgroup">
<div class="mTop5">
<label title="" for="ClubImagesUpload" id="btnClubImg" class="addimg">
选择图片
<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload"
value="选择图片" class="hide" onchange="uploadImage()">
</label>
</div>
<div>图片尺寸:1000*500</div>
</div>
</div>
<div class="group">
<label></label>
<div class="formgroup" id="preViewMore">
<div class="imgshow">
</div>
<input type="hidden" id="bgImage">
</div>
</div>
<div class="group">
<label></label>
<button type="button" class="btn btn-primary" onclick="saveIndustry()">确认</button>
<button type="button" class="btn btn-default" onclick="cancelIndustry()">取消</button>
</div>
</form>
</div>
</div>
<script>
var csrftoken = document.head.querySelector('meta[name=_csrf]').content;
$(document).ready(function () {
getDataList();
});
function resetForm() {
$('#industryId').val(0);
$('#avName').val('');
$('.imgshow').html('');
$('#languageChoose').val('');
$('.items').html('<tr>' +
'<td>' +
'<input type="text" name="title[]" style="width: 120px;">' +
'</td>' +
'<td>' +
'<input type="number" min="0" name="sortNum[]" style="width: 120px;" value="0">' +
'</td>' +
'<td>' +
'<input type="text" name="url[]" style="width: 120px;">' +
'</td>' +
'<td>' +
'<input type="button" value="删除" style="width: 50px;" onclick="delLine(this)">' +
'</td>' +
'</tr>');
}
function addIndustry() {
resetForm();
$('.dataList').hide();
$('.addTable').show();
}
function cancelIndustry() {
$('.dataList').show();
$('.addTable').hide();
}
function getDataList() {
$.ajax({
type: "GET",
headers: {'X-CSRF-TOKEN': csrftoken},
url: "",
data: "",
success: function (data) {
var list = data.list;
if (list == "" || list.length < 0 || list == undefined) {
$('#listTable').html('<td colspan="10" style="height:200px;text-align:center;color: #23527c">暂无相关数据...</td>');
return;
}
var tr = $('<tr></tr>');
var str = '';
for (var i = 0; i < list.length; i++) {
var data = list[i];
str = str + '<tr>';
str = str + '<td> ' + data.detail.title + ' </td>';
str = str + '<td> <img src="' + data.detail.bgImage + '" width="200"/> </td>';
str = str + '<td> </td>';
str = str + '<td> </td>';
str = str + '<td> ' + data.detail.createdAt + ' </td>';
str = str + '<td> ' + data.detail.updatedAt + ' </td>';
str = str + '<td> ' + data.detail.creater + ' </td>';
str = str + '<td> ' + data.detail.updater + ' </td>';
str = str + '<td> ' +
' <input type="button" name="" value="删除" class="btn btn-danger" onclick="del((' + data.detail.id + '))" />' +
'<input type="button" name="" value="修改" class="btn btn-info" onclick="editIndustry(' + data.detail.id + ')" />'
+ ' </td>';
str = str + '</tr>';
for (var j = 0; j < data.subList.length; j++) {
var subData = data.subList[j];
str = str + '<tr>';
str = str + '<td> </td>';
str = str + '<td> </td>';
str = str + '<td> ' + subData.title + ' </td>';
str = str + '<td> ' + subData.sortNum + ' </td>';
str = str + '<td> ' + subData.createdAt + ' </td>';
str = str + '<td> ' + subData.updatedAt + ' </td>';
str = str + '<td> ' + subData.creater + ' </td>';
str = str + '<td> ' + subData.updater + ' </td>';
str = str + '<td> ' +
' <input type="button" name="" value="删除" class="btn btn-danger" onclick="delSub((' + subData.id + '))" />'
+ ' </td>';
str = str + '</tr>';
}
}
$('#listTable').html(str);
},
error: function () {
console.log("发生错误")
alert("发生错误");
},
complete: function () {
console.log("ajax请求完成")
}
})
}
function uploadImage() {
var formData = new FormData();
formData.append("file", $("#ClubImagesUpload")[0].files[0]);
$.ajax({
url: '', /*接口域名地址*/
type: 'post',
headers: {'X-CSRF-TOKEN': csrftoken},
data: formData,
contentType: false,
processData: false,
success: function (data) {
$('#bgImage').val(data.filePath);
$('.imgshow').html('<img src="' + data.filePath + '" />');
}
})
}
function addNewLine() {
$('.items').append('<tr>' +
'<td>' +
'<input type="text" name="title[]" style="width: 120px;">' +
'</td>' +
'<td>' +
'<input type="number" min="0" name="sortNum[]" style="width: 120px;" value="0">' +
'</td>' +
'<td>' +
'<input type="text" name="url[]" style="width: 120px;">' +
'</td>' +
'<td>' +
'<input type="button" value="删除" style="width: 50px;" onclick="delLine(this)">' +
'</td>' +
'</tr>');
}
function delLine(obj) {
console.log(obj);
$(obj).parent().parent().remove();
}
function editIndustry(id) {
$.ajax({
type: "POST",
url: "",
headers: {'X-CSRF-TOKEN': csrftoken},
data: {
id: id
},
success: function (data) {
$('#industryId').val(data.detail.id);
$('#navName').val(data.detail.title);
$('#languageChoose').val(data.detail.lang);
$('#bgImage').val(data.detail.bgImage);
if (data.detail.bgImage != '') {
$('.imgshow').html('<img src="' + data.detail.bgImage + '" />');
}
var html = '';
for (var i = 0; i < data.subList.length; i++) {
var item = data.subList[i];
html += '<tr>' +
'<td>' +
'<input type="text" name="title[]" style="width: 120px;" value="' + item.title + '">' +
'</td>' +
'<td>' +
'<input type="number" min="0" name="sortNum[]" style="width: 120px;" value="' + item.sortNum + '">' +
'</td>' +
'<td>' +
'<input type="text" name="url[]" style="width: 120px;" value="' + item.url + '">' +
'</td>' +
'<td>' +
'<input type="button" value="删除" style="width: 50px;" onclick="delLine(this)">' +
'</td>' +
'</tr>';
}
$('.items').html(html);
$('.dataList').hide();
$('.addTable').show();
}
})
}
function saveIndustry() {
var industryId = $.trim($('#industryId').val());
var title = $.trim($('#navName').val());
var bgImage = $.trim($('#bgImage').val());
var alanguageChoose = $.trim($('#languageChoose').val());
var titles = $('input[name="title[]"]');
var sortNums = $('input[name="sortNum[]"]');
var urls = $('input[name="url[]"]');
if (title.length < 1) {
alert('请输入主标题');
return;
}
for (var i = 0; i < titles.length; i++) {
var subTitle = $.trim($(titles[i]).val());
var sortNum = parseInt($.trim($(sortNums[i]).val()));
var url = $.trim($(urls[i]).val());
if (subTitle.length < 1 && (isNaN(sortNum) || sortNum < 0) && url.length < 1) {
alert('行业信息请填写完整');
return;
}
}
if (alanguageChoose.length < 1) {
alert('请选择语言');
return;
}
if (bgImage.length < 1) {
alert('请选择图片');
return;
}
$.ajax({
type: "POST",
url: "",
headers: {'X-CSRF-TOKEN': csrftoken},
data: {
id: industryId,
title: title,
bgImage: bgImage,
lang: alanguageChoose
},
success: function (data) {
var parentId = data.id;
for (var i = 0; i < titles.length; i++) {
var item = {
id: '',
parentId: parentId,
title: $.trim($(titles[i]).val()),
sortNum: parseInt($(sortNums[i]).val()),
url: $.trim($(urls[i]).val()),
lang: alanguageChoose
};
$.ajax({
type: "post",
url: "",
headers: {'X-CSRF-TOKEN': csrftoken},
data: item,
success: function (data) {
}
})
}
$('.dataList').show();
$('.addTable').hide();
getDataList();
},
error: function () {
console.log("发生错误")
alert("发生错误");
},
complete: function () {
console.log("ajax请求完成")
}
})
}
function del(id) {
if (confirm("确认删除?")) {
$.ajax({
type: "POST",
url: "",
headers: {'X-CSRF-TOKEN': csrftoken},
data: {
id: id
},
success: function (data) {
alert("删除成功");
getDataList();
}
})
}
}
function delSub(id) {
if (confirm("确认删除?")) {
$.ajax({
type: "POST",
url: "",
headers: {'X-CSRF-TOKEN': csrftoken},
data: {
id: id
},
success: function (data) {
alert("删除成功");
getDataList();
}
})
}
}
</script>
</body>
</html>
效果