# layui-popTreeTable

**Repository Path**: gslmx/layui-popTreeTable

## Basic Information

- **Project Name**: layui-popTreeTable
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2020-02-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## layui-popTreeTable：基于layui开发的自定义弹窗表格组件
### 1. 功能说明
- 可以指定的按钮的单击事件弹窗 或者直接绑定到input文本框的单击事件中
- 分类查询和关键字查询，二者同时只有一种生效
- 查询时会实时向后台提供查询条件

### 2. 使用案例截图
案例仅仅演示的是静态数据，所以查询未能实时刷新。

![avatar](popTreeTable.gif)

### 3. 案例代码

以下为JS代码调用：

```
  <script>
    layui.config({ base: './lib/' });
    layui.use(['layer', 'popTreeTable'], function () {
      var $ = layui.$, popTreeTable = layui.popTreeTable;

      $('#popTreeTable').click(function () {

        popTreeTable.open({
          title: '商品列表'
          ,table:{
            url: './data/table.js'
            ,joinField: 'ptType'
            ,cols: [[
              , {field: 'id', hide: true}
              , {field: 'ptCode', title: '商品编码'}
              , {field: 'ptName', title: '商品名称'}
              , {field: 'ptRuleModel', title: '规格型号'}
              , {field: 'ptBrand', title: '商品品牌'}
              , {title: '操作', align: 'center', fixed: 'right', toolbar: '#lay-toolbar', width: 80}
            ]]
          }
          ,tree:{
            title: '商品分类'
            ,url: './data/tree.js'
          }
          ,done: function (obj) {
            $('#textarea').val(JSON.stringify(obj));
            console.log(obj);
          }
        });
      });
    });

  </script>

```

### 4.1 自定义参数说明

|参数列表 | 参数说明 | 是否必填 | 默认值 |
|- | - | - | - |
| title | 弹出窗口的标题行 | 是 |  |
| table | 表格的参数，参见下面table的说明 | 是 |  |
| tree | 左侧树的参数，参见下面tree的说明 | 是 |  |
| done | 选择完后，回调处理函数，默认传入选择的表的记录行的对象，这里写自己获取数据后的处理逻辑 | 是 |  |


### 4.2 table参数说明

|参数列表 | 参数说明 | 是否必填 | 默认值 |
|- | - | - | - |
| url | table请求数据的url | 是 |  |
| joinField | table中参与关联tree的id字段的对应字段 | 是 |  |
| cols | 表格的字段定义 | 是 |  |


### 4.3 tree参数说明

|参数列表 | 参数说明 | 是否必填 | 默认值 |
|- | - | - | - |
| title | 树的标题内容 | 否 | '类别列表'  |
| url | 表格的请求数据列表，需要返回格式如: {"code": 0, "msg":"", "data":[{},{},{}]} ,后台会解析data出来使用| 是 |  |



#### 有喜欢的帮忙点个star