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