带标签的列表页

带标签的表格,可以进行标签编辑,见下方tags_editor【1.6版本以上支持】
本示例包含了标签编辑弹窗示例

效果预览

表格主体yml配置

data_table:
  search_bar:
    # 见【框架--检索】组件
  buttons:
    # 见【控件--按钮buttons】组件,数组方式
  header:
    content:
      - {model: checkbox, content: QQ}
      - {model: text, content: QQ}
      - {model: text, content: 头像}
      - {model: text, content: 姓名}
      - {model: text, content: 电话}
  body:
    data: '{%list%}'
    template:
      - {model: checkbox, value: '{%qq%}'}
      - {model: text, value: '{%qq%}'}
      - {model: text, value: '{%qq%}'}
      - {model: text, value: '{%qq%}'}
      - {model: text, value: '{%qq%}'}
  tags_editor:
    title: 全部用户
    width: small
    request:
      model: ajax
      url: "/api/dialog/tags_list" #标签获取地址
      method: 'POST'
    data: '{%tag_list%}'
    addtional:
        - {model: btn, type: dialog, icon: fa-pencil, dialog_id: edit_tag, params: {id: '{%id%}'}}
        - {model: btn, type: dialog, icon: fa-trash-o, dialog_id: delete_tag, class_name: red, params: {id: '{%id%}'}, hide: '{%hide_delete%}'}

字段说明

data_table.tags_editor

字段 类型 含义 默认值
title String 标签栏名称 -
width String 标签栏宽度,可选值有small, middle, large small
request Object 请求配置,返回数据见下方 -
data Array 数据展示部分 -
addtional Array 每个标签的按钮,按钮配置见button -

标签栏url返回值结构示例

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "total": "9000",
        "list": [{
            "content": "我是修改后的",
            "id": "1",
            "model": "text",
            "number": 109,
            "hide_delete": true
        },{
            "content": "我是修改后的2",
            "id": "8",
            "model": "text",
            "number": 109
        },{
            "content": "我是修改后的3",
            "id": "10",
            "model": "text",
            "number": 109,
            "hide_delete": true
        }]
    }
}

标签弹窗yml配置

preloader:
  edit_tag:
    model: dialog
    title: 编辑标签
    body:
      form:
        action: '/api/dialog/edit_tag'
        content:
          - model: input
            type: hidden
            name: hidden_id
            value: '{%id%}'
          - model: input
            label: 标签名称
            type: text
            name: act_name
            placeholder: 请输入标签名称
            help: 请输入10个以内
            value: '{%id%}'
            validate:
              required: required
              minlength: 1
              maxlength: 10
              msg: 请输入正确标签名称
    buttons:
      - model: button
        content: 确定
        class_name: btn-info
        type: submit
        not_refresh: true
        trigger_name: 'tags.edit' # 完成编辑操作后调用
      - model: button
        content: 取消
        type: dismiss
  delete_tag:
    model: dialog
    title: '删除标签'
    # show: false
    body: 
      engine: 'html'
      template: '是否要删除{%id%}这个标签?'
    buttons:
      - model: button
        content: 确定
        class_name: btn-info
        type: ajax
        url: '/api/dialog/edit_tag'
        not_refresh: true
        trigger_name: 'tags.delete'  # 完成删除操作后调用 另:编辑和删除也可以用 tags.list 进行触发,刷新整个tags列表
        params:
          id: '{%id%}'
      - model: button
        content: 取消
        type: dismiss

标签栏url(edit_tag)返回值结构示例

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "content": "我是修改后的",
        "id": "1",
        "model": "text",
        "number": 109,
        "hide_delete": true
    }
}

results matching ""

    No results matching ""