编辑表单下拉框table搜索
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
查看代码
vue3代码
const onInit = ($vm) => {
gridRef = $vm
//配置编辑表单下拉框table搜索选项
const item = gridRef.getFormOption('字段')
item.type = 'selectTable'
//设置只读是否
//item.readonly = false;
//配置请求的接口地址
//可以使用生成的页面接口
//注意接口权限问题，如果提示没有权限,参照后台后开发文档上的重写权限示例
//item.url = 'api/Demo_Customer/getPageData';
//尽量自定义接口，见下面的文档描述，或者Demo_CustomerController类的方法Search
item.url = 'api/Demo_Customer/search'
// item.inputReadonly=true;输入框只读操作
// 需要将columns的search字段设置为true，否则无法过滤数据
//设置显示的字段
item.columns = [
//设置search:true,则字段可以搜索
{ field: 'Customer', title: '客户', type: 'string', width: 80, search: false },
{ field: 'PhoneNo', title: '手机', type: 'string', width: 110, search: false },
{ field: 'DetailAddress', title: '详细地址', type: 'string', width: 120 }
]
//选中table数据后，回写到表单
item.onSelect = (rows) => {
//给表单字段设置值
editFormFields.Customer = rows[0].Customer
editFormFields.PhoneNo = rows[0].PhoneNo
}
//设置过滤条件
//(输入框搜索)表格数据加载前处理
item.loadBefore = (param, callback) => {
//loadType=1按回车调用的查询，loadType=1输入框变化调用的查询
//loadType=undefined默认页面加载
//这里可以实现只加载回车事件
// if(param.loadType!=1){
// return false;
// }
//(上面如果设置了item.inputReaonly，这里就不能添加表单的值过滤，否则无法显示数据)
//方式1、手动设置查询条件
// param.wheres.push({
// name:"Customer",
// value:editFormFields.Customer,
// displayType:"like"
// })
//方式2、给param.value设置值，后台手动处理查询条件
//上面设置inputReadonly=true时，这里不用设置值
param.value = editFormFields.Customer
callback(true)
}
/****************下面这些配置不是必须的**************/
//表格数据加载后处理
item.loadAfter = (rows, callback, result) => {
callback(true)
}
//监听输入框变动与回车事件
item.onKeyPress = (val, $event) => {
console.log(val)
if ($event.keyCode == 13) {
console.log('按了回车')
}
//清空值时给其他字段设置值
// if(!val&&value+''!='0'){
// editFormFields.字段=null;
// }
}
//设置弹出框高度(默认200)
item.height = 200
//设置弹出框宽度(默认500)
//item.width = 400;
//item.textInline = false; //设置表格超出自动换行显示
//设置表格是否单选
item.single = true
//隐藏分页
item.paginationHide = false
}
vue2代码
onInited() {
//配置编辑表单下拉框table搜索选项
const item = this.getFormOption('字段')
item.type = 'selectTable'
//设置只读是否
//item.readonly = false;
//配置请求的接口地址
//可以使用生成的页面接口
// 注意接口权限问题，如果提示没有权限,参照后台后开发文档上的重写权限示例
//item.url = 'api/Demo_Customer/getPageData';
//尽量自定义接口，见下面的文档描述，或者Demo_CustomerController类的方法Search
item.url = 'api/Demo_Customer/search'
// item.inputReadonly=true;输入框只读操作
// 需要将columns的search字段设置为true，否则无法过滤数据
//设置显示的字段
item.columns = [
//设置search:true,则字段可以搜索
{ field: 'Customer', title: '客户', type: 'string', width: 80, search: false },
{ field: 'PhoneNo', title: '手机', type: 'string', width: 110, search: false },
{ field: 'DetailAddress', title: '详细地址', type: 'string', width: 120 }
]
//选中table数据后，回写到表单
item.onSelect = (rows) => {
//给表单字段设置值
this.editFormFields.Customer = rows[0].Customer
this.editFormFields.PhoneNo = rows[0].PhoneNo
}
//设置过滤条件
//(输入框搜索)表格数据加载前处理
item.loadBefore = (param, callback) => {
//loadType=1按回车调用的查询，loadType=1输入框变化调用的查询，loadType=undefined默认页面加载
//这里可以实现只加载回车事件
// if(param.loadType!=1){
// return false;
// }
//(上面如果设置了item.inputReaonly，这里就不能添加表单的值过滤，否则无法显示数据)
//方式1、手动设置查询条件
// param.wheres.push({
// name:"Customer",
// value:this.editFormFields.Customer,
// displayType:"like"
// })
//方式2、给param.value设置值，后台手动处理查询条件
//上面设置inputReadonly=true时，这里不用设置值
param.value = this.editFormFields.Customer
callback(true)
}
/****************下面这些配置不是必须的**************/
//表格数据加载后处理
item.loadAfter = (rows, callback, result) => {
callback(true)
}
//监听输入框变动与回车事件
item.onKeyPress = (val, $event) => {
console.log(val)
if ($event.keyCode == 13) {
console.log('按了回车')
}
//清空值时给其他字段设置值
// if(!val&&value+''!='0'){
// this.editFormFields.字段=null;
// }
}
//设置弹出框高度(默认200)
item.height = 200
//设置弹出框宽度(默认500)
//item.width = 400;
//item.textInline = false; //设置表格超出自动换行显示
//设置表格是否单选
item.single = true
//隐藏分页
item.paginationHide = false
}
后台接口实现
//url如果是配置的生成页面接口getPageData,后台方法配置可以忽略
public partial class Demo_CustomerController
{
private readonly IDemo_CustomerService _service;//访问业务代码
private readonly IHttpContextAccessor _httpContextAccessor;
private readonly IDemo_CustomerRepository _repository;
[ActivatorUtilitiesConstructor]
public Demo_CustomerController(
IDemo_CustomerService service,
IHttpContextAccessor httpContextAccessor,
IDemo_CustomerRepository repository
)
: base(service)
{
_service = service;
_repository = repository;
_httpContextAccessor = httpContextAccessor;
}
//可以定义接口权限
//[ApiActionPermission(ActionPermissionOptions.Search)]
[Route("search"), HttpPost]
public async Task<IActionResult> Search([FromBody] PageDataOptions loadData)
{
//loadData.Value是前端loadBefore方法设置的value值(输入框搜索的值)
string value = loadData.Value?.ToString()?.Trim();
//生成多个字段or查询条件
var query = _repository.WhereIF(!string.IsNullOrEmpty(value),
x => x.Customer.Contains(value) || x.Remark.Contains(value));
//注意：如果前端设置了search属性(table的输入框查询)这里需要从loadData.Wheres获取查询条件
//获取方式: var wheres= options.Wheres.DeserializeObject<List<SearchParameters>>();
// var value1 = wheres.Where(x => x.Name == "查询的字段1").Select(x => x.Value).FirstOrDefault();
// query=query.WhereIF(!string.IsNullOrEmpty(value1), x => x.字段.Contains(value1))
// 操作同上
// var value2 = wheres.Where(x => x.Name == "查询的字段2").Select(x => x.Value).FirstOrDefault();
//字段2查询操作同上
//返回数据数据必须包括rows与total属性
var data = new
{
rows = await query.OrderByDescending(x => x.Customer)
.TakePage(loadData.Page, loadData.Rows)
//返回的字段注意与前端配置的字段一致
.Select(s => new
{
s.Customer_Id,
s.Customer,
s.Province,
s.DetailAddress,
s.PhoneNo,
s.Remark
}).ToListAsync(),
//返回总行数
total = await query.CountAsync()
};
//注意前后端字段配置的大小写一致
return JsonNormal(data);
}
}
明细表下拉框table搜索
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
查看代码
vue3代码
const onInited=()=> {
//配置编辑弹出框明细表下拉框table搜索选项
initDetailSelectTable();
}
//配置编辑弹出框明细表下拉框table搜索选项
const initDetailSelectTable=()=>{
//如果是一对多明细，给二级明细表绑定下拉搜索:
//二级表：gridRef.details[0].columns.forEach
//三级表：gridRef.subDetails[0].columns.forEach
//0表示第几张表,其他操作不变按下面的配置
//配置编辑表单下拉框table搜索选项
gridRef.detailOptions.columns.forEach((item) => {
if (item.field == '字段') {
item.edit={type:"selectTable"}
item.readonly = false;
//配置请求的接口地址
//可以使用生成的页面接口，注意接口权限问题，如果提示没有权限,参照后台后开发文档上的重写权限示例
//item.url = 'api/Demo_Goods/getPageData';
//尽量自定义接口，见下面的文档描述，或者Demo_GoodsController类的方法Search
item.url = 'api/Demo_Goods/search';
//输入框只读操作，需要将columns的search字段设置为true，否则无法过滤数据
//item.inputReadonly=true;
//设置显示的字段
item.columns = [
{field:'GoodsName',title:'商品名称',type:'string',width:120,search:false},
{field:'GoodsCode',title:'商品编号',type:'string',width:100search:false},
{field:'Specs',title:'规格',type:'string',width:60,align:'left'},
{field:'Price',title:'单价',type:'decimal',width:60},
{field:'Remark',title:'备注',type:'string',width:100},
];
//选中table数据后，回写到表单
//editRow:当前正在编辑的行
//rows:选中的行
item.onSelect = (editRow,rows) => {
editRow.GoodsName = rows[0].GoodsName;
editRow.GoodsCode = rows[0].GoodsCode;
editRow.Price = rows[0].Price;
};
//(输入框搜索)表格数据加载前处理
//editRow:当前正在编辑的行
//param:请求的参数
item.loadBefore = (editRow,param, callback) => {
//loadType=1按回车调用的查询，loadType=1输入框变化调用的查询，loadType=undefined默认页面加载
//这里可以实现只加载回车事件
// if(params.loadType!=1){
// return false;
// }
//(上面如果设置了item.inputReaonly，这里就不能添加表单的值过滤，否则无法显示数据)
//方式1、手动设置查询条件
// param.wheres.push({
// name:"GoodsName",
// value:editRow.GoodsName,
// displayType:"like"
// })
//方式2、给param.value设置值，后台手动处理查询条件
//上面设置了inputReadonly后这里就不用设置了
param.value = editRow.GoodsName;
callback(true);
};
//表格数据加载后处理
//editRow:当前正在编辑的行
//rows:后台返回的数据
item.loadAfter = (editRow,rows, callback, result) => {
callback(true);
};
/****下面的这些都是可以选配置，上面的是必填的******/
//监听输入框变动与回车事件
item.onKeyPress=(val,$event,row)=>{
console.log(val);
if ($event.keyCode==13) {
console.log('按了回车');
}
//清空值时给其他字段设置值
// if(!val&&value+''!='0'){
// row.xx=null;
// }
}
//设置弹出框高度(默认200)
item.height = 200;
//设置弹出框宽度(默认500)
item.selectWidth = 500;
item.textInline = true; //设置表格超出显示...
//设置表格是否单选
item.single = true;
//隐藏分页
item.paginationHide = true;
}
});
}
vue2代码
onInited() {
//配置编辑弹出框明细表下拉框table搜索选项
this.initDetailSelectTable();
},
//配置编辑弹出框明细表下拉框table搜索选项
initDetailSelectTable(){
//如果是一对多明细，给二级明细表绑定下拉搜索:
//二级表：this.details[0].columns.forEach
//三级表：this.subDetails[0].columns.forEach
//0表示第几张表,其他操作不变按下面的配置
//配置编辑表单下拉框table搜索选项
this.detailOptions.columns.forEach((item) => {
if (item.field == '字段') {
item.edit={type:"selectTable"}
item.readonly = false;
//配置请求的接口地址
//可以使用生成的页面接口，注意接口权限问题，如果提示没有权限,参照后台后开发文档上的重写权限示例
//item.url = 'api/Demo_Goods/getPageData';
//尽量自定义接口，见下面的文档描述，或者Demo_GoodsController类的方法Search
item.url = 'api/Demo_Goods/search';
//输入框只读操作，需要将columns的search字段设置为true，否则无法过滤数据
//item.inputReadonly=true;
//设置显示的字段
item.columns = [
{field:'GoodsName',title:'商品名称',type:'string',width:120,search:false},
{field:'GoodsCode',title:'商品编号',type:'string',width:100search:false},
{field:'Specs',title:'规格',type:'string',width:60,align:'left'},
{field:'Price',title:'单价',type:'decimal',width:60},
{field:'Remark',title:'备注',type:'string',width:100},
];
//选中table数据后，回写到表单
//editRow:当前正在编辑的行
//rows:选中的行
item.onSelect = (editRow,rows) => {
editRow.GoodsName = rows[0].GoodsName;
editRow.GoodsCode = rows[0].GoodsCode;
editRow.Price = rows[0].Price;
};
/****下面的这些都是可以选配置，上面的是必填的******/
//(输入框搜索)表格数据加载前处理
//editRow:当前正在编辑的行
//param:请求的参数
item.loadBefore = (editRow,param, callback) => {
//loadType=1按回车调用的查询，loadType=1输入框变化调用的查询，loadType=undefined默认页面加载
//这里可以实现只加载回车事件
// if(params.loadType!=1){
// return false;
// }
//(上面如果设置了item.inputReaonly，这里就不能添加表单的值过滤，否则无法显示数据)
//方式1、手动设置查询条件
// param.wheres.push({
// name:"GoodsName",
// value:editRow.GoodsName,
// displayType:"like"
// })
//方式2、给param.value设置值，后台手动处理查询条件
//上面设置了inputReadonly后这里就不用设置了
param.value = editRow.GoodsName;
callback(true);
};
//表格数据加载后处理
//editRow:当前正在编辑的行
//rows:后台返回的数据
item.loadAfter = (editRow,rows, callback, result) => {
callback(true);
};
/****************下面这些配置不是必须的**************/
//监听输入框变动与回车事件
item.onKeyPress=(val,$event,row)=>{
console.log(val);
if ($event.keyCode==13) {
console.log('按了回车');
}
//清空值时给其他字段设置值
// if(!val&&value+''!='0'){
// row.xx=null;
// }
}
//设置弹出框高度(默认200)
item.height = 200;
//设置弹出框宽度(默认500)
item.selectWidth = 500;
item.textInline = true; //设置表格超出显示...
//设置表格是否单选
item.single = true;
//隐藏分页
item.paginationHide = true;
}
});
}
后台接口实现
//url如果是配置的生成页面接口getPageData,后台方法配置可以忽略
public partial class Demo_CustomerController
{
private readonly IDemo_CustomerService _service;//访问业务代码
private readonly IHttpContextAccessor _httpContextAccessor;
private readonly IDemo_CustomerRepository _repository;
[ActivatorUtilitiesConstructor]
public Demo_CustomerController(
IDemo_CustomerService service,
IHttpContextAccessor httpContextAccessor,
IDemo_CustomerRepository repository
)
: base(service)
{
_service = service;
_repository = repository;
_httpContextAccessor = httpContextAccessor;
}
//可以定义接口权限
//[ApiActionPermission(ActionPermissionOptions.Search)]
[Route("search"), HttpPost]
public async Task<IActionResult> Search([FromBody] PageDataOptions loadData)
{
//loadData.Value是前端loadBefore方法设置的value值(输入框搜索的值)
string value = loadData.Value?.ToString()?.Trim();
//生成多个字段or查询条件
var query = _repository.WhereIF(!string.IsNullOrEmpty(value),
x => x.Customer.Contains(value) || x.Remark.Contains(value));
//注意：如果前端设置了search属性(table的输入框查询)这里需要从loadData.Wheres获取查询条件
//获取方式: var wheres= options.Wheres.DeserializeObject<List<SearchParameters>>();
// var value1 = wheres.Where(x => x.Name == "查询的字段1").Select(x => x.Value).FirstOrDefault();
// query=query.WhereIF(!string.IsNullOrEmpty(value1), x => x.字段.Contains(value1))
// 操作同上
// var value2 = wheres.Where(x => x.Name == "查询的字段2").Select(x => x.Value).FirstOrDefault();
//字段2查询操作同上
//返回数据数据必须包括rows与total属性
var data = new
{
rows = await query.OrderByDescending(x => x.Customer)
.TakePage(loadData.Page, loadData.Rows)
//返回的字段注意与前端配置的字段一致
.Select(s => new
{
s.Customer_Id,
s.Customer,
s.Province,
s.DetailAddress,
s.PhoneNo,
s.Remark
}).ToListAsync(),
//返回总行数
total = await query.CountAsync()
};
//注意前后端字段配置的大小写一致
return JsonNormal(data);
}
}