一种选择界面

最新推荐文章于 2021-07-31 06:30:04 发布

Tomsheng321

最新推荐文章于 2021-07-31 06:30:04 发布

阅读量494

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Tomsheng321/article/details/50202367

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@page import="com.bhl.application.core.constant.ApplicationConst"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>设置默认排序</title>

<%@ include file="/css&js.jsp" %>
<script type="text/javascript">
var leftRow;
var rightRow;
//选中tr
function changeTr(index,flag){
var table = document.getElementById(flag+"Table");
var rows = table.rows;
for(var i=0;i<rows.length;i++){
if(rows[i].id == (flag+index)){
if(flag == 'left'){
leftRow = rows[i];
}else{
rightRow = rows[i];
}
rows[i].style.backgroundColor = '#316AC5';
rows[i].style.color = 'white';
}else{
rows[i].style.backgroundColor = '';
rows[i].style.color = 'black';
}
}
}

//右移
function trToRight(){
$("#selOrderby").focus();
/**判断左边是否选中*/
if(leftRow==null){
$.messager.alert('提示信息','请在左边选中一行后进行移动!','info');
return false;
}
/**判断右边是否小于四个*/
if(document.getElementById("rightTable").rows.length>=4 ){
$.messager.alert('提示信息','对不起，排序列最多可选择4个!','info');
return false;
}
/**移动*/
var newId = leftRow.id.substring(4);
var trStr = '<tr id="right'+newId+'" οnclick="changeTr(\''+newId+'\',\'right\');">';
trStr += '<td style="padding-left:13px;cursor:hand;">'+leftRow.innerText;
//升序、降序selOrderby
if($("#selOrderby").val()=='asc'){
trStr += '(升序)';
}else{
trStr += '(降序)';
}
trStr += '<input type="hidden" id="'+newId+'orderBy" value="'+$("#selOrderby").val()+'"/>'
trStr += '</td></tr>';
$('#rightTable').append(trStr);
$('#'+leftRow.id).remove();
leftRow=null;
}

//左移
function trToLeft(){
/**判断右边是否选中*/
$("#selOrderby").focus();
if(rightRow==null){
$.messager.alert('提示信息','请在右边选中一行再进行移动!','info');
return false;
}
var newId = rightRow.id.substring(5);
var trStr = '<tr id="left'+newId+'" οnclick="changeTr(\''+newId+'\',\'left\');">';
var text = $.trim(rightRow.innerText+"");
trStr += '<td style="padding-left:13px;cursor:hand;">'+text.substring(0,text.length-4);
trStr += '</td></tr>';
$('#leftTable').append(trStr);
$('#'+rightRow.id).remove();
rightRow=null;
}
//全部移到左边
function trAllLeft(){
$("#selOrderby").focus();
var rows = document.getElementById("rightTable").rows;
for(var i=0;i<rows.length;i++){
var newId = rows[i].id.substring(5);
var trStr = '<tr id="left'+newId+'" οnclick="changeTr(\''+newId+'\',\'left\');">';
var thisText = $.trim(rows[i].innerText);
trStr += '<td style="padding-left:13px;cursor:hand;">'+thisText.substring(0,thisText.length-4);
trStr += '</td></tr>';
$('#leftTable').append(trStr);
}
$("#rightTable tr").remove();
rightRow=null;
}

//上移
function trUp() {
$("#selOrderby").focus();
if(rightRow!=null){
var _row = rightRow;
//如果不是第一行，则与上一行交换顺序
if(_row.previousSibling){
swapNode(_row,_row.previousSibling);
}else {
$.messager.alert('提示信息','对不起，您的位置已在第一行!','error');
return false;
}
}else {
$.messager.alert('提示信息','请在右边选中一行再进行移动!','info');
return false;
}
}
//下移
function trDown() {
$("#selOrderby").focus();
if(rightRow!=null){
var _row = rightRow;
//如果不是第一行，则与上一行交换顺序
if(_row.nextSibling){
swapNode(_row,_row.nextSibling);
}else {
$.messager.alert('提示信息','对不起，您的位置已在最后一行!','error');
return false;
}
}else {
$.messager.alert('提示信息','请在右边选中一行再进行移动!','info');
return false;
}
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
//获取父结点
var _parent=node1.parentNode;
//获取两个结点的相对位置
var _t1=node1.nextSibling;
var _t2=node2.nextSibling;
//将node2插入到原来node1的位置
if(_t1)_parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
//将node1插入到原来node2的位置
if(_t2)_parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}

