主页自定义可拖动组件 2.0版本 (portlet)

本文介绍了如何从一个网页中提取portlet组件,并将其适应于bootstrap3的布局。通过修改class属性,如将'span4'替换为'col-sm-4 col-md-4',实现了兼容性。页面包含一个可配置组件的齿轮按钮,用户可以拖动和删除组件。保存配置后,组件会显示在主页面。文章提到了js简化、图标调整以及后台如何处理保存的组件id和坐标,用于更新数据库。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,我是从下面这个页面抠出来的。

http://wrapbootstrap.com/preview/WB00958H8

效果:


在这个页面直接右键查看源代码,就可以看到了。非常清楚。


因为我就只用这么一个portlet功能,我就给抠下来了。

原来的代码使用的是bootstrap2,我们项目用的是bootstrap3,我测试了可以用。只要把页面中原本bootstrap2的一些class,比如class="span4"这种的换成相应的class="col-sm-4 col-md-4 "就可以了。

下面的css文件,bootstrap-default.css(主题样式theme)和bootstrap-responsive.css(响应式布局css,bootstrap3已经没有了)就可以不用引入了。


页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Admin Simplenso - Portlets</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTML5 Admin Simplenso Template">
  <meta name="author" content="ahoekie">

  <!-- Bootstrap -->
  <link href="css/bootstrap/bootstrap.css" rel="stylesheet" id="main-theme-script">
  <link href="css/bootstrap/bootstrap-default.css" rel="stylesheet" id="theme-specific-script">
  <link href="css/bootstrap/bootstrap-responsive.css" rel="stylesheet">
  
  
  <!-- Uniform  表单美化插件
  <link rel="stylesheet" type="text/css" media="screen,projection" href="scripts/uniform/css/uniform.default.css" />
	-->

  <!-- Simplenso -->
  <link href="css/simplenso.css" rel="stylesheet">
  
  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- Le fav and touch icons -->
  <link rel="shortcut icon" href="images/ico/favicon.ico">
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">

	
</head>
<body id="portlets">

