今天写页面的时候要求备注行最多只能显示10个字符,超出10个点击才能在模态框显示全部,且可以编辑
模态框部分
<!-- 模态框(Modal)- 编辑 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header" style="border-bottom: 0;padding-bottom: 0">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title center" id="myeditModal" ></h3>
<h5 class="modal-title center" style="margin-top:10px"></h5>
</div>
<div class="modal-body">
<input type="hidden" name="resource_num" id="resource_num" />
<div class="form-group">
<div class="" style="height:100px">
<textarea type="text" maxlength="150" class="form-control" name="new_beizhu" id="new_beizhu" placeholder="请输入备注内容"/ style="height:100px;resize: none;"> </textarea>
<p class="text-right">还可以输入<span class="sfont-color">150</span>字</p>
</div>
</div>
</div>
<div class="modal-footer">
<button data-bb-handler="success" type="button" class="btn btn-sm btn-primary" οnclick="confirm()"><i class="icon-ok"></i> 确定</button>
<button data-bb-handler="cancel" type="button" class="btn btn-sm btn-danger" οnclick="cancel();"><i class="icon-info"></i> 取消</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
备注字段
<td class='center'>
<a class="" id="beizhu_show${vs.index+1}" οnclick="edit('${vs.index+1}','beizhu');"><c:if test="${fn:length(var.beizhu)>10 }">
${fn:substring(var.beizhu, 0, 9)}...
</c:if>
<c:if test="${fn:length(var.beizhu)<=10 }">
${var.beizhu }
</c:if>
</a>
</td>
js代码
function edit(num,resource){
$('#resource_num').val(num);
$('#new_beizhu').val($('#beizhu'+num).text());
var $js_num = $('#new_beizhu').val().length
$('#new_beizhu').next().children("span").text(150-$js_num)
$('#editModal').modal('show');
if(resource == "beizhu"){
$("#myeditModal").text('备注').next("h5").text("")
}else if(resource == "wancheng"){
resource='完成'
$("#myeditModal").text('完成').next("h5").text("是否完成当前任务")
}
}
//点击完成功能 ajax方法
function confirm(){
$.ajax({
type:"POST",
url:"<%=basePath%>warn/editAjax.do",
dataType:"json",
data:{
warn_id:$('#warn'+$('#resource_num').val()).text(),
beizhu:$('#new_beizhu').val(),
status_flag:$('#status_flag'+$('#resource_num').val()).text(),
},
success:function(data){
if(true===data.flag){
//此处前台更新备注及状态
var new_beizhu=$('#new_beizhu').val();
var beizhu_show;
$('#editModal').modal('hide');
$('#wancheng'+$('#resource_num').val()).remove();
$('#beizhu'+$('#resource_num').val()).text(new_beizhu);
if(new_beizhu.length>10){
beizhu_show=new_beizhu.substr(0,9)+'...';
}else{
beizhu_show=new_beizhu;
}
$('#beizhu_show'+$('#resource_num').val()).text(beizhu_show);
$('#modify_username'+$('#resource_num').val()).text(data.modify_username);
$('#new_beizhu').val('');
if($('#status_flag'+$('#resource_num').val()).text()==0){
$('#status_flag'+$('#resource_num').val()).text(1);
}
return;
}else{
alert("完成事件失败,请联系管理员!");
$('#editModal').modal('hide');
$('#new_beizhu').val('');
return;
}
},
error:function(){
alert("服务器故障——完成事件错误!");
$('#editModal').modal('hide');
$('#new_beizhu').val('');
},
});
}
function cancel(){
$('#editModal').modal('hide');
$('#new_beizhu').val('');
}