zoukankan      html  css  js  c++  java
  • 文本域、bootstrap-table显示以及MySQL三者间的换行符问题

    首先,今天在做项目的时候遇到的一个问题,如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行。

    也许你马上就会想到说,用富文本编辑器,然而我们需要实现的只是文本输入以及换行功能,就没必要说大费周章地去使用富文本编辑器了。

    接下来说重点,经过一段时间的思考和探索,发现了一个规律。我们传递数据其实是这样的

    写入:文本域—>Form表单提交到后台—>Spring自动装配—>通过Hibernate将数据写进MySQL数据库

    显示到前台:Hibernate将数据从MySQL数据库查询取出—>Controller取得数据对象—>转换成json格式返回给前台bootstrap-table进行显示

    虽然说思路很清晰,但是不同语言不同环境对换行符的转化却是不一样。数据格式转化的方式有多种,在这里我就讲一下自己所采用的思路方法。

    1. 我们还是从文本域这里开始,首先我们在文本域上输入一段文字并且进行换行。
    2. 接着将表单提交。此时文本域中的换行符为( ),我们将这段文字存进数据库后,数据库是不显示换行符的,但是看得出有换行此时我们完成了存储,但是,将数据显示到前台又是一种什么情况?
    3. 如果我们不对换行符进行处理的话,前台是无法进行换行的。因为Html的换行符是<br>。这时候我们使用js来进行格式转换。
      formatter:function(value){
                    
                       if(typeof(value)!="undefined"){
                      	
                          var k=value;
                          value=k.replace(/
      /ig,"<br>");
                       }
                      
                  	return value;
      }
    4.  formatter是bootstrap-table中的一个格式化数据的属性,我们将从后台获取到的数据value进行replace,将 转换为<br>标签。这时我们的bootstrap-table中的数据就实现了换行。
    5. 由于我们的表单有编辑这一功能,点击编辑之后,前台显示的数据就会填充到另一个页面的文本输入框中。由于是使用视图转发,这个时候我们需要经过后台。
      @RequestMapping(value="/form")
          public String form(Model model,Insurance insurance){
              String string =insurance.getProcess();
              System.out.println(string);
              String newo = string.replaceAll("
      ", "<br>");
              insurance.setProcess(newo);
              System.out.println(newo);
              model.addAttribute("model", insurance);                
              List<Item> Items =ItemService.fingItem();
              model.addAttribute("model2",Items);        
              return "/admin/insuranceform";
          }
      }
    6. 在后台可以看到,我们的insurance通过自动装配已经获取到一次查询的值(从数据库查询得到的,因此换行符仍旧是" "),由于js无法对数据库中“ ”这样的字段进行解析,F12查看代码会直接显示换行并且会报错。所以我们要把这个转换成一个标记,方便我们接下来进行转化,这里我采用的同样是<br>,也可以是其他的,只是作为标记用。
    $(document).ready(function() {
                var k="${model.process}";
                k=k.replace(/<br>/ig,"
    ");
               $("#process").val(k);         
            });
    <textarea name="process" id="process" rows="5" style="resize : none;"></textarea>

        最后,通过对刚才的标记<br>进行替换,文本域又重新获得了“ ”,这样的换行符,回到了我们的出发点。

        通过这次的学习,对这一部分的知识也有更清晰的认识,如果大家还有什么更好地思路,欢迎提出来交流一下。

     

  • 相关阅读:
    宏任务、微任务与Event Loop
    puppteer的使用
    docker的使用 -- windows
    vscode集成eslint
    删除git中无用的大文件
    git 使用
    利用chrome devtool 观察页面占用内存
    JS对象-不可扩展对象、密封对象、冻结对象
    数学
    素数 + 背包
  • 原文地址:https://www.cnblogs.com/fangjet/p/7841377.html
Copyright © 2011-2022 走看看