JSP实战

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #数据库 #ViewUI

JSP实战专栏收录该内容

1 篇文章

订阅专栏

1、Radio 改变值，后面的内容跟随变化

<div class="control-group">
        <label class="control-label">形式</label>
        <div class="controls">
				<input type="radio" name="informWay" value="1" <c:if test="${dto.informWay eq 1}">checked</c:if> class="required" onclick="clickInformWay();"/>X广播&nbsp;&nbsp;
				<input type="radio" name="informWay" value="2" <c:if test="${dto.informWay eq 2}">checked</c:if> class="required" onclick="clickInformWay();"/>Y广播
        </div>
    </div>

//形式
function clickInformWay(){
	var informWay = $('input[name=informWay]:checked').val();
	//X
	if(informWay==1){
				
	}
	//Y
	else{

	}
}
$(function(){
	//形式默认值
	var informWay = $('input[name="informWay"]:checked').val();
	if(informWay==undefined){
		$("input[name='informWay'][value=1]").attr("checked",true);
	}
	clickInformWay();
});

2、新增修改界面，select下拉选择项来源读取数据库数据

<div id="dlg" class="easyui-dialog" style="width: 600px; height: 300px; padding: 10px 20px" closed="true" buttons="#dlg-buttons">
	<form id="fm" method="post" novalidate>
	<table class="edit">
		<tr><th width="35%">图文消息的标题：</th><td style="padding-left: 10px;" width="65%"><input name="title" id="title" class="easyui-textbox" required="true" size="40" /></td></tr>
		<tr><th>图文消息页面的内容：</th><td style="padding-left: 10px;">
		<textarea rows="5" cols="41" name="content" id="content"></textarea></td></tr>
		<tr><th>图文消息缩略图的唯一标识：</th><td style="padding-left: 10px;">
			<select id="thumb_media_id" name="thumb_media_id"></select><label style="padding-left: 5px"><font>（说明：来源“素材管理”）</font></label>
		</td></tr>
	</table>        
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveEdit()" style="width: 90px">提交</a> 
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width: 90px">取消</a>
	</div>
	</form>
</div>

function findThumbMediaIdList() {  
	var obj = $("#thumb_media_id");  
	$.ajax({  
		type: "POST",  
		dataType: "json",  
		url: "${ctx}/admin/wxMediaNews/findThumbMediaIdList",
		success: function (data) {  
			obj.empty();  
			$.each(data, function (i, n) {  
				$("<option value=" + n.media_id + ">" + n.title + "</option>").appendTo(obj);  
			});  
		}  
	});  
}

public void findThumbMediaIdList(){
	List<WxMaterial> list = WxMaterial.dao.findAll();
	renderJson(list);
}

其它关联代码：

$(function(){
	findThumbMediaIdList();
});
保存：
var thumb_media_id = $('select[name="thumb_media_id"]').val();
if(thumb_media_id==null){
	alert('图文消息缩略图的唯一标识必选!');
	return;
}

4、多选

JSP1：

<c:choose>
	<c:when test="${platform eq 0}">
		<div class="control-group" flag="package">
			<label class="control-label"><h4>Android</h4></label>
		</div>
		<div class="control-group" flag="package">
			<label class="control-label">Android版本</label>
			<div class="controls" id="versionContainerId">
				
				<table><tr><td>
							<select name="wayType" id="wayType" onchange="waytypechange();">
								<option value="1" <c:if test="${dto.wayType eq '1'}">selected</c:if>>全部版本</option>
								<option value="2" <c:if test="${dto.wayType eq '2'}">selected</c:if>>精确版本</option>
								<option value="3" <c:if test="${dto.wayType eq '3'}">selected</c:if>>范围版本</option>
							</select>
						</td><td>
							<div id="versionContainerId_exact">
								<input type="hidden" name="exactVers" id="exactVers" value="${dto.exactVers }">
								<select id ="exact_vers" multiple="multiple" name="exact_vers" size="5">
									<c:forEach items="${versions }" var="ver" varStatus="verStat">
										<option value="${ver.platVer }" 
											<c:forEach items="${dto.amsAppPlatformVersions }" var="platformVersion">
												<c:if test="${ver.platVer eq platformVersion.platVer }"> selected="selected" </c:if>
											</c:forEach>                                     
										>${ver.platVer }</option>
									</c:forEach>
								</select>
							</div>
						</td><td>
							<div id="versionContainerId_range">
								<table><tr><td>
									<select id="rangeVer" name="rangeVer">
										<c:forEach items="${versions }" var="ver" varStatus="verStat">
											<option value="${ver.platVer }" <c:if test="${ver.platVer eq dto.rangeVer}">selected</c:if> >${ver.platVer }</option>
										</c:forEach>
									</select>
								</td><td>
									<select id="rangeUpdo" name="rangeUpdo">
										<option value="1" <c:if test="${dto.rangeUpdo eq '1'}">selected</c:if> >以上(含)</option>
										<option value="2" <c:if test="${dto.rangeUpdo eq '2'}">selected</c:if> >以下(不含)</option>
									</select>
								</td></tr></table>
							</div>
						</td>
						<td><label for="versionContainerId" class="error" style="display: none;">必选字段</label></td>
						</tr>
				</table>
			</div>
		</div>
	</c:when>
	
	<c:otherwise>
		
	</c:otherwise>
</c:choose>

JS1：

$("#exact_vers").multiselect({
	noneSelectedText: "==请选择==",
	checkAllText: "全选",
	uncheckAllText: '全不选',
	selectedList:4
}); 

$('#versionContainerId_exact').hide();
$('#versionContainerId_range').hide();
waytypechange();

JS2：

function waytypechange(){
	var waytype = $('#wayType').val();
	if(waytype=='2'){
		$('#versionContainerId_exact').show();
		$('#versionContainerId_range').hide();
		$(".ui-multiselect").show();
	}else if(waytype=='3'){
		$('#versionContainerId_exact').hide();
		$('#versionContainerId_range').show();
		$(".ui-multiselect").hide();
	}else{
		$('#versionContainerId_exact').hide();
		$('#versionContainerId_range').hide();
		$(".ui-multiselect").hide();
	}
	
}

导入JS：

<!-- multiselect  -->
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/assets/style.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/ui/jquery-ui.css" />

<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/assets/prettify.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/jquery.multiselect.js"></script>