Query component for custom pages
1. Usage scenarios
When a custom table is used to display data on a custom page, the search at the top operation can only search for one column of data. In this case, if we need to search for multiple columns of our data, then you can use the query component to implement it.
2. Video Display
3. Procedure
3.1 call the interface to process data and display it in a table
3.1.1 add a remote data source to the data source
Reference documents:YIDA platform interface (page data source can be called directly)
(1) call the search form instance details List interface based on criteria
The interface configuration is as follows:
Add a data source
(2) the data returned by the request is processed in the didFetch function. For more information about the processed format, see the format in edit code on the right side of the table. Each data required is an object, put it into an array uniformly, and the last returned object is an object. There are three attributes in the object, one of which is data, and the corresponding value is a processed array.
Note: If the returned data is in proxy form, you can use JSON.parse(JSON.stringify (data of proxy attribute)
function didFetch(content) {
// content.b = 1; 修改返回数据结构中的 b 字段为1
const value = [];
const data = content.data.map((item)=>{
let arr={
name: item.formData.textField_hr9o6eq,
sex: item.formData.textField_62lufhf,
age: item.formData.textField_0nibhpr,
study: item.formData.textField_97okczu,
work: item.formData.textField_456c4b7,
instid: item.formInstId
}
value.push(arr);
console.log(arr);
})
let result ={
"data" : value,
"currentPage" : content.currentPage,
"totalCount" : content.totalCount
}
return result; // 重要，需返回 content
}
3.2 drag the query component to configure the input box
Add a query component to a custom page
3.3 configure corresponding actions for the search and reset buttons of the query component
When the search type of the component corresponding to the query condition is fuzzy search, the value can be empty when querying.
When the search type of the component corresponding to the query condition is exact search, the value cannot be empty when querying.
If the exact search component is empty, you need to determine in js. When this value is empty, configure other component values as searchFieldJson.
3.3.1 configure search events
Use '${' Value. fileid'}'to obtain the value of the input box, configure the searchFieldJson parameter, and reload the data source.
The reference code is as follows:
export function onSubmit(value) {
console.log("value",value)
const work = `${value.textField_krbe9jrp}`;
const sex = `${value.textField_krc0uzre}`;
console.log("work", work)
const somejson = {
textField_456c4b7: work,
textField_62lufhf: sex
}
const param = {
formUuid: "FORM-HC9660C1TGFQ8927Y6905OPBO30Y1I9YOD3PKH",
searchFieldJson: JSON.stringify(somejson)
}
this.dataSourceMap['getDatas_copy'].load(param);
}
3.3.2 Configuration reset event
When we click the reset button, all data is displayed through reset.
The reference code is as follows:
export function onReset(values) {
console.log('onFilterReset', values);
this.dataSourceMap['getDatas_copy'].load();
}
3.4 paging settings
3.4.1 add pagination search action events
3.4.2 configure page turning events
When you click page turning, the currentPage in the params data returned is the selected page number.$('component unique identity').getValue() obtains the value of the corresponding search input box in the query component, and then uses params.currentPage ,formUuid, and query criteria searchFieldJson are used as new parameters to load the data source getDatas to realize the page turning function after searching. When no query is performed, the query condition searchFieldJson is empty, so only the original data page turning function is implemented.
The reference code is as follows:
export function onFetchData(params) {
// 如果是搜索的话翻页重置到 1
if (params.from === 'search') {
params.currentPage = 1;
}
// 如果你需要把表格查询条件保存起来，可以取消下一行注释，并添加一个 params 的变量类型数据源
// this.setState({ tableParams: params });
// 如果使用远程接口作为表格数据源，理论上你只需要将下方的“dataSourceName”改为实际的数据源名称即可
const work = this.$('textField_krbe9jrp').getValue();
const sex = this.$('textField_krc0uzre').getValue();
const somejson ={
textField_456c4b7: work,
textField_62lufhf: sex
}
const newparam = {
formUuid: "FORM-HC9660C1TGFQ8927Y6905OPBO30Y1I9YOD3PKH",
currentPage : params.currentPage,
searchFieldJson: JSON.stringify(somejson)
}
this.dataSourceMap['getDatas'].load(newparam);
}
4. Try it online
For online experience, please go to the Developer Center.👉Query component for custom pages
YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!
-------------------- Get the latest information YIDA, welcome to follow US--------------------
