JeecgBoot之自定义组件JEditableTable应用
1. JEditableTable 帮助文档
https://www.bookstack.cn/read/jeecg-boot-2.0/c06965dd55cf1af1.md
2. JEditableTable应用，如何做一个JEditableTable模块页
2.1 建表导入代码
第一步需要做的就是在online在线开发里面进行建表，配置后导出代码，将后台代码放到所需位置。重启后台服务器，才有用。然后前端代码放在在合适位置
2.2 前端vue中代码进行处理
第二步，将前端xxxList.vue中代码进行处理，首先，
<!--表格-->
<j-editable-table
ref="editableTable"//此处是给一个名字，某些操作可能会用到
:loading="loading"//是否正在加载，加载中不会显示任何行，默认false
:columns="columns"//与data中的columns中数据对应，生成表格
:dataSource="dataSource"//数据源，会自动处理
:rowNumber="true"//是否显示行号，默认false
:rowSelection="true"//是否可选择行，默认false
:actionButton="false"//是否显示操作按钮，包括"新增"、"删除"，默认false。此处需注意的是新增删除都只是前端操作，具体实现后台操作需要自己写
:dragSort="true"//是否可拖动排序，默认false
style="margin-top: 8px;"
@selectRowChange="handleSelectRowChange">//@selectRowChange当行被选中或取消选中时触发，获取被选中的id字符串，多个以逗号分隔
<template v-slot:action="props">
<a @click="addOrEdit(props)">保存</a>
<a-divider type="vertical"/>
<a href="javascript:;" @click="toDetail(props)" >详情</a>
<a-divider type="vertical"/>
<a-popconfirm title="确定删除吗?" @confirm="() =>deleteNowRow(props)" >
<a>删除</a>
</a-popconfirm>
</template>
</j-editable-table>
与之对应的columns:
columns: [
{
title:'名称',//列名
align:"center",
width: '280px',//列的宽度
ellipsis: true,//超出隐藏
key: 'name',//与后太返回的数据对应，通常与实体类对应
type: FormTypes.input,//选择以什么样的类型显示在表格中，此处是以输入框
placeholder: '请输入${title}',//默认的提示
validateRules: [//此处进行验证
{
required: true,//在前端设置此字段必填
message: '${title}不能为空',//在前端设置此字段不能为null，提示文本
// 自定义函数校验 handler,表单验证
handler(type, value, row, column, callback, target) {
//验证name不能重复
let {
values } = target.getValuesSync({
validate: false })
let count = 0
for (let val of values) {
if (val['name'] === value) {
if (++count >= 2) {
callback(false, '${title}不能重复')
return
}
}
}
callback(true) // true = 通过验证
}
}
],
},
{
title:'数量',
align:"center",
width: '140px',
ellipsis: true,
key: 'munber',
type: FormTypes.input,
placeholder: '请输入${title}',
validateRules: [//此处设置验证规则是正整数
{
pattern: /^[1-9]\d*$/, message: '请输入正整数!'},
]
},
{
title:'年龄',
align:"center",//居中显示
//dataIndex: 'ages_dictText'
width: '140px',
ellipsis: true,//数据过长隐藏
key: 'age_dictText',//显示字典的text
type: FormTypes.select,//此处设置输入框类型，此处用来配置输入框类型
dictCode: '字典Code',//此处是配置字典的code
defaultValue:'1',//此处是默认值，和字典结合后是当前字典code的第一个值
placeholder: '请输入${title}',
disabled: true,//表示禁用
},
]
2.3 需要导入一些必要的模块和注册：
//导入
import JEditableTable from '@/components/jeecg/JEditableTable'//此处是导入JEditableTable,如果需要更改此模块默认的一些设置，可以根据路径进行更改
import {
httpAction, postAction, deleteAction } from '@/api/manage'//此处是导入请求方法
import {
FormTypes } from '@/utils/JEditableTableUtil'//此处是导入表格中的类型，此处用到了输入框
import JInput from '@/components/jeecg/JInput'//此处是用来进行模糊查询的，j-input中会将字段进行处理再请求，a-input就不能用自带的模糊查询了。
//注册
export default {
name: "文件名即可，也可随意",
components: {
//对导入的模块进行注册
JEditableTable,
JInput,
},
}
2.4 方法详解：返回选中的id字符串，多个以逗号分隔
**@selectRowChange="handleSelectRowChange"**
methods: {
/*此处为被选中的id,字符串形式存储*/
handleSelectRowChange(selectedRowIds) {
console.log("selectedRowIds"+selectedRowIds);
this.selectedRowIds = selectedRowIds;//此处可以将id保存到自定义的对象中存储起来。
},
}
2.5 方法详解：新增一行
展示代码：
<a-button type="primary" icon="plus" @click="addRow()" style="margin-right: 5px" size="small">新增</a-button>
方法：
/*新增一行*/
addRow() {
//直接调用了 JEditableTable中的增加一行方法，注意没保存的，只是再页面上进行新增
this.$refs.editableTable.add();
},
2.6 方法详解：保存或编辑
由于修改和显示都是再表格上，没有model,所以为了方便，通常保存和修改在一起，此时后台代码需要进行判断来确定是否是修改还是保存，由于这个表格会自动生成id，所以不能根据是否有id进行判断来确定为修改还是保存。后台代码就不列出来了。
addOrEdit(props) {
/*获取当前行所有数据*/
let values = props.getValue();
/*验证必填字段不能为空,此处进行修改或者保存请求都需要先验证，validate: true表示开启验证，rowIds:是根据id进行验证，可单个可多个*/
let {
error } = this.$refs.editableTable.getValuesSync({
validate: true, rowIds: values.id });
if (!(error === 0)) {
return this.$message.warning("验证不成功，红框数据不能为空!")
}
//this.url.addOrEdit是定义的url，不需要域名和者端口号，在其他地方设置，如：/api/a/demo
httpAction(this.url.addOrEdit, values, "post").then((res) => {
if (res.success) {
this.$message.success("保存成功")
this.$emit('ok')
} else {
this.$message.warning(res.message)
}
});
},
2.7 方法详解：删除当前行
展示代码：
//会提示是否删除
<a-popconfirm title="确定删除吗?" @confirm="() =>deleteNowRow(props)" >
<a>删除</a>
</a-popconfirm>
方法：
/*删除当前行行*/
deleteNowRow(props) {
let that = this;
//rowId是这条数据的id
let {
rowId, target } = props;//此处是获取到当前数据的id
//删除前端界面上的记录
target.removeRows(rowId);
//删除后台数据库的记录，handleDelete这个方法是JeecgListMixin封装的删除方法，不许要自己写，只需要导入这个包即可如：import { JeecgListMixin } from '@/mixins/JeecgListMixin'
that.handleDelete(rowId);
},
2.8 方法详解：批量保存或修改
展示代码
<a-button type="primary" @click="addOrEditBatch()" style="margin-right: 5px" size="small">批量保存</a-button>
方法：
/*批量保存或修改*/
addOrEditBatch() {
//通过行id删选所有信息里面的选中的信息，并且进行验证。
let {
error, values } = this.$refs.editableTable.getValuesSync({
validate: true, rowIds: this.selectedRowIds });
if (!(error === 0)) {
return this.$message.warning("验证不成功，红框数据不能为空!")
}
if (values.length > 0) {
httpAction(this.url.addOrEditBatch, values, "post").then((res) => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
} else {
this.$message.warning(res.message)
}
}).finally(() => {
//console.log("")
})
} else {
this.$message.success("请选择最少一条新增数据！")
}
},
2.9 方法详解：批量删除
展示代码：
<a-button type="primary" @click="deleteBatch()" style="margin-right: 5px" size="small">批量删除</a-button>
方法：
/*批量删除*/
deleteBatch() {
//逻辑删除前端界面记录，调用的是自带的方法，此处必须要设置ref="editableTable"才能用，里面的值相互对应即可
this.$refs.editableTable.handleConfirmDelete();
// 获取被删除的行id,此处要注意，获取的是逻辑删除的记录id字符串
//console.log("delete-ids:"+this.$refs.editableTable.deleteIds)
let deleteIds = this.$refs.editableTable.deleteIds;
if (deleteIds == "") {
return this.$message.success("请至少选中一条数据");
}
//通过行id删选所有信息里面的选中的信息
deleteAction(this.url.deleteBatch+"?ids="+deleteIds).then((res) => {
if (res.success) {
this.$message.success(res.message);
//重新加载数据
this.loadData();
this.onClearSelected();
} else {
this.$message.warning(res.message);
}
}).finally(() => {
this.loading = false;
});
},