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

最新推荐文章于 2022-07-18 15:15:01 发布

Little Coder

最新推荐文章于 2022-07-18 15:15:01 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 easyui框架 freemarker 文章标签： freemarker datagrid easyui

本文链接：https://blog.youkuaiyun.com/qq_20989105/article/details/76726530

easyui框架同时被 3 个专栏收录

10 篇文章

订阅专栏

前端

9 篇文章

订阅专栏

freemarker

7 篇文章

订阅专栏

本文介绍了一个基于 EasyUI 的 Datagrid 组件封装过程，包括如何定义输入参数、实现前后端交互及显示数据等关键步骤。作者还分享了解决在列表中放置两组相同长度数据的技术难点。

废话不多说，先上代码：
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>