<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<link href="sys/css/sort/bootstrap.min.css" th:href="@{/static/sys/css/sort/bootstrap.min.css}" rel="stylesheet"/>
<script th:include="sys/common/metaJS" th:remove="tag"></script> 
</head>
<body>
	<div class="container" style="margin-top: 10px;">
			<div class="form-group">
			     <div class="col-xs-10">
					<select id="typeList" name="typeList" class="form-control" size="15" multiple>
							<option th:each="li:${list}" th:value="${li.id}">[[${li.name}]]</option>
					</select>
					<!--内容表格 END-->
				</div>
				<div class="col-xs-2" style="padding-top:35px;">
					<div style="padding:4px;">
						<button type="button" class="btn btn-default" onClick="javascript:moveItemUpToTop();"><span class="glyphicon glyphicon-triangle-top"></span></button>
					</div>
					<div style="padding:4px;">
						<button type="button" class="btn btn-default" onClick="javascript:moveItemUp();"><span class="glyphicon glyphicon-menu-up"></span></button>
					</div>
					<div style="padding:4px;">
	        			<button type='button' class='btn btn-default' onClick="javascript:moveItemDown();"><span class="glyphicon glyphicon-menu-down"></span></button>
					</div>
					<div style="padding:4px;">
	        			<button type='button' class='btn btn-default' onClick="javascript:moveItemDownToBottom();"><span class="glyphicon glyphicon-triangle-bottom"></span></button>
					</div>
				</div>
			</div>
			<div class="form-group text-center dialog-panel-footer">
				<button type="button" class="btn btn-primary" onClick="javascript:saveSort();"><i class="icon icon-check"></i> 提 交</button>&nbsp;
	        	<button type="button" class='btn btn-default' onClick="javascript:closeWindow();"><i class="icon icon-remove"></i> 取 消</button>
			</div>
	</div>
	
<script type="text/javascript">
	var saveFlag = "0";
	
	/**
	 * 保存排序
	 */
	function saveSort(){
		var objList = $("#typeList option");
		var selectIds=[];
		for(var i = 0 ; i < objList.length ; i++){
			selectIds.push(objList[i].value);
		}
		var url="[[${sysUrl}]]/sys/sort/sequenceSort";
		 var params ={
		            ids : selectIds
		        };
		$.post(url,params,function(data){
			if(data.meta.success){
				parent.layer.msg("操作成功",{icon:1});
				closeWindow();
			}else{
				parent.layer.msg(data.meta.message,{icon:11});
			}
		});
		
	}

	/**
	 * 向上移动到最顶端按钮事件
	 */
	function moveItemUpToTop(){
		var objList = $("#typeList option:checked");
		for(var i = objList.length - 1 ; i >= 0 ; i--){
			var obj = objList[i];
			while($(obj).prev().length > 0){
				$(obj).prev().before($(obj));
			}
		}
	}

	/**
	 * 向上移动按钮事件
	 */
	function moveItemUp(){
		var objList = $("#typeList option:checked");
		for(var i = 0 ; i < objList.length ; i++){
			var obj = objList[i];
			if($(obj).prev().length == 0){
				return;
			}
			$(obj).prev().before($(obj));
		}
	}
	
	/**
	 * 向下移动按钮事件
	 */
	function moveItemDown(){
		var objList = $("#typeList option:checked");
		for(var i = objList.length-1 ; i >= 0 ; i--){
			var obj = objList[i];
			if($(obj).next().length == 0){
				return;
			}
			$(obj).next().after($(obj));
		}
	}
	
	/**
	 * 向下移动到最底端按钮事件
	 */
	function moveItemDownToBottom(){
		var objList = $("#typeList option:checked");
		for(var i = objList.length - 1 ; i >= 0 ; i--){
			var obj = objList[i];
			while($(obj).next().length > 0){
				$(obj).next().after($(obj));
			}
		}
	}
	
	/**
	 * 关闭
	 */
	function closeWindow(){
		layer.close();
	}
</script>
</body>
</html>