jeesite如何设置对象选择器的内容为只读

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

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

---

目的

写这篇文章的原因是，我想在编辑页面的时候，设置对象选择器的内容为只读

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、html代码

代码如下（示例）：

<% layout('/layouts/default.html', {title: '标签人员车辆中间表管理', libs: ['validate']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa icon-note"></i> ${text(trackerWorker.isNewRecord ? '新增标签人员车辆中间表' : '编辑标签人员车辆中间表')}
			</div>
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div>
		</div>
		<#form:form id="inputForm" model="${trackerWorker}" action="${ctx}/lbst/trackerWorker/save" method="post" class="form-horizontal">
			<div class="box-body">
				<div class="form-unit">${text('基本信息')}</div>
				<#form:hidden path="id"/>
				<div class="row">
				<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title=""> 
							<span class="required hide">*</span> ${text('人员选择')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:listselect id="trackerWorker" title="人员选择" path="bindingCode" labelPath="worker.name" 
									url="${ctx}/lbst/trackerWorker/workerSelect" allowClear="true" 
									checkbox="false"  itemCode="id" itemName="name"  class="form-control required" />
							</div>
						</div>
					</div>
						<div class="col-xs-6" >
						<div class="form-group">
							<label class="control-label col-sm-4" title=""> 
							<span class="required hide">*</span> ${text('标签选择')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:listselect id="tracker" title="标签选择"  path="trackerId" labelPath="tracker.trackerCode" 
								url="${ctx}/lbst/trackerWorker/trackerWorkerSelect"  allowClear="true"  checkbox="false"  itemCode="id"
									itemName="trackerCode" class="form-control required" />
							</div>
						</div>
					</div>
					
					
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="">
								<span class="required hide">*</span> ${text('备注信息')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10">
								<#form:textarea path="remarks" rows="4" maxlength="500" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="row">
					<div class="col-sm-offset-2 col-sm-10">
						<% if (hasPermi('lbst:trackerWorker:edit')){ %>
							<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
						<% } %>
						<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
					</div>
				</div>
			</div>
		</#form:form>
	</div>
</div>
<% } %>
<script>

主要html代码示例

<div class="box-title">
     <i class="fa icon-note"></i> 
     ${text(trackerWorker.isNewRecord ? '新增标签人员车辆中间表' : '编辑标签人员车辆中间表')}
</div>

<div class="col-xs-6" >
	<div class="form-group">
		<label class="control-label col-sm-4" title=""> 
		<span class="required hide">*</span> 
		       ${text('标签选择')}：
		<i class="fa icon-question hide"></i>
		</label>
		<div class="col-sm-8">
			<#form:listselect id="tracker" title="标签选择"  
			     path="trackerId" labelPath="tracker.trackerCode" 
				url="${ctx}/lbst/trackerWorker/trackerWorkerSelect"  allowClear="true"  
				checkbox="false"  itemCode="id"
				itemName="trackerCode" class="form-control required" />
		</div>
	</div>
</div>

二、JS代码实现

1.主要代码

主要代码模块：

$(function(){
	var cc = $(".box-title").text();
	var index = cc.indexOf("编辑");
	 //判断是否是新增页面
	if(index < 0){
		//设置对象选择器为只读
		$("#trackerName").removeAttr("readonly");
		//设置对象选择器为只显示
		$("#trackerName").attr("class","form-control form-control required  isReset");
		//设置搜索框为只读
		$("#trackerButton").attr("class","btn btn-default  ");
		
	}else{
		//如果是编辑页面，将workerCode设置为只读
		$("#trackerName").attr("readonly","readonly");
		//设置对象选择器为只显示
		$("#trackerName").attr("class","form-control disabled form-control required  isReset");
		//设置搜索框为只读
		$("#trackerButton").attr("class","btn btn-default disabled ");
	} 

2.注意事项

1.当前对象选择器设置的id的值为“tracker”,所以导致trackerName为显示内容的ID,trackerButton为按钮的ID

三、效果

---

总结

至此，jeesite设置对象选择器为只读完成了