FR自带的多选按钮,只支持整个按钮组的禁用和可用,以及默认值得设置,并不能单独设置多选组中某个或某几个按钮必选且不允许用户修改。
接下来提供一种思路实现以上功能,先上效果图。
目前实现效果:
-
强制选中A、C两个选项。
-
A与C两个选项的按钮是灰色的禁止编辑的。
-
A与C两个选项点击不会对结果值产生任何影响。
实现思路大致如下:
第一步:在控件的值中写入A,C,使页面加载后默认这两项是被选中的。
第二步:在页面初始化结束后,将A与C两个选项的样式设置为禁止编辑,相关代码如下:
// 将不允许修改的样式修改为禁止选中
setTimeout(function() {
var a = $("div[widgetname='ABC']").length;
for (var i = 1; i < a; i++) {
if ("A,C".indexOf($("div[widgetname='ABC']:eq(" + i + ") span").text()) != -1) {
$("div[widgetname='ABC']:eq(" + i + ")").removeClass("ui-state-enabled");
$("div[widgetname='ABC']:eq(" + i + ")").addClass("ui-state-disabled");
}
}
}, 100)
第三步:给控件增加状态改变事件,相关代码如下:
// 判断数组是否完全包含于另一个数组中
function isInclude(aa, bb) {
return aa.every((item) => {
return bb.some((sub) => {
return sub === item;
});
});
};
// 合并去重两个数组
function uniqueArr(arr1, arr2) {
//合并两个数组
arr1.push(...arr2) //或者arr1 = [...arr1,...arr2]
//去重
return Array.from(new Set(arr1)) //let arr3 = [...new Set(arr1)]
};
// 获取点击后控件的值
var abc = _g().parameterEl.getWidgetByName("ABC").getValue();
// 判断点击后的值是否包含控件中指定的值,如果不包含则不允许修改
if (!isInclude("A,C".split(","), abc.split(","))) {
_g().parameterEl.getWidgetByName("abc").setValue(uniqueArr(abc.split(","), "A,C".split(",")));
}
这一步的主要功能是在用户点击按钮组(无论ABC哪个选项)时,通过对比默认值和点击后的结果值来确认用户点的是不是禁止编辑的选项,如果不是的话就直接将结果值返回就可以。如果点击的是默认禁止编辑的值(即A与C)的话,就将默认值与结果值转换成数组并合并去重即可得到最后的结果值。这样就达到了即使点击了禁止编辑的选项依旧不会对结果值有影响。
标签:选项,控件,ABC,必选,多选,点击,arr1,按钮 来源: https://www.cnblogs.com/weibw162/p/16670973.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。