<!-- Top navigation bar -->
<!-- Main Content Area | Side Nav | Content -->    
<div class="container-fluid">
  
    
    <!-- Bread Crumb Navigation -->
	<div class="span10">
	
      <div class="row-fluid">
      	 <!-- Portlet Set 1 -->
         <div class="span4 column" id="col1">
         	 <!-- Portlet: Fancy Portlets -->
             <div class="box" id="box-0">
              <h4 class="box-header round-top">Fancy Portlets
                  <a class="box-btn" title="close"><i class="icon-remove"></i></a>
                  <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                  <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>
              </h4>         
              <div class="box-container-toggle">
                  <div class="box-content">
                    <h2>Fancy Portlets</h2>  
                    <p>
                    Draggable porlets which look cool and make you able to setup you desktop more flexible. 
                    These portlets on its own integrate very nicely with the rest of the site. 
                    You can use the grid controls to setup sizes for portlets. 
                    And all the normal style options are available in the boxes.
                    </p>     
                  </div>
              </div>
            </div><!--/span-->
            <!-- Portlet: State Saving -->
            <div class="box" id="box-1">
              <h4 class="box-header round-top">State Saving
                  <a class="box-btn" title="close"><i class="icon-remove"></i></a>
                  <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                  <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>
              </h4>         
              <div class="box-container-toggle">
                  <div class="box-content">
                    <h2>State Saving</h2>  
                    <p>
                    Rearanging your portlets has no use if you have to do it over and over again. 
                    That is why Admin Intenso saves the state of you portlet. 
                    You reposition everything the way you want it and hit refresh. 
                    What you will see that the desktop is remembering where you placed the portlets.
                    </p>
                  </div>
              </div>
            </div><!--/span-->
         </div>
         
         <!-- Portlet Set 2 -->
         <div class="span4 column" id="col2">
         	 <!-- Portlet: Collapsible -->
             <div class="box" id="box-2">
              <h4 class="box-header round-top">Collapsible
                  <a class="box-btn" title="close"><i class="icon-remove"></i></a>
                  <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                  <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>
              </h4>         
              <div class="box-container-toggle">
                  <div class="box-content">
                    <h2>Collapsible</h2>  
                    <p>
                    Each individual box kan be collapsed when there is no need to display the 
                    data everytime and to save up the extra space for the other boxes. 
                    An extra feature that AdminIntenso is offering is that the collapsed 
                    state is also remembered when refresjing the page.
                    </p>                 
                  </div>
              </div>
            </div><!--/span-->
            <!-- Portlet: Buttons -->
            <div class="box" id="box-3">
              <h4 class="box-header round-top">Buttons
                  <a class="box-btn" title="close"><i class="icon-remove"></i></a>
                  <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                  <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>
              </h4>         
              <div class="box-container-toggle">
                  <div class="box-content">
                    <h2>Buttons</h2>  
                    <p>
                    One these boxes you can see different types of buttons each having it's own function. 
                    In some cases you might not want all those buttons. 
                    So AdminIntenso is flexible enough to leave out some of the buttons. 
                    This can be different for each box on the page.
                    </p>
                  </div>
              </div>
            </div><!--/span-->
         </div>
         
         <!-- Portlet Set 3 -->
         <div class="span4 column" id="col3">
         	 <!-- Portlet: Close Button -->
             <div class="box" id="box-4">
              <h4 class="box-header round-top">Close Button
                  <a class="box-btn" title="close"><i class="icon-remove"></i></a>
                  <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                  <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>
              </h4>         
              <div class="box-container-toggle">
                  <div class="box-content">
                    <h2>Close Button</h2>  
                    <p>
                    All these boxes contain a set of buttons the button on the far right is the close button. 
                    Which can be used to close the box. When clicking the button you only need to confirm or cancelled. 
                    Also here AdminIntenso offers the option of storing the state of closed boxes. 
                    So next time you refreshed the boxes are still removed from the page.
                    </p>               
                  </div>
              </div>
            </div><!--/span-->
            <!-- Portlet: Settings Button -->
            <div class="box" id="box-5">
              <h4 class="box-header round-top">Settings Button
                  <a class="box-btn" title="close"><i class="icon-remove"></i></a>
                  <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                  <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>
              </h4>         
              <div class="box-container-toggle">
                  <div class="box-content">
                    <h2>Settings Button</h2>  
                    <p>
                    The settings button is an extra feature which pops up a dialog which can be used for 
                    inputing spefic settings for data in the box. This way the user has even more flexibillity 
                    on how the boxes on the dashboard behave. 
                    </p>   
                  </div>
              </div>
            </div><!--/span-->
         </div>
 
    </div><!--/span-->
  </div><!--/row-->
  
    <div id="box-config-modal" class="modal hide fade in" style="display: none;">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Adjust widget</h3>
      </div>
      <div class="modal-body">
        <p>This part can be customized to set box content specifix settings!</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn btn-primary" data-dismiss="modal">Save Changes</a>
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
      </div>
    </div>
</div><!--/.fluid-container-->

    <!-- Google API -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

     
    <!-- jQuery 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    -->
	<script src="js/jquery-2.0.3.min.js"></script>
	
	<!-- Data Tables -->
    <script src="js/jquery.dataTables.js"></script>
	
	<script src="js/jquery.uniform.js"></script>


	
    <!-- jQuery UI Sortable
    <script src="js/jquery-ui/ui/minified/jquery.ui.core.min.js"></script>
	<script src="js/jquery-ui/ui/minified/jquery.ui.widget.min.js"></script>
	<script src="js/jquery-ui/ui/minified/jquery.ui.mouse.min.js"></script>
	<script src="js/jquery-ui/ui/minified/jquery.ui.sortable.min.js"></script>
    <script src="js/jquery-ui/ui/minified/jquery.ui.widget.min.js"></script>
	 -->
    <script src="js/jquery-ui-1.10.4.custom.js"></script>
  

    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
	<!--控制关闭小窗口 -->
	<script src="js/bootbox.js"></script>
	
    <!-- jQuery Cookie -->    
    <script src="js/jquery.cookie.js"></script>
 
    

    
    <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
    <!--[if gte IE 8]><script src="scripts/blueimp-jQuery-File-Upload/js/cors/jquery.xdr-transport.js"></script><![endif]-->
    
    <!-- Simplenso Scripts -->
    <script src="js/simplenso.js"></script>
  </body>
