list

列表页面

列表页面包含分页（根据指定条件）查询数据列表，添加，修改，删除按钮列表页面针对：添加按钮做了权限控制，具体逻辑在下文再详细描述

  1. @layout("/common/layout.html"){
  2. <div class="block-header">
  3.     <h2>参数管理</h2>
  4. </div>
  5. <div class="card">
  6.     <div class="card-body card-padding">
  7.         <div class="row row-lg">
  8.             <div class="col-sm-12">
  9.                 <div class="hidden-xs" id="CfgTableToolbar" role="group">
  10.                     <div class="col-sm-3">
  11.                         <#NameCon id="cfgName" placeholder="参数名" />
  12.                     </div>
  13.                     <div class="col-sm-3">
  14.                         <#NameCon id="cfgValue" placeholder="参数值" />
  15.                     </div>
  16.                     <#button name="搜索" icon="fa-search" clickFun="Cfg.search()"/>
  17.                     <#button name="重置" icon="fa-refresh" clickFun="Cfg.reset()" btnCss="info" space="true"/>
  18.                     @if(shiro.hasPermission("/cfg/add")){
  19.                         <#button name="添加" icon="fa-plus" clickFun="Cfg.openAddCfg()" space="true"/>
  20.                     @}
  21.                 </div>
  22.                 <#table id="CfgTable"/>
  23.             </div>
  24.         </div>
  25.     </div>
  26. </div>
  27. <script src="${ctxPath}/static/modular/system/cfg/cfg.js"></script>
  28. @}

查询列表数据的js代码:

  1. /**
  2.  * 系统参数管理初始化
  3.  */
  4. var Cfg = {
  5.     id: "CfgTable",    //表格id
  6.     seItem: null,        //选中的条目
  7.     table: null,
  8.     layerIndex: -1
  9. };
  11. /**
  12.  * 初始化表格的列
  13.  */
  14. Cfg.initColumn = function () {
  15.     return [
  16.         {field: 'selectItem', checkbox: true},
  17.         {title: 'ID', field: 'id', visible: true, align: 'center', valign: 'middle'},
  18.         {title: '参数名', field: 'cfgName', visible: true, align: 'center', valign: 'middle',formatter:function(data,row){
  19.             return '<a href="javascript:;" onclick="Cfg.openCfgDetail('+row.id+')">'+data+'</a>';
  20.         }},
  21.         {title: '参数值', field: 'cfgValue', visible: true, align: 'center', valign: 'middle'},
  22.         {title: '参数描述', field: 'cfgDesc', visible: true, align: 'center', valign: 'middle'},
  23.         {title: '操作',formatter:function(data,row){
  24.             return '<button type="button" class="btn btn-info btn-icon waves-effect waves-circle" onclick="Cfg.delete('+row.id+')" title="删除"><span class="zmdi zmdi-delete"></span></button>';
  26.         }}
  27.     ];
  28. };
  30. /**
  31.  * 查询系统参数列表
  32.  */
  33. Cfg.search = function () {
  34.     var queryData = {};
  35.     queryData['cfgName'] = $("#cfgName").val();
  36.     queryData['cfgValue'] = $("#cfgValue").val();
  37.     Cfg.table.refresh({query: queryData});
  38. };
  40. Cfg.reset = function () {
  41.     $("#cfgName").val("");
  42.     $("#cfgValue").val("");
  43.     this.search();
  44. };
  45. $(function () {
  46.     var defaultColunms = Cfg.initColumn();
  47.     var table = new BSTable(Cfg.id, "/cfg/list", defaultColunms);
  48.     table.setPaginationType("server");
  49.     Cfg.table = table.init();
  50. });

后台代码

CfgController

  2. /**
  3.  * 跳转到参数首页
  4.  */
  5. @RequestMapping(value = "",method = RequestMethod.GET)
  6. public String index() {
  7.     return PREFIX + "cfg.html";
  8. }
  9. /**
  10.  * 分页查询系统参数
  11.  */
  12. @RequestMapping(value = "/list",method = RequestMethod.POST)
  13. @ResponseBody
  14. public Object list(@RequestParam(required = false) String cfgName, @RequestParam(required = false) String cfgValue) {
  15.     Page<Cfg> page = new PageFactory<Cfg>().defaultPage();
  16.     if(StringUtils.isNotEmpty(cfgName)){
  17.         page.addFilter(SearchFilter.build("cfgName", SearchFilter.Operator.LIKE, cfgName));
  18.     }
  19.     if(StringUtils.isNotEmpty(cfgValue)){
  20.         page.addFilter(SearchFilter.build("cfgValue", SearchFilter.Operator.LIKE, cfgValue));
  21.     }
  22.     page = cfgService.queryPage(page);
  23.     return packForBT(page);
  24. }