我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › ABI移动端脚本汇总

ABI移动端脚本汇总

复制链接 | 收藏本帖

1902

: luojr 初学数据Lv2

发表于2022-9-19 17:49

楼主

本帖最后由 luojr 于 2022-11-1 16:49 编辑

目前为草稿，正在编辑中......

移动端脚本大全

1 调整移动端分析表样式脚本方法(abi 5.2.3版本后支持)

组件	脚本方法
调整计算参数位置	function adjustCalcparamPosition()
WidgetsBuilder 报表加载完毕后的事件,可以调整样式	function adjustWidgetBuilder(bodyarea)
WidgetObj 统计图或其他组件样式调整	function adjustWidgetObj(className,bodyarea,basedom)
WidgetObj 调整高度	function adjustWidgetObj_getChildMaxHeight(childnodes,max)
WidgetParamComboBox 下拉框样式	function adjustWidgetCombox(basedom,pnode,edit,label)
WidgetParamComboBox 加载前	function adjustWidgetCombox_initDom(basedom,pnode,edit,label)
WidgetParamComboBoxTree 下拉树组件	function adjustWidgetComboxTree(basedom,pnode,edit,label)
WidgetParamComboBoxTree 加载前	function adjustWidgetComboxTree_initDom(basedom,pnode,edit,label)
WidgetParamDate 日期组件	function adjustWidgetDate(basedom,pnode,edit,label)
WidgetParamDate 加载前	function adjustWidgetDate_initDom(basedom,pnode,edit,label)
WidgetParamEdit 输入框组件	function adjustWidgetEdit(basedom,pnode,edit,label)
WidgetParamEdit 加载前	function adjustWidgetEdit_initDom(basedom,pnode,edit,label)
WidgetTab tab组件样式	function adjustWidgetTab(tab)
WidgetTab 切换tab页 active 页	function adjustWidgetTabActive(active)
WidgetContainer 容器布局	function adjustWidgetContainer(basedom)
WidgetContainer 加载前	function adjustWidgetContainer_initDom(basedom)
WidgetContainer 渲染完成后	function adjustWidgetContainer_delayInit(basedom)
WidgetLayout sheet容器调整	function adjustAddSheet(widget)
WidgetResultGrid 表格样式	function adjustWidgetResultGrid(basedom,table)

例:

//提前注入移动端脚本