</html>
效果:




————————————————————————————————————————————————————————————————————————————

这个比较好看点,所以又让我改用这个了。。。。。折腾。。

页面:


那个jqplot的图表,我还没搞定,大小看着很难受。。。。请54。。。


右上角是个配置组件的齿轮形按钮,点击进入下面这个页面:


在这个页面你就可以随便拖动,随便删除组件啦。。。确定要显示的组件后,保存√,就可以显示到刚刚那页面了。

俩页面代码大同小异的。注意下list值的接收问题就好了,接不到正确值的debug跑跑就知道了。


页面还是用的foreach:

第一个页面:

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="../common/header.jsp"%>
<title><jdf:message code="组件首页" /></title>
<jdf:themeFile file="css/widget.css" />
</head>
<body id="portlets">
	<!-- Top navigation bar -->
	<!-- Main Content Area | Side Nav | Content -->
	<div class="container">
			<div class="row">
				<div style="float:right;margin-bottom:10px;width=100%;">
					<a href="${dynamicDomain}/widget/config?ajax=1" class="colorbox-full" id="setWidget" ><span class="glyphicon glyphicon-cog"></span></a>
				</div>
			</div>
			<div class="row">
				<c:forEach begin="0" end="2" varStatus="num0">
					<div class="col-sm-4 col-md-4 column" id="col${num0.index}"> 
						<c:forEach var="item" items="${personalWidgetList}" varStatus="num">
		                    <c:if test="${item[0].positionY==num0.index+1}">
		                    	<div id="">
			                        <div class="box" id="box-${item[0].positionX}-${item[0].positionY}">
				                        <h4 class="box-header round-top">${item[1] }
											<a class="box-btn" title="close"><i class="glyphicon glyphicon-remove"></i></a>
											<a class="box-btn" title="toggle"><i class="glyphicon glyphicon-minus"></i></a>
				                        </h4>
				                        <div class="box-container-toggle">
				                            <div class="box-content">
												<iframe id="widgetFrame" name="widgetFrame" src="${dynamicDomain}${item[2] }?ajax=1" style="overflow: visible; height: 250px;width: 100%" scrolling="auto" frameborder="no"></iframe>
	                                        	<input type="hidden" name="widgetId" value="${item[0].widgetId}">
				                            </div>
			                       		</div>
			                       	</div>
			                	</div>
							</c:if>
		                </c:forEach>
					</div>
		        </c:forEach> 

			</div>

	</div>
	<!--/.fluid-container-->
	<!-- Bootstrap -->
	<jdf:themeFile file="bootbox.js" />
	
	<!-- jQuery Cookie -->
	<jdf:themeFile file="jquery.cookie.js" />

	<!-- Simplenso Scripts -->
	<jdf:themeFile file="simplenso.js" />
	

</body>
</html>

第二个页面:

