列表页基础配置

列表页可以配置相关组件,包括检索框按钮等。

2018-05-24 新增修改列表头部的总条目信息,在获取数据的异步接口加入list_summary字段即可,支持html,与list字段平级。

效果预览

yml配置

wau_topbar:
  # 见【布局--topbar】组件
wau_header:
  # 见【布局--header】组件
wau_body:
  header:
    # 见【布局--内容区头部】组件
  sidebar:
    # 见【布局--侧边栏】组件
  body:
    notice_block:
      # 见【框架--提示块】组件
    panel:
      # 见【框架--面板】组件
    data_table:
      request: 
        model: ajax
        url: '/platform/user/get_list'
        method: 'POST'
        params: {uid: '{%id%}',qq: '{%user.qq%}'}
      search_bar:
        # 见【框架--检索】组件
      buttons:
        # 见【控件--按钮buttons】组件,数组方式
      header:
        content:
          - {model: checkbox, content: QQ, fixed: true}
          - {model: text, content: QQ, sort: true, name: 'sort_qq', width: 120}
          - {model: text, content: 头像}
          - {model: text, content: 姓名, hide: true}
          - {model: text, content: 电话, width: 120}
          - {model: text, content: HTML}
          - {model: text, content: 角色}
          - {model: text, content: 操作, class: center}
      body:
        no_data_msg: '对不起,暂无数据'
        loading_data_msg: '数据加载ing'
        data: '{%list%}'
        page_data:
          uuid: '{%id%}'
          uuname: '{%name%}'
        template:
          - {model: checkbox, value: '{%qq%}', class_name: 'text-center',name: checkboxtest, group_by: {%qq%}}
          - {model: text, value: '{%qq%}', class_name: 'text-center'}
          - {model: image, value: 'http://puui.qpic.cn/tv/0/4239146_190110/0?id={%qq%}',content: 'QQ:{%qq%}',attr: {width: 50,height: 50}}
          - {model: link, content: '{%real_name%}', href: 'baidu.com', target: '_blank'}
          - {model: text, value: '{%mobile1%}', class_name: 'text-center'}
          - {model: html, content: '{%html%}'}
          - {model: text, value: '{%role_key%}'}
          - model: btn_group
            class_name: 'text-center'
            content: 
              - model: btn
                type: dialog
                icon: fa-file-archive-o
                hide_label: false
                content: " 查看"
                dialog_id: detail_dialog
                params: 
                  id: "{{id}}"
              - model: btn
                type: link
                icon: fa-edit
                content: '编辑'
                hide_label: true,href: '/platform/user/edit?id={%uuid%}&name={%uuname%}'
                hide: '{%hide_edit_btn%}'
              - model: btn
                type: clipboard
                icon: fa-clipboard
                content: '点我复制'
                hide_label: true
                clipcontent: '{%qq%},你要干啥?'
                hide: '{%hide_edit_copy%}'
wau_footer:
  # 见【布局--footer】组件

字段说明

data_table 列表页配置

字段 类型 含义 默认值
search_bar Object table检索列表,配置见 -
buttons Array 按钮集合,见按钮配置 -
header Object table头部对象 -
body Object table主体对象 -
need_memory Boolean 是否请求需要记录当前列表检索参数 false

data_table.request 页面请求对象

字段 类型 含义 默认值
model Ajax 请求类型 -
url String 请求地址 -
method POST or GET 请求方式 -
params Object 请求附带参数 -

data_table.header

字段 类型 含义 默认值
content Array table头部对象数据源 -
content.model text or checkboxk 支持类型 -
content.content String 字段名称 -
content.class String 头部样式 -
content.width String 列宽度配置,非必须 -
content.hide Boolean 隐藏该列 false
content.fixed Boolean 【固定该列】,目前支持首列和尾列 false
content.sort Boolean 是否可点击按【顺序排列】 false
content.name String sort为true时,点击该头部会将name作为key,asc或者desc作为参数请求列表接口 false

data_table.body

字段 类型 含义 默认值
data variable ajax对接数据源 -
page_data -
template Array table模板对象 -
no_data_msg String 没有数据时显示文字 对不起小主,经过玩命的查找,啥米也没有找到!
loading_data_msg String 加载时显示文字 数据玩儿命加载中

data_table.body.template

字段 类型 含义 默认值
model text, image, btn-group, link, html 支持类型 -
value variable 字段变量 -
attr Object 当model为image时支持,设置宽高 -
href String 当model为link时支持,链接地址 -
class_name String 表格样式 -
content Array 当model为btn-group时支持,按钮集合 -

data_table.body.template.content

字段 类型 含义 默认值
model btn 按钮组模型 -
type link or ajax or clipboard 按钮类型 -
icon String icon名称 -
content String 按钮名称 -
href variable or String 按钮链接 -
hide Boolean 是否隐藏 false
url String ajax请求地址 -
params Object[variable] ajax data参数 -
hide_label Boolean 是否隐藏标签 true
dialog_id String 弹窗id,preloader配置的dialog_id true
group_by String 同一列的相同行合并 -

表格url返回值结构示例

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "list": [{
            "id": "10000000",
            "user_name": "608245",
            "password": null,
            "qq": "608245",
            "real_name": "",
            "role_key": "platform_admin",
            "email": "",
            "mobile": "18695387602",
            "mobile1": "13800138000",
            "data": null,
            "status": "0",
            "disabled": "0",
            "last_login_time": "0000-00-00 00:00:00",
            "creator": null,
            "updater": null,
            "update_time": "0000-00-00 00:00:00",
            "create_time": "0000-00-00 00:00:00",
            "ip": null,
            "memo": null,
            "hide_edit_btn":true
        }, {
            "id": "10000001",
            "user_name": "371743",
            "password": null,
            "qq": "371743",
            "real_name": "",
            "role_key": "platform_admin",
            "email": "",
            "mobile": "18667845826",
            "data": null,
            "status": "0",
            "disabled": "0",
            "last_login_time": "0000-00-00 00:00:00",
            "creator": null,
            "updater": null,
            "update_time": "0000-00-00 00:00:00",
            "create_time": "0000-00-00 00:00:00",
            "ip": null,
            "memo": null,
            "hide_edit_copy":true
        }],
        "pagination": {
            "total": "300",
            "page_size": 14,
            "current_page": ""
        }
    }
}

results matching ""

    No results matching ""