287 lines
11 KiB
Plaintext
287 lines
11 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8" %>
|
|
|
|
<style type="text/css">
|
|
.choiceColor2 {
|
|
background: rgba(121, 116, 116, 0.2);
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
$('#containerC').on('mousedown', 'td', function (e) {
|
|
$('.choiceColor2').removeClass('choiceColor2');
|
|
var startLeft = e.clientX;
|
|
var startTop = e.clientY;
|
|
var thatTd_ = $(this);
|
|
|
|
$(document).on('mousemove', function (e) {
|
|
var moveLeft = e.clientX;
|
|
var moveTop = e.clientY;
|
|
// 动态生成选择区域时占位的碰撞检测块
|
|
crashPlaceholder(moveLeft, moveTop, startLeft, startTop);
|
|
// 元素碰撞检测
|
|
elementCrash();
|
|
// 处理有表格合并之后的的选择问题 通过检测高度来实现效果
|
|
formMergeChoice(moveLeft, moveTop)
|
|
});
|
|
e.stopPropagation();
|
|
})
|
|
// 鼠标抬起事件
|
|
$(document).on('mouseup', function (e) {
|
|
$(document).unbind('mousemove');
|
|
$('.showC').remove();
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// 生成占位块
|
|
function crashPlaceholder(A, B, C, D) {
|
|
// 开始的行列
|
|
var a = A > C ? C : A;
|
|
var b = B > D ? D : B;
|
|
|
|
$('.showC').remove();
|
|
$('body').append('<div class="showC"></div>');
|
|
|
|
$('.showC').css('width', Math.abs(A - C)).css('height', Math.abs(B - D)).css('position', 'fixed').css('left', a).css(
|
|
'top', b).css('border', '1px dotted black');
|
|
}
|
|
|
|
// 碰撞检测
|
|
function elementCrash() {
|
|
$('#containerC td').each(function () {
|
|
$(this).removeClass('choiceColor2');
|
|
// 碰撞检测
|
|
var t1 = $(this).offset().top;
|
|
var l1 = $(this).offset().left;
|
|
var r1 = $(this).offset().left + $(this).innerWidth();
|
|
var b1 = $(this).offset().top + $(this).innerHeight();
|
|
|
|
var t2 = $('.showC').offset().top;
|
|
var l2 = $('.showC').offset().left;
|
|
var r2 = $('.showC').offset().left + $('.showC').innerWidth();
|
|
var b2 = $('.showC').offset().top + $('.showC').innerHeight();
|
|
|
|
if (b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2) {
|
|
$(this).removeClass('choiceColor2');
|
|
} else {
|
|
$(this).addClass('choiceColor2');
|
|
}
|
|
})
|
|
}
|
|
|
|
// 处理有表格合并之后的的选择问题 通过检测高度来实现效果
|
|
function formMergeChoice() {
|
|
var heightArr = [],
|
|
heightArr1 = [],
|
|
widthArr = [],
|
|
widthArr1 = [];
|
|
$('.choiceColor2').each(function () {
|
|
heightArr.push($(this).offset().top);
|
|
heightArr1.push($(this).offset().top + $(this).outerHeight());
|
|
widthArr.push($(this).offset().left);
|
|
widthArr1.push($(this).offset().left + $(this).outerWidth());
|
|
})
|
|
var minHeight = Math.min.apply(null, heightArr);
|
|
var maxHeight = Math.max.apply(null, heightArr1);
|
|
var minWidth = Math.min.apply(null, widthArr);
|
|
var maxWidth = Math.max.apply(null, widthArr1);
|
|
$('.showC').outerHeight(maxHeight - minHeight - 3).outerWidth(maxWidth - minWidth).css('top', minHeight).css('left', minWidth);
|
|
// 当改变碰撞占位检测块之后的高度和定位之后 再次进行碰撞检测
|
|
elementCrash();
|
|
|
|
$('.choiceColor2').each(function () {
|
|
heightArr.push($(this).offset().top);
|
|
heightArr1.push($(this).offset().top + $(this).outerHeight());
|
|
widthArr.push($(this).offset().left);
|
|
widthArr1.push($(this).offset().left + $(this).outerWidth());
|
|
})
|
|
var minHeight1 = Math.min.apply(null, heightArr);
|
|
var maxHeight1 = Math.max.apply(null, heightArr1);
|
|
var minWidth1 = Math.min.apply(null, widthArr);
|
|
var maxWidth1 = Math.max.apply(null, widthArr1);
|
|
|
|
// 递归函数
|
|
if (minHeight == minHeight1 && maxHeight == maxHeight1 && minWidth == minWidth1 && maxWidth == maxWidth1) {
|
|
return;
|
|
} else {
|
|
formMergeChoice();
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
showtable();
|
|
var containerHeight = (800 * nowFrameHeight) / nowFrameWidth;
|
|
$('#leftMove').css('height', containerHeight + "px");
|
|
$('#containerTableDiv').css('height', containerHeight + "px");
|
|
});
|
|
|
|
function doContainerSave() {
|
|
var insertrow = $('#insertrow').val();
|
|
var insertcolumn = $('#insertcolumn').val();
|
|
|
|
if (insertrow == '') {
|
|
showAlert('d', '行不能为空');
|
|
return;
|
|
}
|
|
if (insertcolumn == '') {
|
|
showAlert('d', '列不能为空');
|
|
return;
|
|
}
|
|
|
|
swal({
|
|
text: "您确定重新生成行列？",
|
|
dangerMode: true,
|
|
buttons: {
|
|
cancel: {
|
|
text: "取消",
|
|
value: null,
|
|
visible: true,
|
|
className: "btn btn-default btn-sm",
|
|
closeModal: true,
|
|
},
|
|
confirm: {
|
|
text: "确定",
|
|
value: true,
|
|
visible: true,
|
|
className: "btn btn-danger btn-sm",
|
|
closeModal: true
|
|
}
|
|
}
|
|
})
|
|
.then(function (willDelete) {
|
|
if (willDelete) {
|
|
$.post(ext.contextPath + '/process/dataVisualFrameContainer/dosave.do', {
|
|
insertrow: insertrow,
|
|
insertcolumn: insertcolumn,
|
|
frameId: '${param.frameId}'
|
|
}, function (data) {
|
|
$('#containerC').html("");
|
|
showtable();
|
|
}, 'json');
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function showtable() {
|
|
$.post(ext.contextPath + '/process/dataVisualFrameContainer/getJson.do', {frameId: '${param.frameId}'}, function (data) {
|
|
var html = "";
|
|
// var trLength=data.length;
|
|
// $('#containerC').css('height',(trLength*50)+"px");
|
|
for (var i = 0; i < data.length; i++) {
|
|
var r = data[i];
|
|
// html += "<tr style=\"height: 50px;\" >"
|
|
html += "<tr >"
|
|
if (r.nodes != '') {
|
|
for (var j = 0; j < r.nodes.length; j++) {
|
|
var c = r.nodes[j];
|
|
var width = c.width + "%";
|
|
var height = c.height + "%";
|
|
var bkcolor = c.background;
|
|
|
|
html += "<td id=" + c.id + " rowspan=" + c.rows + " colspan=" + c.columns + " showRow=" + (r.insertRow) + " showColumn=" + (c.insertColumn) + " style='width:" + width + ";height:" + height + ";background:" + bkcolor + ";border: 1px solid #B0B0B0;' ondblclick=\"containerEdit('" + c.id + "');\" ></td>";
|
|
}
|
|
}
|
|
html += "</tr>"
|
|
}
|
|
// console.log(html);
|
|
$('#containerC').html(html);
|
|
|
|
}, 'json');
|
|
}
|
|
|
|
function doContainerMerge() {
|
|
var choiceColor2 = $('.choiceColor2');
|
|
|
|
if (choiceColor2.length > 1) {
|
|
var length = choiceColor2.length;
|
|
|
|
var firstRow = choiceColor2[0].attributes.showrow.value;
|
|
var firstColumn = choiceColor2[0].attributes.showcolumn.value;
|
|
var lastRow = choiceColor2[length - 1].attributes.showrow.value;
|
|
var lastColumn = choiceColor2[length - 1].attributes.showcolumn.value;
|
|
|
|
// console.log(firstRow+","+firstColumn);
|
|
// console.log(lastRow+","+lastColumn);
|
|
|
|
$.post(ext.contextPath + '/process/dataVisualFrameContainer/doContainerMerge.do', {
|
|
frameId: '${param.frameId}',
|
|
firstRow: firstRow,
|
|
firstColumn: firstColumn,
|
|
lastRow: lastRow,
|
|
lastColumn: lastColumn
|
|
}, function (data) {
|
|
$('#containerC').html("");
|
|
showtable();
|
|
}, 'json');
|
|
}
|
|
|
|
//attributes
|
|
}
|
|
|
|
function containerEdit(id) {
|
|
$.post(ext.contextPath + '/process/dataVisualFrameContainer/containerEdit.do', {
|
|
id: id,
|
|
frameId: '${param.frameId}'
|
|
}, function (data) {
|
|
$("#containerEditDiv").html(data);
|
|
openModal('containerEditSubModal');
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<div class="modal fade" id="containerSubModal">
|
|
<div class="modal-dialog" style="width:900px;">
|
|
<div class="modal-content">
|
|
|
|
<div id="alertDiv"></div>
|
|
|
|
<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 style="float: left;width: 100%;height: 45px;text-align: center;line-height: 45px;margin-top: 10px;">
|
|
<div style="float: left;width: 40%;height: 100%;">
|
|
<div style="float: left;width: 30%;height: 100%;">
|
|
行
|
|
</div>
|
|
<div style="float: left;width: 70%;height: 100%;padding-top:5px;">
|
|
<input type="number" autocomplete="off" min="1" class="form-control" id="insertrow"
|
|
name="insertrow" placeholder="行" value="${insertrow}">
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 40%;height: 100%;">
|
|
<div style="float: left;width: 30%;height: 100%;">
|
|
列
|
|
</div>
|
|
<div style="float: left;width: 70%;height: 100%;padding-top:5px;">
|
|
<input type="number" autocomplete="off" min="1" class="form-control" id="insertcolumn"
|
|
name="insertcolumn" placeholder="列" value="${insertcolumn}">
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width: 20%;height: 100%;">
|
|
<button type="button" class="btn btn-primary" onclick="doContainerSave()" id="btn_save">确认</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="float: left;width: 100%;margin-top: 20px;padding-left: 50px;padding-right: 50px;">
|
|
<div id="containerTableDiv" style="float: left;width:100%;">
|
|
<table id="containerC" style="width: 800px;height: 100%;border-collapse: collapse;">
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="float: left;width: 100%;margin-top: 20px;"></div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
|
|
<button type="button" class="btn btn-primary" onclick="doContainerMerge()" id="btn_save">合并单元格</button>
|
|
<!-- <button type="button" class="btn btn-primary" onclick="doContainerSplit()" id="btn_save">拆分单元格</button> -->
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div> |