摘要:最近项目中用到了jquery,ajax,由于很长时间没用了,所以这次做花了很多时间,现在记录一下,方便以后回忆:
一:js文件:
<script type="text/javascript">
// 进出港显示字段权限分配
function jingchugang(){
var tableName = $('input:radio:checked').val();
$.ajax({
type:"POST",
url:"<s:url value='/u/showFieldSet'/>",
data:"tableName="+tableName,
dataType:"json",
success:function(dataMap){
var fieldList = dataMap.fieldList;
if(fieldList != null && fieldList.length > 0){
//var start = "<select id='selectL' name='selectL' multiple='multiple'>";
//var str = '';
for(var i = 0; i< fieldList.length; i++){
//str += "<tr><td><input type='checkbox' id='fieldName' name='fieldName'/>"+fieldList[i].fieldName+"<td></tr>";
//str += "<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>";
$("<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>").appendTo("#selectL");
}
//var end = "</select>";
//$("str").appendTo("#selectL");
}
},
});
}
</script>
二:jsp文件:
<tr class="even">
<td>
<div class="select_side">
<p>待选区</p>
<select id="selectL" name="selectL" multiple="multiple"></select>
</div>
<div class="select_opt">
<p id="toright" title="添加">></p>
<p id="toleft" title="移除"><</p>
</div>
<div class="select_side">
<p>已选区</p>
<select id="selectR" name="selectR" multiple="multiple">
</select>
</div>
<div class="sub_btn"><input type="button" id="sub" value="getValue" /></div>
</td>
</tr>
三:最后我把这个页面附上:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../../common/include_tag.jsp"%>
<%@ include file="../../common/page_var.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%=pageTitle%></title>
<link href="<s:url value='/images/favicon.ico'/>" rel="shortcut icon"
type="image/x-icon" />
<%@ include file="../../common/page_head.jsp"%>
<script type="text/javascript">
$(function() {
pilicat.title2div('title2div');
pilicat.keysubmit('form1', 'submit', true);
});
</script>
<script type="text/javascript">
$(function(){
var leftSel = $("#selectL");
var rightSel = $("#selectR");
$("#toright").bind("click",function(){
leftSel.find("option:selected").each(function(){
$(this).remove().appendTo(rightSel);
});
});
$("#toleft").bind("click",function(){
rightSel.find("option:selected").each(function(){
$(this).remove().appendTo(leftSel);
});
});
leftSel.dblclick(function(){
$(this).find("option:selected").each(function(){
$(this).remove().appendTo(rightSel);
});
});
rightSel.dblclick(function(){
$(this).find("option:selected").each(function(){
$(this).remove().appendTo(leftSel);
});
});
$("#sub").click(function(){
var showFields = [];
rightSel.find("option").each(function(){
showFields.push(this.value);
});
showFields = showFields.join(",");
if(showFields == ""){
alert("没有选择任何项!");
}else{
alert(showFields);
}
});
});
</script>
<script type="text/javascript">
// 进出港显示字段权限分配
function jingchugang(){
var tableName = $('input:radio:checked').val();
$.ajax({
type:"POST",
url:"<s:url value='/u/showFieldSet'/>",
data:"tableName="+tableName,
dataType:"json",
success:function(dataMap){
var fieldList = dataMap.fieldList;
if(fieldList != null && fieldList.length > 0){
//var start = "<select id='selectL' name='selectL' multiple='multiple'>";
//var str = '';
for(var i = 0; i< fieldList.length; i++){
//str += "<tr><td><input type='checkbox' id='fieldName' name='fieldName'/>"+fieldList[i].fieldName+"<td></tr>";
//str += "<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>";
$("<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>").appendTo("#selectL");
}
//var end = "</select>";
//$("str").appendTo("#selectL");
}
},
});
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#form1').ajaxForm({
dataType : 'json',
beforeSubmit : checkForm,
success : afterPost
});
});
function checkForm(formData, jqForm, options) {
alert(formData);
}
function afterPost(responseText, statusText, xhr, $form) {
if (responseText.resultStatus == true) {
parent.$.jBox.tip("保存成功,请刷新查看结果", "success", {
timeout : 2000
});
parent.$.jBox.close(true);
} else {
$.jBox.error("保存失败", "失败信息");
}
}
function submitForm() {
getSelectAll();
}
</script>
<style type="text/css">
.update {
margin: 0 auto;
padding: 0;
width: 98%;
}
.update td {
margin: 0;
height: 30px;
padding: 5px;
}
.update .name {
text-align: right;
}
.title_div {
width: 350px;
}
body {
background: url("<s:url value='/images/gray_bg.png'/>") 0 0 repeat-y
#F6F6F6;
}
</style>
<style type="text/css">
.select_side {
float: left;
width: 200px
}
select {
width: 180px;
height: 120px
}
.select_opt {
float: left;
width: 40px;
height: 100%;
margin-top: 36px
}
.select_opt p {
width: 26px;
height: 26px;
margin-top: 6px;
background: url("<s:url value='/images/arr.gif'/>") no-repeat;
cursor: pointer;
text-indent: -999em
}
.select_opt p#toright {
background-position: 2px 0
}
.select_opt p#toleft {
background-position: 2px -22px
}
</style>
</head>
<body>
<div class="rounded table">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="box_top">
<tbody>
<tr>
<td class="title"></td>
<td></td>
</tr>
</tbody>
</table>
<div class="error rounded top_error hide">
<ol></ol>
<span></span>
</div>
<form:form id="form1" commandName="roleInfo" action="${pageContext.request.contextPath}/u/saveRoleShowField" method="post">
<table class="update" cellpadding="0" cellspacing="1" border="0">
<tbody>
<tr class="even">
<td>角色名称: ${roleInfo.roleName }
<input type="hidden" name="id" value="${roleInfo.id}" />
<input type="hidden" name="showFields" value="${showFields}" />
</td>
</tr>
<tr class="even">
<td>航班类型:
<c:forEach items="${tableNameList}" var="tableName">
<c:if test="${tableName == 'TB_CMS_FLGTINFO_D'}">
<input type="radio" class="radio" name="tableName" id="TB_CMS_FLGTINFO_D" value="${tableName }" onclick="jingchugang(${tableName});" />出港列表
</c:if>
<c:if test="${tableName == 'TB_CMS_FLGTINFO_A'}">
<input type="radio" class="radio" name="tableName" id="TB_CMS_FLGTINFO_A" value="${tableName }" onclick="jingchugang(${tableName});"/>进港列表
</c:if>
</c:forEach>
</td>
</tr>
<tr class="even">
<td>赋予的显示字段列表:</td>
</tr>
<!-- <tr class="even">
<td>
<div id="menuTree"></div>
</td>
</tr> -->
<tr class="even">
<td>
<div class="select_side">
<p>待选区</p>
<select id="selectL" name="selectL" multiple="multiple"></select>
</div>
<div class="select_opt">
<p id="toright" title="添加">></p>
<p id="toleft" title="移除"><</p>
</div>
<div class="select_side">
<p>已选区</p>
<select id="selectR" name="selectR" multiple="multiple">
</select>
</div>
<div class="sub_btn"><input type="button" id="sub" value="getValue" /></div>
</td>
</tr>
<%-- <tr class="even">
<td>赋予的显示字段列表:</td>
</tr>
<tr class="even">
<td>
<form:checkboxes items="${roleShowEntities }" path="showFields" itemLabel="fieldName" itemValue="id" delimiter=""/>
</td>
</tr> --%>
</tbody>
</table>
<table class="table top_line">
<tbody>
<tr>
<td align="center" height="60"><a id="submit" class="submit"
href="javascript:;" onclick="submitForm();">保存</a></td>
</tr>
</tbody>
</table>
</form:form>
</div>
</body>
</html>
分享到:
相关推荐
基于jquery的用<select>实现二级动态联动菜单,里面用到jquer+ajax+json解析方面知识,通过无刷新去后台值实现的,可用性非常好,欢迎大家下载学习。
<p>下拉选择框:jQuery Select2</p> <p>树结构控件:jQuery zTree、jQuery wdtree</p> <p>页面布局:jquery.layout.js 1.4.4</p> <p>图表插件:echarts、highcharts</p> <p>日期控件: My97DatePicker</p>
Select2Buttons是一个能将网页中的select选择框转换... <option>One</option> <option>Two</option> <option>Three</option> </select> [removed] $('select[name=simple-select]').select2Buttons(); [removed]
飞飞Asp乐园Asp Sql存储过程版无限级分类<br>开发说明:<br>本程序基于Asp环境开发<br>使用的数据库:SQLServer2000(存储过程)<br>js框架:Jquery/ajax<br>数据库名称:archives<br><br>***能说明:<br>基于AJAX树状...
7) $('div>p') 与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素<br> <hr> 8) $('div+p') 该选择器用得很少表示div相邻下一个选择器,(必须是相同层次元素并且紧挨的)...
技术总结:<br> 前端:html css js jQuery bootstrap 后台:<br> 控制器:springMVC <br> Dependence Injection:spring<br> ORM:mybatis<br> 数据库:mysql 首页地址 http://localhost:8080/index.do 账号:可...
"><span>fx(方心):</span></b><span><i class="iconfont icon-CombinedShapeCopy"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div> <div 25px"><b 10px;"><span>fg(方钩):</span></b>...
<br>Safari 2 3575ms 475ms 753% <br>Opera 9.1 3196ms 326ms 980% <br>Average improvement: 867% <br><br>下表为jQuery1.1.3与常用的一些JS库选择器的对比:<br>Browser Prototype jQuery Mootools Ext Dojo <br>...
<option value="北京">北京</option> <option value="上海">上海</option> <option value="南京">南京</option> <option value="杭州">杭州</option> <option value="深圳">深圳</option> </...
<option value="center">center</option> <option value="explode">explode</option> <option value="top">beam</option> </select> </label> <label for="animation-out"> animation in <select id=...
<h2>系统环境</h2> <p>系统环境:Windows</p> ... <p>系统采用技术: Servlet+Jsp+Jdbc+dbutils+EasyUI+jQuery+Ajax+面向接口编程</p>漫画推荐系统,模板改的很垃圾,里面很多东西没有弄完不过看着改改还能看
目前可以比较字符串和数值型)、AjaxValidator(通过ajax到服务器上做数据校验)、RegexValidator(提供可扩展的正则表达式库) 、FunctionValidator (允许用户利用外部函数进行校验)<br>InputValidator:<br>值的...
jquery实现多级下拉菜单源码 <ul id="keleyi-com-nav"> <li class="site-name"><a href="http://keleyi.com"> </a></li> <li class="yahoo"><a href="http://keleyi.com">导航菜单</a> <ul> <li><a href=...
<select id="SelProvince" class="select"></select> <select id="SelCity" class="select"></select> <select id="SelArea" class="select"></select> <select id="SelXian" class="select"></select> </div> ...
jQuery-ajax-用户名异步请求,转载请注明出处:https://blog.csdn.net/qq_40374604(如有需要欢迎留言,我一定会尽快解答)
vs2013 利用Ajax+Jquery实现异步进度条效果
<div id="level"><span>Level:</span><span class="level">1</span></div> <div id="score"><span>Score:</span><span class="score">0</span></div> <button id="pause">暂停</button> <p>控制:</p> <p>← 向...
前后台传送list及map,包含了传json时所需要的包及相关内容
基于jquery的用<select>实现二级动态联动菜单,里面用到jquer+ajax+json解析方面知识,通过无刷新去后台值实现的,可用性非常好,欢迎大家下载学习。
<option>学生</option><option>一年</option><option>二年</option><option>三年</option><option>三年到五年</option><option>五年到十年</option><option>十年以上</option> </select> </div> ...