# eiptable

**Repository Path**: honestno1/eiptable

## Basic Information

- **Project Name**: eiptable
- **Description**: 在后端页面开发时，对table有一些共通的需求，做成基于layui table的扩展，方便使用。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 3
- **Created**: 2024-08-03
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: layui, table, layui插件

## README

# eiptable

## 介绍
在后端页面开发时，对table有一些共通的需求，做成基于layui table的扩展，方便使用。

### 对table cell编辑类型的扩展
在layui table的原有的编辑类型text、textarea之外，增加对新的编辑类型的支持，新增的编辑类型如下：
1. select，下拉选择框
2. date，日期选择类型
3. number，数字输入类型


## 在线示例
[在线示例](https://stackblitz.com/edit/layui-eiptable-sample?file=index.html)

## 例子截图

![下拉选择输入](image1.png)
![日期选择输入](image.png)
![年月选择输入](image2.png)

## 示例代码
使用方式和layui table基本一致，具体请参考<a href="https://layui.dev/docs/2/table/">#layui table</a>的官方文档。
下面是对应 例子截图 的代码。详细请参考sample文件。
```
layui.config({
    base:'./eiptable/'
}).use(['eipTable'], function(){
	var eipTable = layui.eipTable;
	var $ = layui.jquery;

	const testData = [
		{employeeNo: '0001', name: '张三', sex: '1', yearMonth: '2024-01', checkInDate: '2023-01-01', checkOutDate: '2023-12-02'},
		{employeeNo: '0002', name: '李四', sex: '2', yearMonth: '2024-02', checkInDate: '2024-01-01', checkOutDate: '2022-11-02'},
		{employeeNo: '0003', name: '王五', sex: '1', yearMonth: '2024-03', checkInDate: '2023-01-01', checkOutDate: '2024-01-02'},
		{employeeNo: '0004', name: '麻子1', sex: '2', yearMonth: '2024-04', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0005', name: '麻子2', sex: '2', yearMonth: '2024-05', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子3', sex: '2', yearMonth: '2024-06', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子4', sex: '2', yearMonth: '2024-07', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子5', sex: '9', yearMonth: '2024-08', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子6', sex: '2', yearMonth: '2024-09', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子7', sex: '9', yearMonth: '2024-10', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子8', sex: '2', yearMonth: '2024-11', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子9', sex: '9', yearMonth: '2024-12', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
	];

    // 渲染表格
	eipTable.render({
		elem: '#test',
        defaultToolbar: ['filter'],
        toolbar: '#toolBar',
		cols: [[
            {type:'numbers', fixed: 'left', width:50},
            {field:'employeeNo', fixed: 'left', width:80, title: '工号'},
            {field:'name', fixed: 'left', width:100, title: '姓名', edit: 'text'},
            {field:'sex', fixed: 'left', width:80, title: '性别', 
				edit: {
					type: 'select', 
					options: [{value: '1', text: '男'}, {value: '2', text: '女'}, {value: '9', text: '保密'}]
				}
			},
			{field:'yearMonth', width:110, title: '入职时间',
				edit: {
					type: 'date',
					options: {type: 'month', format: 'yyyy-MM'}
				}
			},
			{field:'checkInDate', width:110, title: '入项时间', edit: 'date'},
			{field:'checkOutDate', width:110, title: '离项时间', edit: 'date'},
			{field:'workload', width:110, title: '工作量',
				edit: {
					type: 'number',
					options: {min: 0, max: 30, precision: 2}
				}
			},
		]],
		page: true,
	    limits: [5, 10, 30],
	    limit: 5,
		data: testData,
    });

	// 绑定单元格编辑事件
	eipTable.on('edit(test)', function(obj){
		console.log(obj);
	});

});

```

## API
layui table 组件的所有 API 均适用于 eipTable 组件，详细请参考<a href="https://layui.dev/docs/2/table/#api">#table组件的API</a>文档。

| API                              | 描述               |
| -------------------------------- | ------------------ |
| var eipTable = layui.eipTable;   | 获得 eipTable 模块 |
| eipTable.render(options)         | 渲染表格           |
| eiptable.reload(id, options)     | 表格重载           |
| eiptable.reloadData(id, options) | 表数据重载。       |

### 渲染
eipTable.render(options);

- 参数 options : 基础属性配置项。#详见 table 组件基础属性 

该组件渲染的使用方式与 table 组件完全相同。

#### 基础属性
table 组件的所有基础属性均适用于 eipTable 组件。

#### 表头属性
<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <th>属性</th><th>描述</th><th>类型</th><th>默认值</th>
    </thead>
    <tbody>
        <tr>
            <td>edit</td>
            <td>
                用于对列所在的单元格开启编辑功能。可选值有：<br>
                1. edit: 'text' 单行输入模式 <br>
                2. edit: 'textarea' 多行输入模式<br>
                3. 函数写法：<br>
                function(d) { return 'text' } <br>
                // d 即为当前行数据，此时可根据行相关字段来开启该行是否编辑的权限<br>
                4. edit: 'date' 日期选择类型，日期选择为laydate，参数为默认参数，laydate默认参数请参考laydate属性<br>
                5. edit: {} 对象类型定义的输入模式，通过对象类型描述select、date、number等扩展属性<br>
            </td>
            <td>string<br>function<br>object</td><td>false</td>
        </tr>
        <tr>
            <td>edit.type</td>
            <td>编辑模式，支持select、date、number三种模式</td>
            <td>string</td>
            <td>-</td>
        </tr>
        <tr>
            <td>edit.options</td>
            <td colspan="3">
                输入模式的详细属性选项，每个模式有不同的属性集合<br/>
                1. select模式,options值是数组对象，定义下拉选项的值，例：options: [{value: '1', text: '男'}, {value: '2', text: '女'}, {value: '9', text: '保密'}]<br/>
                <table border="1" cellspacing="0" cellpadding="0">
                    <thead>
                        <th>属性</th><th>描述</th><th>类型</th><th>默认值</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>下拉选项的value</td>
                            <td>string</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>text</td>
                            <td>下拉选项的text</td>
                            <td>string</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
                2. date模式，laydate控件属性基本一致，有以下属性较常用，详细参数请参考<a href="https://layui.dev/docs/2/laydate/#options">#laydate</a>的属性：<br/>
                <table border="1" cellspacing="0" cellpadding="0">
                    <thead>
                        <th>属性</th><th>描述</th><th>类型</th><th>默认值</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>type</td>
                            <td>
                                date选择面板大的类型，支持以下可选值：<br/>
                                1. date：日期选择器（默认），可选择：年、月、日选择<br/> 
                                2. year: 年选择器，年选择器，只提供年列表选择<br/>
                                3. month: 月选择器，只提供年、月选择<br/>
                                4. time: 时间选择器，只提供时分秒选择<br/>
                                5. datetime: 日期时间选择器，可选择：年、月、日、时、分、秒选择<br/>
                            </td>
                            <td>string</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>format</td>
                            <td colspan="3">
                                自定义日期和时间值的返回格式,默认值： yyyy-MM-dd。 其格式符规则如下：<br/>
                                <table border="1" cellspacing="0" cellpadding="0">
                                    <thead>
                                        <th>格式符</th><th>描述</th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>yyyy</td><td>年份，输出四个字符。若不足四位，则前置补零</td>
                                        </tr>
                                        <tr>
                                            <td>y</td><td>年份，允许一位</td>
                                        </tr>
                                        <tr>
                                            <td>MM</td><td>月份，输出两个字符。若不足两位，则前置补零</td>
                                        </tr>
                                        <tr>
                                            <td>M</td><td>月份，允许一位</td>
                                        </tr>
                                        <tr>
                                            <td>dd</td><td>日期，输出两个字符。若不足两位，则前置补零</td>
                                        </tr>
                                        <tr>
                                            <td>d</td><td>日期，允许一位</td>
                                        </tr>
                                        <tr>
                                            <td>HH</td><td>小时，输出两个字符。若不足两位，则前面补零</td>
                                        </tr>
                                        <tr>
                                            <td>H</td><td>小时，允许一位</td>
                                        </tr>
                                        <tr>
                                            <td>mm</td><td>分钟，输出两个字符。若不足两位，则前面补零</td>
                                        </tr>
                                        <tr>
                                            <td>m</td><td>分钟，允许一位</td>
                                        </tr>
                                        <tr>
                                            <td>ss</td><td>秒数，输出两个字符。若不足两位，则前面补零</td>
                                        </tr>
                                        <tr>
                                            <td>s</td><td>秒数，允许一位</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                3. number模式，支持的属性如下：<br/>
                <table border="1" cellspacing="0" cellpadding="0">
                    <thead>
                        <th>属性</th><th>描述</th><th>类型</th><th>默认值</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>precision</td>
                            <td>数字的整数位数</td>
                            <td>int</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>scale</td>
                            <td>数字的小数位数，不指定时默认为0，即数字是整数</td>
                            <td>int</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>max</td>
                            <td>设置数字的最大值</td>
                            <td>number</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>min</td>
                            <td>设置数字的最小值</td>
                            <td>number</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

## 事件
eipTable.on('event(filter)', callback);
eipTable 事件继承于 table 事件，具体使用方法可参考：<a href="https://layui.dev/docs/2/table/#table.on">#table 事件</a>

## 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request