//保存
function submitButton(){
disabledButton('icon-save',true);
var submitUrl = "volTable!setDefaultOrder.action?";
var rows = document.getElementById("rightTable").rows;
for(var i=0;i<rows.length;i++){
var colId = rows[i].id.substring(5);
submitUrl += "righList["+i+"].colId="+colId+"&";
submitUrl += "righList["+i+"].orderByVal="+$("#"+colId+"orderBy").val()+"&";
submitUrl += "righList["+i+"].orderNo="+i+"&";
}
submitUrl += "dbId="+$("#dbId").val()+"&"+"rondom="+Math.random();
$.ajax({
url : submitUrl,
type : "post",
success : function(data){
try{
if(data == '<%=ApplicationConst.SUCCESS_MESSAGE%>'){
$.messager.alert('提示信息','您的信息保存成功!','info',function(){
disabledButton('icon-save',false);
closeBhlDialogAtParent();
});
}else{
$.messager.alert('提示信息','对不起，您的操作失败!','error',function(){
disabledButton('icon-save',false);
});
}
}catch(e){alert(e.message);disabledButton('icon-save',false);}
}
});
}

</script>

</head>

<body class="easyui-layout" >
<div region="center" style="overflow:hidden;">
<div id="headDiv" style="width:100%;">
<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0" style="border: 1px #99bbe8 solid;">
<tr>
<td bgcolor="#FFFFFF" align="center" class="tableTd" >
<table id="listTable" width="100%" border="0" align="center"
cellpadding="0" cellspacing="1" class="TableBorder" style="">
<tr class="list-tr1">
<td width="100" align="left" style="padding-left:20px;">当前设置的类型：</td>
<td align="left" style="padding-left:10px;">
<s:property value="dbChin"/>
<s:hidden name="dbId" id="dbId" ></s:hidden>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="mainDiv" style="margin-top:8px;">
<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0" style="border: 1px solid #99bbe8;">
<tr>
<td bgcolor="#FFFFFF" align="center" class="tableTd" >
<table id="listTable1" width="100%" border="0" align="center"
cellpadding="0" cellspacing="1">
<tr bgcolor="#e6effe">
<td align="center" height="25">
<span style="font-weight: bold;color:#253b86;">可选列</span>
</td><td></td>
<td colspan="2" align="center">
<span style="font-weight: bold;color:#253b86;">排序列（最多4个）</span>
</td>
</tr>
<tr class="list-tr1">
<td align="center">
<div style=" overflow-y:scroll;width:205px;height:288px;border: 1px #99bbe8 solid;background: white;font-size: 13px;font-variant: normal;font-style: normal;" align="left">
<table id="leftTable" style="width:99%" class="TableBorder">
<s:iterator value="leftList" id="role" status="roleIndex">
<tr id='left<s:property value="%{#role.colId}"/>' οnclick="changeTr('<s:property value="%{#role.colId}"/>','left');">
<td style="padding-left:13px;cursor:hand;">
<s:property value="%{#role.colCname}"/>
</td>
</tr>
</s:iterator>
</table>
</div>
</td>
<td align="center">
<br/><br/>
<select id="selOrderby" name="selOrderby" >
<option value="asc">升序</option>
<option value="desc">降序</option>
</select>
<br/><br/><br/>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-toRight" οnclick="trToRight()"></a>
<br/><br/><br/>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-toLeft" οnclick="trToLeft()"></a>
<br/><br/><br/>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-toLeftAll" οnclick="trAllLeft()"></a>
</td>
<td align="center">
<div style=" overflow-y:scroll;width:205px;height:288px;border: 1px #99bbe8 solid;background: white;font-size: 13px;font-variant: normal;font-style: normal;" align="left">
<table id="rightTable" style="width:99%" class="TableBorder">
<s:iterator value="righList" id="role" status="roleIndex">
<tr id='right<s:property value="%{#role.colId}"/>' οnclick="changeTr('<s:property value="%{#role.colId}"/>','right');" >
<td style="padding-left:13px;cursor:hand;">
<s:property value="%{#role.colCname}"/>(<s:if test="#role.orderByVal=='asc'">升序</s:if><s:else>降序</s:else>)
<s:hidden id="%{#role.colId}orderBy" value="%{#role.orderByVal}" ></s:hidden>
</td>
</tr>
</s:iterator>
</table>
</div>
</td>
<td align="center">
<br/><br/><br/>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-toUp" οnclick="trUp()"></a>
<br/><br/><br/>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-toDown" οnclick="trDown()"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

</div>
<div region="south" style="overflow:hidden;text-align:center;padding:5px 0;">
<a href="javascript:void(0)" id="mb1" class="easyui-linkbutton"
iconCls="icon-save" οnclick="submitButton();">保存</a>
<a href="javascript:void(0)" id="mb2" class="easyui-linkbutton"
iconCls="icon-cancel" οnclick="closeBhlDialogAtParent();">关闭</a>
</div>
</body>

</html>

Tomsheng321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一种选择界面

String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> 设置默认排序 var leftRow;var ri
复制链接

扫一扫

专栏目录