表格操作
## myTable.on
### 1. 功能
操作表格中的一行
### 2. 使用场景
需要操作表格中的某一行, 例如 查看, 删除, 修改
### 3. 如何使用
- 监听表格事件
- 注意even的命名, 监听时以此判断事件操作
- 同样需要加上权限 limitname
- 封装好了删除函数, 可直接使用
#### 3.1 行内按钮监听
#### 3.1.1 HTML 中添加代码, 与 form 标签同级
```html
<script type="text/html" id="operation">
<a class="layui-btn layui-btn-xs limitBtn" limitname="invoice:label:update" lay-event="update"><i class="layui-icon"></i>编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger limitBtn" limitname="goods:label:delete" lay-event="del" ><i class="layui-icon"></i>删除</a>
</script>
```
#### 3.1.2 JS 中添加代码
```JavaScript
// 括号内对应表格名
onion.myTable.on('tool(Table)', function (obj) {
var data = obj.data // 表格数据
// even对应操作项lay-event的值, 循环判断需要的操作
if (obj.event === 'update') {
// 对应的代码
} else if (obj.event === 'del') {
// 封装好的删除代码
onion.minDel(
myTable,
url + obj.data.id // 后端删除接口
);
}
})
```
#### 3.2 双击行监听
```javascript
onion.myTable.on('rowDouble(Table)', function (obj) {
var sodId = obj.data.sodId;
// obj.data 即该行的数据
});
```
#### 3.3 删除行
```js
onion.minDel(myTable, url, id, tipMsg)
```
1. `myTable` 为数据表格名称, 一般固定
2. `url` 删除接口地址
3. `id` 删除数据 id
4. `tipMsg` 删除提示, 默认为 `真的删除行么`
### 4. api定义
myTable.on 为 layui 原有方法, minDel 为再封装
``` javascript
onion.minDel = function (myTable, url, id, tipMsg) {
layer.confirm(tipMsg || '真的删除行么', function (index) {
onion.ajax.post(url, [id], function (res) {
if (res.code == onion.networkState.SUCC) {
layer.close(index);
myTable.reload();
} else if (res.code == onion.networkState.SYSTEMERR) {
onion.layer.tipMsg('系统异常');
} else {
onion.layer.tipMsg(res.msg);
}
})
});
}
```