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