Freemarker之封装easyUI的datagrid，旨在生成快捷方便的管理列表（一）

来源：互联网发布：一个矩阵怎么计算编辑：程序博客网时间：2024/06/05 18:19

废话不多说，先上代码：
1、grid.ftl
这个就是封装的datagrid的通用组件
自定义输入参数的介绍：
controller：这个是我后台的地址（这里注意，我这里后台的地址命名是有规范的，默认添加、删除、更新、获取所有数据、根据id获取单个数据的地址分别为：add、delete、update、findById、findAll。前面的地址为/system/实体名）
title：总表格名
fields ：这里注意了，这个是显示数据的必输字段，参考JSON，我自定义的格式为：fields：values，这样的格式，多条用逗号隔开。files是后台实体的字段名，values是字段名对应的列头
rownumbers=”true” ：行号
singleSelect=”true” ：是否能被选中
width=”1000px” ：宽度
height=”500px”：高度

<#macro grid controller title fields rownumbers="true" singleSelect="true" width="1000px" height="500px"><!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Auto Height for Tabs - jQuery EasyUI Demo</title>    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">    <script type="text/javascript" src="../lib/easyui/jquery.min.js"></script>    <script type="text/javascript" src="../lib/easyui/jquery.easyui.min.js"></script>    <script type="text/javascript" src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>    <script type="text/javascript" src="../lib/layer/layer.js"></script></head><body>    <table id="table" class="easyui-datagrid" title="${title}" style="width:${width};height:${height}"            data-options="rownumbers:${rownumbers},singleSelect:${singleSelect},url:'${controller}findAll',method:'get'">        <thead>            <tr>                <#list fields?split(",") as x>                      <#list x?split(":") as y>                        <#if (y_index ==0)>                            <th data-options="field:'${y}',width:200">                        <#else>                            ${y}</th>                        </#if>                    </#list>                 </#list>              </tr>        </thead>    </table></body></html></#macro>

2、调用公共组件

<#import "/common/grid.ftl" as userGrid><!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Auto Height for Tabs - jQuery EasyUI Demo</title></head><body>    <@userGrid.grid controller="/system/user/" title="用户管理" width="1100px" height="500px"        fields="id: ,c_username:用户名,c_phone:联系方式,n_age:年龄,n_sex:性别">    </@userGrid.grid></body></html>

在封装的时候还是遇到点问题，那就是在一个list中怎么把两组长度相同的数据放到同一个行里面。后面用下标判断解决了这个问题。
想看完整代码的可以去我的github上下载：github地址

阅读全文

0 0