<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<meta name="viewport" charset="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>桌面布局信息</title>
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
|
<link rel="stylesheet" href="static/styles/initialize.css" type="text/css">
|
<link rel="stylesheet" href="static/styles/common.css" type="text/css">
|
<link rel="stylesheet" href="static/plugins/layer/skin/default/layer.css" type="text/css">
|
|
<script type="text/javascript" src="static/plugins/jquery/jquery.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/jquery.easyui.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
|
<script type="text/javascript" src="static/scripts/easyuiExtend.js"></script>
|
<script type="text/javascript" src="static/scripts/jquery-extend.js"></script>
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui-datagrid-dnd/datagrid-dnd.js"></script>
|
<script src="static/plugins/ace/src-noconflict/ace.js" type="text/javascript"></script>
|
|
<!-- 弹窗加载组件 -->
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/spin.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/jquery.spin.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery.blockUI.js"></script>
|
<!-- wcp组件 -->
|
<script type="text/javascript" src="static/wcp/scripts/wcp.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.layer.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.blockUI.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.spin.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.jquery.js"></script>
|
|
<!--[if lt IE 9]>
|
<script type="text/javascript" src="static/plugins/json2.js"></script>
|
<![endif]-->
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.infoPicker.js"></script>
|
<style type="text/css">
|
.left {
|
width: 550px;
|
}
|
|
.left #div_left {
|
padding: 5px;
|
border-right: 1px solid #eee;
|
}
|
|
.item {
|
text-align: center;
|
width: 126px;
|
height: 26px;
|
float: left;
|
margin-left: 4px;
|
border: 1px solid #7abbe1;
|
margin-bottom: 4px;
|
border-radius: 3px;
|
}
|
|
.left .item span {
|
background: #7abbe1;
|
display: block;
|
border: 1px solid #fff;
|
color: #fff;
|
height: 24px;
|
line-height: 20px;
|
border-radius: 3px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.right h5 {
|
text-align: right;
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
margin: 0 30px 9px 0;
|
}
|
|
.right table {
|
border-collapse: collapse;
|
background: #eee;
|
margin: 5px auto 20px;
|
}
|
|
.right td {
|
text-align: center;
|
padding: 3px 4px 0px 0px;
|
width: 126px;
|
border: 1px solid #fff;
|
height: 26px;
|
}
|
|
.right td .assigned span {
|
background: #e0be79;
|
display: block;
|
border: 1px solid #fff;
|
color: #fff;
|
height: 24px;
|
line-height: 20px;
|
border-radius: 3px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.assigned {
|
border: 1px solid #e0be79;
|
}
|
|
.right td.over {
|
background: #f5c35c;
|
}
|
|
.pt-btn-danger {
|
background: #e6867c;
|
border: 1px solid #f0b6ae;
|
padding: 3px 30px;
|
}
|
|
.pt-btn-danger:hover {
|
background: #d07970;
|
}
|
|
.pt-btn-success {
|
background: #6ecc9d;
|
border: 1px solid #9ae0c4;
|
padding: 3px 30px;
|
}
|
|
.pt-btn-success:hover {
|
background: #57bc89;
|
}
|
|
.slimScrollDiv {
|
position: static !important;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="pt-form">
|
<table class=" configForm" style="width: 100%">
|
<tr>
|
<td class="left" id="leftPart">
|
<div style="height:452px; position: relative;">
|
<div id="div_left">
|
<c:forEach var="part" items="${partList}" varStatus="staturs">
|
|
<p class="item" id="${part.partId}">
|
<span>${part.partName}</span>
|
</p>
|
</c:forEach>
|
</div>
|
</div>
|
</td>
|
<td class="right" valign="top" id="rightLayout">
|
<h5>${column}列</h5>
|
<table id="table_right" cellpadding="0" cellspacing="1">
|
</table>
|
<div style="text-align:center;">
|
<input id="Button1" type="button" value="减一行" class="pt-btn pt-btn-danger" onclick="CutRow();" />
|
<input id="Button2" type="button" value="加一行" class="pt-btn pt-btn-success" onclick="AddRow();" />
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
|
<div class="pt-form-btn">
|
<div class="form-group">
|
<button class="pt-btn pt-btn-primary" id="btnSave">保存</button>
|
<button class="pt-btn pt-btn-default" id="btnClose">关闭</button>
|
</div>
|
</div>
|
|
</body>
|
<script type="text/javascript" src="static/scripts/ResizeScroll.js"></script>
|
<script>
|
//窗口参数，用于弹窗传递
|
var params = {
|
rowElement : null,
|
callBack : null
|
};
|
|
var column = "${column}";
|
var ratio = "${ratio}";
|
var desktopParts = "";
|
$(function() {
|
$("#btnSave").click(function() {
|
save();
|
});
|
|
$("#btnClose").click(function() {
|
closeWindow();
|
});
|
|
});
|
|
function load(module) {
|
var desktopParts = "";
|
if(typeof module != "undefined" && module != ""){
|
desktopParts = module.desktopParts;
|
}
|
init(desktopParts);
|
}
|
function tdDrop() {
|
$('.right td.drop').droppable({
|
onDragEnter : function() {
|
$(this).addClass('over');
|
},
|
onDragLeave : function() {
|
$(this).removeClass('over');
|
},
|
onDrop : function(e, source) {
|
//不允许一个框里有多个栏目
|
if ($(this).children().size() == 1) return;
|
$(this).removeClass('over');
|
if ($(source).hasClass('assigned')) {
|
$(this).append(source);
|
} else {
|
var c = $(source).clone().addClass('assigned');
|
$(this).empty().append(c);
|
c.draggable({
|
revert : true
|
});
|
|
//回不到左侧栏目
|
$(source).remove();
|
|
}
|
}
|
});
|
|
}
|
//初始化表格
|
function init(rowData) {
|
var html = "";
|
if (rowData != "") {
|
var rows = rowData.length;
|
var nowRow = 0;
|
var nowColumn = 0;
|
while (nowRow < rows) {
|
html += "<tr>";
|
for (var index = 0; index < column; index++) {
|
if (nowRow >= rowData.length || index >= rowData[nowRow].items.length) {
|
html += '<td class="drop"></td>';
|
} else {
|
var part = rowData[nowRow].items[nowColumn];
|
|
if (part.partName == "") {
|
html += '<td class="drop"></td>';
|
} else {
|
html += '<td class="drop"><p class="item assigned" id="' + part.partId + '"><span>' + part.partName + '</span></p></td>';
|
}
|
}
|
|
nowColumn++;
|
|
if (nowRow < rowData.length && column < rowData[nowRow].items.length && nowColumn == rowData[nowRow].items.length) {
|
nowColumn = 0;
|
nowRow++;
|
}
|
}
|
|
if (nowRow < rowData.length && column >= rowData[nowRow].items.length) {
|
nowColumn = 0;
|
nowRow++;
|
}
|
|
html += "</tr>";
|
}
|
} else {
|
//2行column列
|
for (var i = 0; i < 2; i++) {
|
html += "<tr>";
|
for (var j = 0; j < column; j++) {
|
html += '<td class="drop"></td>';
|
}
|
html += "</tr>";
|
}
|
}
|
|
$("#table_right").append(html);
|
//当修改时初始化表格里的p的拖动性
|
$('.right td p').draggable({
|
revert : true
|
});
|
|
tdDrop();
|
|
|
|
}
|
|
function save() {
|
var trList = $("#table_right").find("tr");
|
var rowItemMap = {};
|
var partArray = new Array();
|
for (var i = 0; i < trList.length; i++) {
|
var tdArr = trList.eq(i).find("td");
|
var itemMap = {};
|
var items = new Array();
|
for (var j = 0; j < tdArr.length; j++) {
|
var map = {};
|
var partId = tdArr.eq(j).find('p').attr("id");
|
var partName = tdArr.eq(j).find('span').text();
|
if (partName != "") {
|
map["partId"] = partId;
|
} else {
|
map["partId"] = "id_" + j;
|
}
|
map["partName"] = partName;
|
items.push(map);
|
}
|
itemMap["items"] = items;
|
partArray.push(itemMap);
|
}
|
|
rowItemMap["column"] = column;
|
rowItemMap["ratio"] = ratio;
|
rowItemMap["desktopParts"] = partArray;
|
//回调函数
|
//params.callBack(rowitmeMap);
|
if (params.rowElement != null) {
|
params.callBack(params.rowElement, rowItemMap);
|
}
|
|
closeWindow();
|
}
|
//拖动的js
|
$(function() {
|
$('#leftPart.left .item').draggable({
|
revert : true,
|
proxy : 'clone'
|
});
|
|
$('#div_left').droppable({
|
accept : '.assigned',
|
onDrop : function(e, source) {
|
$(source).removeClass('assigned');
|
$(source).appendTo(this);
|
|
}
|
});
|
|
//表格的drop特性
|
tdDrop();
|
|
//当修改时初始化表格里的p的拖动性
|
$('.right td p').draggable({
|
revert : true
|
});
|
|
});
|
|
//
|
$(function() {
|
$("#div_left").slimScroll({
|
height : "100%",
|
railOpacity : .9,
|
alwaysVisible : false
|
}).bind('slimscrolling', function(e, pos) {
|
|
$('#leftPart.left .item').draggable({
|
deltaY : -pos
|
});
|
|
});
|
;
|
|
});
|
//表格的drop特性
|
|
|
|
//添加行
|
function AddRow() {
|
var strTd = "";
|
for (var i = 0; i < column; i++) {
|
strTd += " <td class=\"drop\"> </td>";
|
}
|
$("#table_right").append("<tr>" + strTd + "</tr>");
|
//表格drop特性
|
tdDrop();
|
}
|
|
//删除行
|
function CutRow() {
|
var lasttd = $("#table_right tr:last-child");
|
var trList = $("#table_right").find("tr");
|
var tdArr = trList.eq(trList.length - 1).find("td");
|
for (var j = 0; j < tdArr.length; j++) {
|
var partId = tdArr.eq(j).find('p').attr("id");
|
var partName = tdArr.eq(j).find('span').text();
|
if (typeof partId != "undefined" && partId != "") {
|
layer.alert("最后一行有栏目，不能删除！");
|
break;
|
} else {
|
lasttd.remove();
|
|
}
|
}
|
|
}
|
|
|
function closeWindow() {
|
var index = top.layer.getFrameIndex(window.name); //获取窗口索引
|
top.layer.close(index);
|
}
|
</script>
|
</html>
|