在控制这个页面的controller里,读取了第一个页面那张个人组件表的所有组件的id,在显示这个配置组件页面用js给组件标记上 “已选择”。

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="../common/header.jsp"%>
<title><jdf:message code="组件首页" /></title>
<jdf:themeFile file="css/widget.css" />
</head>
<body id="portlets">
	<div class="box border">
		<div class="box-title">
			<h2><span class="glyphicon glyphicon-list"></span><jdf:message code="组件配置"/></h2>
			<div class="tools hidden-xs">
				<a href="${dynamicDomain}/widgetProfile/updatePosition?ajax=1" class="btn btn-primary" onclick="return getPosition()" id="savePosition">
		   			<span class="glyphicon glyphicon-ok"></span><jdf:message code="common.button.save"/>
		   		 </a>
			</div>
		</div>
		<div class="col-sm-12 alert alert-info" id="messageBox">
			${message}
		</div>
	</div>
	<div class="container">
		<div class="row">
			<c:forEach begin="0" end="2" varStatus="num0">
				<div class="col-sm-4 col-md-4 column" id="col${num0.index}"> 
					<c:forEach var="item" items="${widgets}" varStatus="num">
	                    <c:if test="${item.positionY==num0.index+1}">
	                        <div class="box widget" id="box-${item.positionX}-${item.positionY}" style="">
		                        <h4 class="box-header round-top">${item.name }
									<a class="box-btn" title="close"><i class="glyphicon glyphicon-remove"></i></a>
									<a class="box-btn" title="toggle"><i class="glyphicon glyphicon-minus"></i></a>
		                        </h4>
		                        <div class="box-container-toggle">
		                            <div class="box-content">
										<iframe id="widgetFrame" name="widgetFrame" src="${dynamicDomain}${item.linkUrl }?ajax=1" style="overflow: visible; height: 250px;width: 100%" scrolling="auto" frameborder="no"></iframe>
                                       	<input type="hidden" name="widgetId" value="${item.objectId}">
		                            </div>
	                       		</div>
	                       	</div>
						</c:if>
	                </c:forEach>
				</div>
	        </c:forEach> 
		</div>
	</div>
	<!--/.fluid-container-->
	<!-- Bootstrap -->
	<jdf:themeFile file="bootbox.js" />
	
	<!-- jQuery Cookie -->
	<jdf:themeFile file="jquery.cookie.js" />

	<!-- Simplenso Scripts -->
	<jdf:themeFile file="simplenso.js" />
	
	<script type="text/javascript">

	$('.column').bind('sortstop', function(event, ui) { 
		var str = "";
		$('.column').each(function() {
			$("div.box",this).each(function(){
				str += $(this).find("input[name='widgetId']").val() + ",";
			});
			str = str.substring(0,str.length-1);
			str += "|";
        });
		console.log(str);
	} );
	
	function getPosition(){
		var positionSort;
		var widgetNum = new Array(3);
		var columnNum = 0;
		$('.column').each(function() {
			var widgetSum = 0;
			$("div.box",this).each(function(){
				positionSort += $(this).find("input[name='widgetId']").val() + ",";
				widgetSum++;
			});
			positionSort += "|";
			widgetNum[columnNum] = widgetSum;
			columnNum++;
        });
		document.getElementById("savePosition").href += "&positionSort=" + positionSort + "&widgetNum1="+widgetNum[0]+ "&widgetNum2="+widgetNum[1]+ "&widgetNum3="+widgetNum[2];
	}
		
	$(function(){
		var existedWidgetId = "${existedWidgetId}";
		existedWidgetId = existedWidgetId.substring(1,existedWidgetId.length-1);
		var existedWidgetIds = new Array();
		existedWidgetIds = existedWidgetId.split(",");
		for( var item in existedWidgetIds){
			//alert(item+":"+existedWidgetIds[item]);
			$("div.widget",this).each(function(){
				existedWidgetIds[item] = existedWidgetIds[item].trim();
				if($(this).find("input[name='widgetId']").val() == existedWidgetIds[item]){
					$(this).find("h4[class='box-header round-top']")[0].innerHTML += '<span class="glyphicon glyphicon-ok">(已选)</span>';
				}
			});
		}
	});
	</script>
</body>
</html>


还有这个js,被我把没用的删了不少

simplenso.js

// Init vars
var closedBoxesCookiePrefix = "SimplensoClosedBoxes_";
var boxPositionCookiePrefix = "SimplensoColumnBoxes_";
var deletedBoxesCookiePrefix = "SimplensoDeletedBoxes_";
var themeCookie = "SimplensoTheme";
var menuCookie = "SimplensoMenu";
var cookieExpiration = 365;

var screenWidth = $(document).width();
var screenHeigth =  $(document).height();

