前臺帶換行符的文本提交到後臺,後臺在前臺顯示換行

數據在保存的時候,替換換行符爲<br/>

function submitFun(url){
	//獲取form表單序列化的字符串,對form表單序列化後的樣式爲:aa=1&bb=1&cc=1的格式,因此這裏利用&來分組,而且得到參數名和參數值再替換換行符
	var submitDataStr = $(".__saveForm").serialize();
	var descriptionEntity = submitDataStr.split("&")[0];
	var key = descriptionEntity.split("=")[0];
	var value = descriptionEntity.split("=")[1];
	if(!value && value==""){
		$.easyui.messager.show({ icon: "info", msg: "請在輸入框中寫入內容!", position: "topCenter" ,timeout:5000}); 
		return;
	}
	//替換全部的換行符爲<br/>保存到數據庫(在UTF8中的換行符爲%0D%0A,正則後面的g表示全部的匹配的字符串都要替換.使用replace 方法的時候須要用正則表達式，不然只能替換第一個換行  
	value = value.replace(/%0D%0A/g,"<br>"); 
	submitDataStr+="&object.description="+value;
	//替換原來的"object.description"的參數字符串
	var index = submitDataStr.indexOf("&");
	submitDataStr = submitDataStr.substring(index+1);
	if($(".__saveForm").form('validate')){
		$.ajax({
			url:url,
			data:submitDataStr,
				type:"POST",
				dataType:'json',
				success:function(data){
					//服務器成功返回信息,執行success()方法
					$.easyui.loaded({ topMost: true }); 
					var obj= data;
					if (obj && obj.returnCode==1)
					{
						$.easyui.messager.show({ icon: "info", msg: "回覆提交成功", position: "topCenter" ,timeout:5000}); 
						//每次提交完問題以後不會刷新頁面
						var flag = false;//默認客戶提交
						var name = obj.data.userName;
						if(obj.managerName){
							//客服提交
							flag = true;
							name = obj.data.managerName;
						};
						var descriptionStr = obj.data.description;
						var imageArr = obj.data.imagelist;
						var startTime = obj.data.startTime;
						startTime = startTime.replace("T"," ");//格式化日期
					    //直接插入圖片和描述會更好一些,這裏選擇利用JQUEY追加元素
						addDataTbodyToTable(name,descriptionStr,imageArr,startTime,flag);
						return;
					}
					$.easyui.messager.show({ icon: "info", msg: "回覆提交失敗", position: "topCenter" ,timeout:5000}); 
				},
		});
	}else{
		$.easyui.loaded({ topMost: true }); 
		$(".__saveForm input:eq(0)").focus();
	}
}

代碼1.(輸入回覆內容以後,動態的在前臺顯示剛纔輸入的內容)

​
/**
 * 增長描述description,傳遞對象爲一個字符串
 * @param str 描述字符串
 * @param 圖片地址構成的數組
 * @param 提交日期
 */
function addDataTbodyToTable(name,descriptionStr,imageArr,startTime,flag){
	//在顯示的時候把<br/>改爲換行符顯示出來(注意：使用replace 方法的時候須要用正則表達式，不然只能替換第一個換行  )
    var reg=new RegExp("<br/>","g"); //建立正則RegExp對象    
	var newDescriptionStr=descriptionStr.replace(reg,"\n");   
	var $dom = $('#tbody');
	var str = "<TBODY><tr><td>";
	if(flag){
		//是客服
		str+="客服--->";
	}else{
		str+="用戶--->";
	}
	str+= name+":<br/>"+startTime+"<br />"+newDescriptionStr+"<br/><br/>";
	if(imageArr && imageArr.length > 0){
		for(var i = 0;i<imageArr.length;i++){
			//注意,這裏必須加上單引號,不然不能顯示圖片
			str+="<img src='"+imageArr[i]+"'/><br/><br/>";
		}
	}
	str+="</td></tr></TBODY>";
	$dom.before(str);
	clearData();
}

​

代碼2.(後臺數據在前臺顯示,使用的是struts2標籤的回顯)

<tr > 
	<!-- 利用struts2的標籤來根據條件設置不一樣的背景色 -->
     <td style="background: <s:if test="#obj.managerId!=null">paleturquoise</s:if><s:if test="#obj.managerId==null">lemonchiffon</s:if>">
     	<s:if test="#obj.managerId!=null">
     		客服---><s:property value="#obj.managerName"/>:<br/>
     	</s:if>
     	<s:if test="#obj.managerId==null">
     		用戶---><s:property value="#obj.userName"/>:<br/>
     	</s:if>
     	<s:property value="#obj.startTime"/>
     	<br />
     	<span class="description"><s:property value="#obj.description" /></span>
     	<br />
     	<br />
     	<s:if test='#obj.picData=="" || #obj.picData == null'>
     	</s:if>
     	<s:else>
      	<s:iterator value="#obj.imagelist" var="o">
      		<%-- 圖片:<s:property value="#o.index"/> --%>
       	<img src="<s:property value="#o"/>"/>
       	<br />
       	<br />
      	</s:iterator>
     	</s:else>
     </td>
  </tr>

3.在步驟2的<span class="description"><s:property value="#obj.description" /></span>中,由於可能存在空格,因此在JS中去處理,代碼以下:

$(function(){
	//頁面加載完成以後,替換<br/>爲換行
	var reg=new RegExp("<br/>","g"); //建立正則RegExp對象    
	var $replaceDom = $('.description');
	/**
	 * 替換數據庫的<br/> 爲換行在JSP頁面顯示
	 */
	for(var i = 0;i<$replaceDom.length;i++){
		var replaceStr = $($('.description')[i]).text().replace(reg,"\r\n");   
		$($('.description')[i]).html(replaceStr);	
	}
    /**
	 * 注意:若是要刪除多個元素要倒着刪除,不然會出現錯誤
	 */
//	for(var i = $replaceDom.length;i>=0;i--){
//		$($('.description')[i]).remove();
//	}
});