## 前端开发

后台前端基于Layui开发，可查看其开发文档：https://layui.dev

### 动态表格

```html
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="currentTable" lay-filter="currentTable"
               data-auth-add="{:check_auth('add')}"
               data-auth-edit="{:check_auth('edit')}"
               data-auth-delete="{:check_auth('del')}"
               data-auth-modify="{:check_auth('multi')}"
        ></table>
    </div>
</div>
```

data-auth-xxx属性为对应操作权限属性，可根据需要配置。

### 初始表格

```js
layui.use(['aphpTable', 'aphp'], function () {
    var aphpTable = layui.aphpTable;
    var aphp = layui.aphp;
	aphpTable.render({
		init: init, // 初始化配置
		url: "{:url('index')}", // 列表接口
		toolbar: [], // 顶部操作栏
		cols: [], // 列参数
		page: {} // 分页配置
	});
	aphpTable.bindEvent(); // 绑定事件
});
```

#### 初始化配置

```js
var init = {
    table_elem: '#currentTable', // table容器或者dom(必须)
    table_render_id: 'currentTable', // 容器唯一id(必须)
	index_url: "{:url('index')}", // 列表接口(或设置url属性)(必须)
    add_url: "{:url('add')}", // 添加接口
    edit_url: "{:url('edit')}", // 修改接口
    delete_url: "{:url('del')}", // 删除接口
    modify_url: "{:url('multi')}", // 修改属性接口
};
```

#### 顶部操作栏

内置按钮：

```js
toolbar: ['refresh_table', 'refresh', 'add', 'enable', 'disable', 'delete'],
//对应按钮方法：刷新表格，刷新页面，添加，启用，停用，删除
```

自定按钮：
```
toolbar: ['refresh_table',
    [{
		text: '优化表',
		url: "{:url('optimize')}",
		method: 'batch',
		auth: 'optimize',
		confirm: 'true',
		icon: 'layui-icon layui-icon-leaf',
		class: 'layui-btn layui-btn-normal layui-btn-sm',
    }],
],
```

属性说明：

```php
text // 文本
method  // 操作：默认open batch href none
auth // 权限
class // 样式
icon // 图标
url  // url地址
title // 提示
extend // 扩展属性
checkbox // 是否要选择Id
html // 直接返回html
sign // 标识
confirm // 确认提示
```

### 列属性

```js
{ type: 'checkbox'},
{ title: 'ID', field: 'id' },
```




---

本文档由 [AphpDoc](https://doc.aphp.top) 生成，更新于：2025-04-16 11:34:29