Apriso Modern UI样式系列之三最强最实用组件Autocomplete

李英杰同学

发布于 2024-03-25 15:14:43

760

发布于 2024-03-25 15:14:43

文章被收录于专栏：智能制造社区智能制造社区

概述

在Process Builder界面设计Form view中可以设置下拉框和系统参数实现下拉选择，但功能比较简单，不能支持模糊输入选择，不能支持大数据量场景下的下拉选择。

正如本系列一中介绍的，ModernUI中包含了一些扩展的Javascript、CSS和Operation实体，其中也包含了一些非常有用的窗体组件。

本文介绍其中一个史上最全、最实用的Autocomplete下拉组件基本用法，灵活应用该组件可以大幅提升用户体验、客制化开发效率，该组件包含：

Javascript：ModernUIAutoComplete.js
CSS：ModernUIAutoComplete.css
Operation：Control_ModernUIAutocomplete_GetData：默认的获取下拉列表的Operation

主要功能

支持Json数据、自定义Operation方式和默认Operation方式提供下拉列表数据
支持百万级大数据量以及动态分页下拉（需要配置成List类型系统参数）
支持执行选中、刷新回调函数
支持动态样式设置
支持Enable和Disable设置
支持动态修改数据来源、数据刷新和数据更新

方法说明

1 参数

requestHandler: '',指定获取下拉列表数据Operation
context: null,上下文
data: [],直接指定Json格式下拉数据
limit: 30,分页行数
callbackSelected: '',选中回调函数
callbackRefreshed: '',刷新回调函数
lazyLoading: true,是否懒加载
CSSClass : '',指定CSSClass，内置样式有ModernUISuccess、ModernUIInformation、ModernUIDanger、ModernUIWarning、ModernUIActive
dictionary: '',指定系字典项
inlineInputs: {},初始化inlineInputs
initialDescription: null, 初始值描述
initialKey: null,初始Key
enabled: true,是否启用Enabled
defaultHandler: 'Control_ModernUIAutocomplete_GetData',默认的ajax方法
width: '' // auto, none, or in XXpx or in XX%指定宽度

2 方法

updateData: function(data) {},刷新数据
changeRequestHandler: function(handler) {},修改获取下拉数据的请求
changeSelectedCallback: function(callback) {},修改选中回调函数
changeRefreshedCallback: function(callback) {},修改刷新回调函数
changeCSSClass: function(css) {},修改CSSClasss
changeContext: function(context) {},修改上下文
changeInlineInputs: function(inlineInputs) {},修改InlineInputs
refreshData: function(keyword, autoSelect, key) {},刷新数据
selectFromListByValue: function(keyword) {},根据value在列表中进行选中
selectFromListByKey: function(keyword) {},根据Key在列表中进行选中
selectFirstFromList: function() {},在列表中选中第一个
showAutocomplete: function() {},显示下拉框
hideAutocomplete: function() {},隐藏下拉框
enable: function() {},设置有效启用
disable: function() {},设置无效不启用
getValue: function() {},获取当前值
getText: function() {},获取当前文本

基本用法

▶第一步：编写页面、View：

为各个文本框Textbox分别绑定系统参数。

▶第二步：在主界面的View Operation中引入Javascript文件和css样式文件的引用：

<script> src="[Apriso]/ModernUI/Controls/ModernUIAutoComplete/ModernUIAutoComplete.js"</script>

<link rel="stylesheet" type="text/css" href="[Apriso]/ModernUI/Controls/ModernUIAutoComplete/ModernUIAutoComplete.css" />

▶第三步：引入Ajax Operation：Control_ModernUIAutocomplete_GetData

▶第四步：添加html和Javascript：

<script>
$View.onLoaded(
function(){
//初始化，并获取Handler对象
var handler = $('.fc_AdvancedAutocomplete input').modernUIAutocomplete({
'emptyOnLoad': true,
'context': $Context,
'callbackSelected':function() {
$('.fc_AutocompleteSelectedCallback span').html('Callback: Selected!').css({'color': 'red'});
$('.fc_AutocompleteSelectedCallback span').show();
$('.fc_AutocompleteSelectedCallback span').fadeOut( "slow", function() { });
},
'callbackRefreshed':function() {
$('.fc_AutocompleteRefreshedCallback span').html('Callback: Refreshed!').css({'color': 'red'});
$('.fc_AutocompleteRefreshedCallback span').show();
$('.fc_AutocompleteRefreshedCallback span').fadeOut( "slow", function() { });
}
});
$('.fc_SkillName input').modernUIAutocomplete({
emptyOnLoad: true,
context: $Context
});
$('.fc_CustomerOperation input').modernUIAutocomplete({
'emptyOnLoad': true,
'context': $Context,
'callbackSelected':function() {
$('.fc_AutocompleteSelectedCallback span').html('Callback: Selected!').css({'color': 'red'});
$('.fc_AutocompleteSelectedCallback span').show();
$('.fc_AutocompleteSelectedCallback span').fadeOut( "slow", function() { });
handler[0].resetValue();
handler[0].setDisable();
},
'callbackRefreshed':function() {
$('.fc_AutocompleteRefreshedCallback span').html('Callback: Refreshed!').css({'color': 'red'});
$('.fc_AutocompleteRefreshedCallback span').show();
$('.fc_AutocompleteRefreshedCallback span').fadeOut( "slow", function() { });
},
'requestHandler':function(obj) {
$Context.callOperation('Control_ModernUIAutocomplete_GetData', obj.inputs, function(data){ obj.pushData(data); }, function(data){ obj.pushData(data); } );
}
});
$('.fc_ProductID input').modernUIAutocomplete({
emptyOnLoad: true,
context: $Context,
'callbackSelected':function() {
handler[0].setEnable();
handler[0].refreshData('Session View',true);
var ddd=handler[0].getValue();
},
'requestHandler':function(obj) {
$Context.callOperation('Control_ModernUIAutocomplete_GetData', obj.inputs, function(data){ obj.pushData(data); }, function(data){ obj.pushData(data); } );
}
});
}
);
</script>

▶第五步：运行并进行验证