FreeMarker模板引擎来渲染页面，使用了list标签循环,在页面如何使用js代码选择循环中的某一行元素

84 阅读 0 评论 56 点赞

我是靠谱客的博主眼睛大滑板，最近开发中收集的这篇文章主要介绍FreeMarker模板引擎来渲染页面，使用了list标签循环,在页面如何使用js代码选择循环中的某一行元素，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在表现层使用FreeMarker模板引擎来渲染页面，使用了<#list>标签做循环输出。在页面如何使用js代码选择其中的某一行元素呢？

SpringMVC中，处理器controller执行完成后降模型和视图返回给前端控制器，然后前端控制器会请求视图解析器解析视图。当前端控制器拿到解析完成的视图后，才将视图返回给浏览器。freemarker填充数据渲染视图是在视图解析器这里完成的。js代码实在浏览器加载运行的。在js代码中：pageResult.list[index]这样的写法是不合法的，因为index是js代码中定义的变量，而后台在渲染视图时并没有加载js代码。js代码是在浏览器端加载的。pageResult.list[0]这样的写法是合法的。

比如在页面是这样的：

 <#list pageResult.list as item>

    <td>${item.companyid!}</td>
    <td>${item.dep!}</td>
    <a href="javascript:void(-1);" class="edit_Btn">
       编辑
    </a>

  </#list>

现在想使用js选择某一行元素，进行相关操作。有2种方法。

方法一：

自定义一个数据变量data-json，将那一行的数据转换成json字符串${item.jsonString}然后赋值给data-json，js就可以取出了用如下方式取出数据，Var data = $(this).data(“json”);

<a href="javascript:void(-1);" class="edit_Btn" data-json="${item.jsonString}">编辑</a>

js:

var data = $(this).data("json");

这种方法需要在实体类中添加getsonString()方法。

    /**
     * 定义getJsonString（）函数，供前端data-json='${item.jsonString}'使用
     * @return
     */
    public String getJsonString()
    {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("companyid", companyid);
        map.put("dep", dep);
        return JSON.toJSONString(map);
    }

方法二：

自定义一个数据变量data-value，将那一行的数据的数组下标${item_index}然后赋值给data-value.

<a href="javascript:void(-1);" class="edit_Btn" data-value="${item_index}">编辑</a>

js就可以取出了用如下方式取出数据，var index = $(this).data(“value”);

var index = $(this).data("value");
var data = dataArray[index];

在js代码加载的时候必须定义dataArray数组并赋值

<script type="text/javascript">
       $(function() {
          /*数据初始化*/
          var dataArray =  new Array();
          <#list pageResult.list as item>
             var obj = new Object();
             obj.companyid = '${item.companyid!}';
             obj.dep = '${item.dep!}';
             dataArray.push(obj);
           </#list>

}
</script>