首先,今天在做项目的时候遇到的一个问题,如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行。
也许你马上就会想到说,用富文本编辑器,然而我们需要实现的只是文本输入以及换行功能,就没必要说大费周章地去使用富文本编辑器了。
接下来说重点,经过一段时间的思考和探索,发现了一个规律。我们传递数据其实是这样的
写入:文本域—>Form表单提交到后台—>Spring自动装配—>通过Hibernate将数据写进MySQL数据库
显示到前台:Hibernate将数据从MySQL数据库查询取出—>Controller取得数据对象—>转换成json格式返回给前台bootstrap-table进行显示
虽然说思路很清晰,但是不同语言不同环境对换行符的转化却是不一样。数据格式转化的方式有多种,在这里我就讲一下自己所采用的思路方法。
- 我们还是从文本域这里开始,首先我们在文本域上输入一段文字并且进行换行。
- 接着将表单提交。此时文本域中的换行符为(\r\n),我们将这段文字存进数据库后,数据库是不显示换行符的,但是看得出有换行。此时我们完成了存储,但是,将数据显示到前台又是一种什么情况?
- 如果我们不对换行符进行处理的话,前台是无法进行换行的。因为Html的换行符是<br>。这时候我们使用js来进行格式转换。
formatter:function(value){
if(typeof(value)!="undefined"){
var k=value;
value=k.replace(/\r\n/ig,"<br>");
}
return value;
}
- \r\n转换为<br>标签。这时我们的bootstrap-table中的数据就实现了换行。
- 由于我们的表单有编辑这一功能,点击编辑之后,前台显示的数据就会填充到另一个页面的文本输入框中。由于是使用视图转发,这个时候我们需要经过后台。
@RequestMapping(value="/form")
public String form(Model model,Insurance insurance){
String string =insurance.getProcess();
System.out.println(string);
String newo = string.replaceAll("\r\n", "<br>");
insurance.setProcess(newo);
System.out.println(newo);
model.addAttribute("model", insurance);
List<Item> Items =ItemService.fingItem();
model.addAttribute("model2",Items);
return "/admin/insuranceform";
}
}
- 在后台可以看到,我们的insurance通过自动装配已经获取到一次查询的值(从数据库查询得到的,因此换行符仍旧是"\r\n"),由于js无法对数据库中“\r\n”这样的字段进行解析,F12查看代码会直接显示换行并且会报错。所以我们要把这个转换成一个标记,方便我们接下来进行转化,这里我采用的同样是<br>,也可以是其他的,只是作为标记用。
$(document).ready(function() {
var k="${model.process}";
k=k.replace(/<br>/ig,"\r\n");
$("#process").val(k);
});
<textarea name="process" id="process" rows="5" style="resize : none;"></textarea>
最后,通过对刚才的标记<br>进行替换,文本域又重新获得了“\r\n”,这样的换行符,回到了我们的出发点。
通过这次的学习,对这一部分的知识也有更清晰的认识,如果大家还有什么更好地思路,欢迎提出来交流一下。