# crazyTableQuery

**Repository Path**: seaSpirit/crazyTableQuery

## Basic Information

- **Project Name**: crazyTableQuery
- **Description**: 在使用layui table中，经常会遇到，需要定位某一行、某一列的单元格，或者定位某一行等等操作。
layui table 提供的 行事件等等不太够用。
我就结合 jQuery ，汇总了如下的方法，供大家参考。
- **Primary Language**: JavaScript
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2020-02-15
- **Last Updated**: 2025-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# crazyTableQuery

## 介绍 Introduction
在使用layui table中，经常会遇到，需要定位某一行、某一列的单元格，或者定位某一行等等操作。
layui table 提供的 行事件等等不太够用。
因此结合 jQuery ，汇总了如下的方法，供大家参考。





## 安装 Installation

1.  将1.x 文件夹下的 crazyTableQuery 文件夹，整个拷贝到自己项目扩展插件目录下

## 申明 Declaration
2.  在table.render 的 done回调中，加载
```javascript
        done: function(res, curr, count) {
            // 在 done 函数中，使用layui.use() 来调用刚才引入的第三方插件
            // 这样，既能保证每次table.reload 或 table.render 的时候，正确且有效使用第三方插件，
            // 也能保证 不会多次引入第三方插件。
            let othis = this;
            layui.use('crazyTableQuery', function () {
                crazyTableQuery = layui.crazyTableQuery;
                crazyTableQuery.render(othis, res);
            });

        }
```

## 框架 Construction

```javascript
    /** Layui Table 结构
     *
     *  <div id="YourTableID">                          --- tbElem(), tbFilter()
     *  <div lay-id="YourTableID">                      --- tbNext()
     *      <div layui-table-tool>                      --- tbTool()
     *
     *      <div layui-table-box>                       --- tbBox()
     *          <div layui-table-header>                --- tbHeader()
     *              <table>                             --- header table
     *                  <thead>                         --- header thead, getTh(field), getThCell(th)
     *
     *          <div layui-table-body layui-table-main> --- tbMain()
     *              <table>                             --- main table
     *                  <tbody>                         --- main tbody
     *                      <tr data-index="0">...<tr>  --- main tr, getTrs(), getTr(rowIndex)
     *                          <td data-field="xxx">   --- main td, getTds(field), getTd(field, index), getTdsValue(field)
     *                                                  --- getTdCell(td), getTdValue(td)
     *
     *          <div layui-table-fixed>                 --- tbFixed()
     *              <div layui-table-header>            --- *** the other header
     *              <div layui-table-body>              --- *** the other body
     *
     *      <div layui-table-total>                     --- tbTotal()
     *          <table>                                 --- total table, getTotalTds(field)
     *
     *      <div layui-table-page>                      --- tbPage()
     *
     *  注意：
     *      1. 有两个 .layui-table-body，一个是主表body，一个是固定列的body。如果只查询这个class，会把两个都查询出来。
     *      2. 因此要查询主表body，应该查询 .layui-table-main。
     */
```

## 文档 Documentation

- `render(myTable, res)` 插件渲染。第一个参数`myTable`，是table 的options，第二个参数`res`是table 所有的data
- `reload(where)` 重新加载表格（你就不需要去记录表格的id等）
- `tbNext()` 返回渲染出来的表格（简称：主表）。后续所有的操作都在这下面
- `tbTool()` 返回主表的头工具栏区域
- `tbBox()` 返回主表的table区域
- `tbPage()` 返回主表的翻页区域
- `tbTotal()` 返回主表的统计行区域
- `tbHeader()` 返回 tbBox header 区域
- `tbMain()` 返回 tbBox body 区域
- `tbFixed()` 返回 tbBox fixed 固定列区域
- `getTds(field)` 返回 field 所在列区域（数组）
- `getTdsValue(field)` 返回 field 所在列的所有值（数组）
- `getTh(field)` 返回 field 所在表头区域
- `getTotalTds(field)` 返回 field 所在统计行区域
- `getTrs()` 返回 所有行区域
- `getTd(field, index)` 返回 第`index`行，`field`列 对应单元格
- `getTdValue(td)` 返回 指定的td 的取值
- `getTr(index)` 返回 第`index`行
- `updateTotal()` 更新统计行
- `checkStatus()` 代替table.checkStatus(id)


## 特别说明

- 因为设计中，还考虑了表的索引名称，这个是在 `render(myTable, res)` 的`res`参数中携带的pkey参数。其默认的对象结构是：`{field:'id', name:'id'}`。其中field = 在 table.render 的cols 中存放的主索引的名称。而 name = 在发起http 请求的时候索引的替代名称。