// check for theme cookie first and switch theme
$(document).ready(function(){
	var themeCkie = $.cookie(themeCookie);
	if (themeCkie && themeCkie != '')	{
		switchTheme(null, themeCkie);
	}

	// menu cookie
	var menuCkie = $.cookie(menuCookie);
	if (menuCkie && menuCkie != '')	{

		if(menuCkie == 2) {
			$(".sidenav-style-2").parent().parent().attr("class","nav nav-tabs nav-stacked");
			$(".sidenav-style-2").parent().parent().parent().removeClass("well");
		}
	}
	$("body").removeClass("hidden")
});


$(document).ready(function(){

	// Control funtion for portlet (box) buttons clicks
	function setControls(ui) {
		//$('[class="box-btn"][title="toggle"]').click(function() {
		$('.box-btn').click(function() {
			var e = $(this);
			//var p = b.next('a');
			// Control functionality
			switch(e.attr('title').toLowerCase()) {
				case 'toggle':
					widgetToggle(e);
					break;

				case 'close':
					widgetClose(e);
					break;
			}
		});
	}

	// Toggle button widget
	function widgetToggle(e) {
		// Make sure the bottom of the box has rounded corners
		e.parent().toggleClass("round-all");
		e.parent().toggleClass("round-top");

		// replace plus for minus icon or the other way around
		if(e.html() == "<i class=\"glyphicon glyphicon-plus\"></i>") {
			e.html("<i class=\"glyphicon glyphicon-minus\"></i>");
		} else {
			e.html("<i class=\"glyphicon glyphicon-plus\"></i>");
		}

		// close or open box
		e.parent().next(".box-container-toggle").toggleClass("box-container-closed");

		// store closed boxes in cookie
		var closedBoxes = [];
		var i = 0;
		$(".box-container-closed").each(function()
		{
				closedBoxes[i] = $(this).parent(".box").attr("id");
				i++;
		});
		$.cookie(closedBoxesCookiePrefix + $("body").attr("id"), closedBoxes, { expires: cookieExpiration });

		//Prevent the browser jump to the link anchor
		return false;

	}

	// Close button widget with dialog
	function widgetClose(e) {
		// get box element
		var box = e.parent().parent();

		// prompt user to confirm
		bootbox.confirm("确定删除吗?", function(confirmed) {
				if(confirmed){
					// remove box
					box.remove();
		
					// store removal in cookie
					$.cookie(deletedBoxesCookiePrefix + $("body").attr("id") + "_" + box.attr('id'), "yes", { expires: cookieExpiration });
				}
			});
	}

	$('#box-close-modal .btn-success').click(function(e) {
		   // e is the element that triggered the event
		   console.log(e.target); // outputs an Object that you can then explore with Firebug/developer tool.
		   // for example e.target.firstChild.wholeText returns the text of the button
		});

	// Modify button widget
	function widgetConfig(w, p) {
		$("#dialog-config-widget").dialog({
			resizable: false,
			modal: true,
			width: 500,
			buttons: {
				"Save changes": function(e, ui) {
					/* code the functionality here, could store in a cookie */
					$(this).dialog("close");
				},
				Cancel: function() {
					$(this).dialog("close");
				}
			}
		});
	}$('#tab').tab('show');

	// set portlet comtrols
	setControls();

	// Portlets (boxes)
    $(".column").sortable({
        connectWith: '.column',
		iframeFix: false,
		items:'div.box',
		opacity:0.8,
		helper:'original',
		revert:true,
		forceHelperSize:true,
		placeholder: 'box-placeholder round-all',
		forcePlaceholderSize:true,
		tolerance:'pointer'
    });

	// Store portlet update (move) in cookie
    $(".column").bind('sortupdate', function() {
        $('.column').each(function() {
            $.cookie(boxPositionCookiePrefix + $("body").attr("id") + ($(this).attr('id')), $(this).sortable('toArray'), { expires: cookieExpiration });
        });
    });

	// Portlets | INIT | check for closed portlet cookie
	var ckie = $.cookie(closedBoxesCookiePrefix+$("body").attr("id"));
	if (ckie && ckie != '')	{
		// get cookie and split in array
		var list = ckie.split(',');

		// loop over boxes in cookie and do actions
		for (var x = 0; x < list.length; x++) {
		 	var box = $("#"+list[x]);
			// close box
			box.find(".box-container-toggle").toggleClass("box-container-closed");
			// make closed box round
			box.find(".box-header").toggleClass("round-top").toggleClass("round-all");
			// find toggle button and change icon
			box.find('a[title="toggle"]').html("<i class=\"glyphicon glyphicon-plus\"></i>");
		}
	}


	// funtion to get all cookies
	function getCookiesArray() {
	    var cookies = { };

		if (document.cookie && document.cookie != '') {
	        var split = document.cookie.split(';');
        	for (var i = 0; i < split.length; i++) {
	            var name_value = split[i].split("=");
	            name_value[0] = name_value[0].replace(/^ /, '');
	            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
	        }
	    }

	    return cookies;
	}

	// function to delete all cookies
	function deleteCookies() {
		var cookies = getCookiesArray();
		for(var name in cookies) {
		  $.cookie(name, null);
		}
	}
});