if((typeof(isInjectionMobileJs)!="undefined")&&!isInjectionMobileJs){

//不显示钻取等待框

isShowZqWaitToast = false;

//固定tab标签页+调整参数框位置

function adjustWidgetTab() {

......

}

2 脚本方法使用示例2.1 样式脚本
2.1.1 基础组件样式

2.1.1.1 tab标签头样式修改
客户端脚本：

function adjustWidgetTab() {

//标签头字号

$(".headcontainer .subhead, .headcontainer .subhead_active").css("font-size", "10px");

//标签头高度

$(".headcontainer").css({"height":"35px","line-height":"32px"});

$(".bodycontainer").css({"top":"35px"});

}

效果图如下：

2.1.1.2 移动端修改tab页标签字体颜色脚本
客户端脚本：

var isMobile = (window["AppUtil"] != undefined);

//设置未选中标签样式

function subheadCss(id, css) {

if(!isMobile) return;

$('#' + id + ' .subhead').css(css);

}

//设置选中标签样式

function subheadActiveCss(id, css) {

if(!isMobile) return;

$('#' + id + ' .subhead_active').css(css);

}

//设置未选中标签样式

subheadCss("HHH2", {"color":"red"});

//设置选中标签样式

subheadActiveCss("HHH2", {"color":"red"});

EUI.addStyleSheet('.headcontainer .subhead_active{color:red;border-bottom:4px solid #ff0000}')

其中HHH2为tab页的代号

效果图如下：

更详细的说明可参考原始贴：https://bbs.esensoft.com/thread-135719-1-1.html

2.1.1.3 锁定行列线样式脚本：
横线：
客户端脚本：

EUI.addStyleSheet('#GRID1_horizontalLine {border-top:5px solid green !important}')

适用组件：分析区表格。
效果图如下：

注意事项：GRID1为分析区表格代号，可根据实际组件代号修改
脚本生效范围：代号为GRID1的分析区表格竖线：
客户端脚本：

EUI.addStyleSheet('#GRID1_verticalLine{border-left:5px solid green !important}')

适用组件：分析区表格。
效果图如下：

注意事项：GRID1为分析区表格代号，可根据实际组件代号修改
脚本生效范围：代号为GRID1的分析区表格

本脚本更详细的说明可参考原始贴：https://bbs.esensoft.com/thread-137452-1-1.html

2.1.2 参数组件样式

2.1.2.1 移动端参数组件配色修改

使用脚本可修改下图中的三处颜色

客户端脚本：

if((typeof(isInjectionMobileJs)!="undefined")&&!isInjectionMobileJs){

function adjustWidgetDate(basedom,pnode,edit,label) {

var $dlg = g_rptpage.getParamMgr().params.get(basedom.getAttribute("wid")).dlg.parent();

var clazz = "custom-color-" + basedom.id;

var header_color = "red";//头部颜色

var checked_color = "#00ff00";//选中颜色

var button_color = "rgb(0,0,255)";//按钮颜色

$dlg.addClass(clazz);

EUI.addStyleSheet("." + clazz + " .ui-widget-header{background:" + header_color + "}" + ".calendar-content-cell-checked{background:" + checked_color + "}" + "." + clazz + " button:first-child{background:" + button_color + "!important}")

}

效果图如下：

更详细的说明可参考原始贴：https://bbs.esensoft.com/thread-142175-1-1.html

2.1.2.2 设置组件的背景颜色以及透明度、字体颜色：

适用组件：输入框、维下拉等组件。
客户端脚本：

$("#HHH55 input,#HHH9 input,#HHH14 textarea").css({"background":"#0a0b39","opacity":"0.55","color":"#fff"})

效果图如下：

原始贴：https://bbs.esensoft.com/thread-137551-1-1.html

2.1.2.3 移动端日期右侧“清除”按钮变“返回”；维下拉、枚举下拉右侧“重置”按钮变“返回”；
客户端脚本：

window["parampanelRightBtnOnlyBack"] = true; // 只返回不清除已选择值

效果图如下：

加脚本后：

效果图如下：

加脚本后：

2.1.2.4 日期组件、维下拉和枚举下拉右侧“重置”按钮变“返回”功能的同时，设置右侧按钮显示文字；
客户端脚本：

window["parampanelRightBtnOnlyBack"] = true; // 只返回不清除已选择值

//debugger;

// 使用定时器更新参数组件下拉面板右侧显示文字，必须使用定时器，定时器才能保证右侧按钮设置成返回后执行

var updateParamRightTxtTimer = setTimeout(function() {

clearTimeout(updateParamRightTxtTimer);

window["paramdateRightBtnTxt"] = "返回当前"; // 日期组件右侧按钮文字

window["parampanelRightBtnTxt"] = "返回当前"; // 维下拉和枚举下拉右侧按钮文字

}, 50);

效果图如下：

2.1.3 表单组件样式

2.1.3.1 多行输入框提示脚本：

输入框在移动端展示的时候，在未输入内容是显示的是请输入，表单组件中单行输入框、下拉框在右侧属性中有一个输入框提示和下拉框提示可以直接使用，但是多行输入框是没有这个属性的，需要用到以下客户端脚本控制：
适用组件：多行输入框。
客户端脚本：

$("#HHH14 textarea").attr({"placeholder":"要提示的内容"}) //HHH14为组件代号

注意事项：HHH14为多行输入框代号，可根据实际组件代号修改
脚本生效范围：代号为HHH14的多行输入框
效果图如下：

原始贴：https://bbs.esensoft.com/thread-137551-1-1.html

2.2 其他功能

2.2.1 容器加载完成后显示内容（避免容器渲染时看到内容位置闪动）

function adjustWidgetContainer_initDom(basedom){

var wid = basedom.getAttribute("wid");

if(wid==="WidgetContainer78"){

basedom.style.visibility="hidden";

}

function adjustWidgetContainer_delayInit(basedom){

var wid = basedom.getAttribute("wid");

if(wid==="WidgetContainer78"){

basedom.style.visibility="";

}

2.2.2 定时刷新
PC端分析表支持定时刷新功能，移动端暂不支持。

变通解决脚本，采用实现热区式效果脚本。
客户端脚本：

if ((typeof(isInjectionMobileJs) != "undefined") && !isInjectionMobileJs) {

setInterval(function(){

//钻取时，不显示黑色等待框

isShowZqWaitToast = false;

//热区钻取

_zcalcn([

['Widget1', 'HHH51','@a=1'],

['Widget2', 'HHH55','@a=1'],

['Widget3', 'HHH59','@a=1'],

['Widget4', 'HHH63','@a=1'],

]);

//恢复黑色等待框

isShowZqWaitToast = true;

},10000);

}

效果动图如下：

2.2.3 动态控制组件的显示和隐藏：

因为PC端和移动端样式不一样，所以脚本不是通用的，下面是移动端的客户端脚本：客户端脚本：

document.getElementById("HHH9").style.display="none";//组件默认隐藏

document.getElementById("HHH14").style.display="none";//组件默认隐藏

var mutationObserver = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

/************************当DOM元素发送改变时执行的函数体***********************/

if(mutation.attributeName === "title") {

if($("#HHH87 input.eui-form-input").val() == "其他") { //当HHH87组件的值等于多少时，HHH9、HHH14组件显示，否则就隐藏

document.getElementById("HHH9").style.display="flex";

document.getElementById("HHH14").style.display="block";

} else {

document.getElementById("HHH9").style.display="none";

document.getElementById("HHH14").style.display="none";

}

/*********************函数体结束*****************************/

});

/**Element**/

mutationObserver.observe($("#HHH87 input.eui-form-input").get(0), {

attributeFilter: [ "title"],

attributes: true,

characterData: true,

childList: false,

subtree: true,

attributeOldValue: true,

characterDataOldValue: true

});

脚本使用场景：表单组件中的输入框组件默认隐藏，当下拉框组件选择其他时，输入框组件显示。
脚本中组件均属于表单组件，所以组件需要放在表单容器中。
HHH87为表单组件中输入框组件的代号，HHH9为单行输入框组件，HHH14为多行输入框组件。可根据实际组件代号修改。
效果动图如下：