Freemarker之封装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">

<html>
<head>
    <meta charset="UTF-8">
    <title>Auto Height for Tabs - jQuery EasyUI Demotitle>
    <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>

<html>
<head>
    <meta charset="UTF-8">
    <title>Auto Height for Tabs - jQuery EasyUI Demotitle>

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地址

你可能感兴趣的:(前端,easyui框架,freemarker)