/* portlets.html specific script */
$(document).ready(function(){
	if($("body").attr("id") == "portlets") {
		var boxHeight = $("#box-4").find('.box-content').height();
		$('.box-content').height(boxHeight);

	}
});
注意一下那个关闭portlet的js,原来的点了cancle也还是会remove掉,我改了下。

还有icon,bootstrap2和3的icon引用不太一样。需要改。就是那个<i class="xxx" ></i>


后台的话,这就看每个项目的需求了。

我也懒得放具体代码了。。。我也是个小菜啊- -

也就是,点第二个页面保存的时候,把页面的组件的id全部按顺序获取到,然后按列给分配好x,y坐标,存到数据库里。

获取页面组件id,在刚刚第二个页面的js中已经有了。如下:

function getPosition(){
		var positionSort;
		var widgetNum = new Array(3);
		var columnNum = 0;
		$('.column').each(function() {
			var widgetSum = 0;
			$("div.box",this).each(function(){
				positionSort += $(this).find("input[name='widgetId']").val() + ",";
				widgetSum++;
			});
			positionSort += "|";
			widgetNum[columnNum] = widgetSum;
			columnNum++;
        });

这都获取到了,后台更新数据库还不简单。

	@RequestMapping("updatePosition")
	protected String updatePosition(HttpServletRequest request, PageSearch page) {
		String positionSort = request.getParameter("positionSort");
		//每列的组件数量,为了给数组初始化长度
		int widgetNum1 = Integer.parseInt(request.getParameter("widgetNum1"));
		int widgetNum2 = Integer.parseInt(request.getParameter("widgetNum2"));
		int widgetNum3 = Integer.parseInt(request.getParameter("widgetNum3"));
		int[] widgetNumArray = new int[3];
		widgetNumArray[0] = widgetNum1;
		widgetNumArray[1] = widgetNum2;
		widgetNumArray[2] = widgetNum3;
		positionSort = positionSort.substring(9);
		Long userId =  (Long) request.getSession().getAttribute(SecurityConstants.USER_ID);
		widgetProfileManager.deleteByUserId(userId);
		//获取单独的widgetId,分割字符串 
		int positionX;
		int positionY;
		String[] pStrings = new String[3];
		pStrings = positionSort.split("\\|");
		for(int i=0; i<pStrings.length; i++){
			String[] widgetIds = new String[widgetNumArray[i]];
			widgetIds = pStrings[i].split(",");
			for(int j=0; j<widgetIds.length; j++){
				// 按顺序分派坐标
				positionX = j+1;
				positionY = i+1;
				if(widgetNumArray[i] != 0){
					widgetProfileManager.insertSinglePosition(widgetIds[j],userId,positionX,positionY);
				}
				
			}
		}
		return  "redirect:../widget/config" + getMessage("保存成功", request) +"&ajax=1" ;
	}

- -我代码写的很累赘啊。。。。不要介意。。。。

从页面获取的id是这样子的:1,43|21,63,42|64|

在页面写了console.log,可以用控制台直接看。比较方便。。

这个数据在后台处理一下就行。

中间加了个判断,如果获取到的数据,第一列没有值,就不执行插入数据。

widgetNumArray就是每列有几个组件的数组。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值