jeesite实战(四十)——js动态实现select、input等标签的只读以及赋值

系列文章目录

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本系列文章主要记录项目过程中重点的项目技术

---

一、目的

因为业务的需求，我需要根据不同的情况指定标签状态设置为只读和可编辑两种状态，这个时候就不能跟之前一样直接在html中添加readonly=true来实现了，需要通过js来动态设置，具体见下文描述。

---

二、实现过程

效果图

---

input标签

html中input标签代码

<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-1" title="">
								<span class="required ">*</span> ${text('培训主题')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-11">
								<#form:input path="trainingTopic" maxlength="200" class="form-control required"/>
							</div>
						</div>
					</div>
				</div>

js动态设置input标签为只读

注意ID的值与html中的path的值对应

$("#trainingTopic").attr("readonly","readonly");

js动态设置input标签的值

$("#trainingTopic").val(赋值内容);

---

select标签

html中select标签代码

<div class="col-xs-3">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required ">*</span> ${text('培训对象类型')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:select path="trainingObjectType" dictType="stm_training_object" class="form-control " />
							</div>
						</div>
					</div>

js动态设置select标签为只读

1.注意ID的值与html中的path的值对应
2.select标签不支持readonly属性，所以只能通过disabled来实现类似只读的效果

$("#trainingObjectType").attr("disabled",true);

js动态设置select标签的值

$('#trainingObjectType').select2('val',赋值内容); 	
$('#trainingObjectType').select2(); //刷新

---

listselect标签

html中listselect标签代码

<div class="col-xs-6">
	<div class="form-group">
		<label class="control-label col-sm-2" title="">
			<span class="required ">*</span> ${text('授课单位')}：<i class="fa icon-question hide"></i></label>
		<div class="col-sm-10">
			<#form:listselect id="teacherOfficeId" title="授课单位选择" path="teachingOfficeId" labelPath="teachingOfficeName" url="${ctx}/prep/trainingPreparation/teachingOfficeSelect"
				allowClear="true" checkbox="false" itemCode="id" itemName="teachingOfficeName" class="form-control required" />
		</div>
	</div>
</div>

js动态设置listselect标签为只读

1.设置只读的时候需要注意对象为KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id名称"+Name),且需要…("#id名称"+Button)

//设置对象选择器为只读
$("#teacherOfficeIdName").attr("readonly","readonly");
//设置对象选择器为只显示
$("#teacherOfficeIdName").attr("class","form-control disabled form-control required  isReset");
//设置搜索框为只读
$("#teacherOfficeIdButton").attr("class","btn btn-default disabled ");

js动态设置listselect标签的值

浏览器编译后的代码

注意对象的值与id值相关，如上图所示，分别时id+Name,id+Code，所以赋值的时候如下写法

//对象选择器
$("#teacherOfficeIdCode").val(trainingPlan.teachingOfficeId);
$("#teacherOfficeIdName").val(trainingPlan.teachingOfficeName);

---

到此，关于常见的标签通过js动态设置只读和赋值就完成了。

注意事项

select标签由于用了disable属性，所以导致最后提交form表单的时候，会导致拿不到对应的属性值，我们需要在提交到服务器之前去掉disable属性。如下图所示在form的提交函数中添加红色标记的代码，就可以解决这个问题了。

总结

至此，本文章结束