-
背景
这几天在做管理后台的功能开发时
需要添加一个可以进行 标签打分的模块，方便后期对接单人员的 信息收集
根据需求，我选取的是常用的layui.rate组件在嵌入页面是发现：
如果直接在页面上进行显示，按照文档指导是很容易实现的
但是，当前项目毕竟是在前人开发的代码基础上进行优化此时，代码处理逻辑为
js-post请求回调后
并且使用了layer.open()弹窗，在表格中进行显示
那么，就会出现layui.rate组件渲染不完整或失效的情况
- 操作步骤
1. 首先，引入 layui 前端框架的 js、css 是前提
2. js 代码，动态生成 打分模块的 html 代码
3. layer.open() 回调成功 success() 方法中，进行 rate.render() 的渲染
4. 实现 rate.render() 中的 choose() 方法，组合自己的业务逻辑
5. 将整合的打分数据，转化成 json 字符串，存储于页面一个隐藏域 input 中
6. 当进行打分数据提交时，取用 隐藏域中的值，作为请求参数传输 （服务端处理参数）
7. 检查是否是自己想要的效果，优化处理逻辑
- 核心代码
①. 此为我需要
js代码动态生成的 表格代码部分
// 评分组件定义的 class 为： "label_rate_[唯一标识ID]"
$.each(orderSignLabelArr, function(i,e){
each_append_str +=
' <tr>\n' +
' <td>'+e.parent_label+'</td>\n' +
' <td>'+e.label_name+'</td>\n' +
' <td><div class="label_rate_'+e.label_id+'"></div></td>\n' +
' </tr>\n' ;
});
②. 此为
layer.open()回调成功的success()方法中核心处理代码
/**
* 设计思路：
* 1. 定义一个空数组记录 （为进行记录 标签ID及打分数据）
* 2. 遍历数组 order_sign_label_arr ，渲染 所需显示 评分组件的元素值
* 3. 监听评分事件 choose() 的处理
* 判断当前打分数值是否是已记录的值，如果相同，做置零处理（相当于取消打分）
* 记录每一个打分数据 arr_label_signed[label_id] = value
* 然后，将有打分记录的标签ID和分值，记录到数组 arrSignRes
* 4. 最终，将整合的打分数据，转化成 json 字符串，存储于页面一个隐藏域 input 中
* $("#label_signed").val(JSON.stringify(arrSignRes));
*/
let arr_label_signed = [];
const order_sign_label_arr = result.data.order_sign_label_arr;
layui.use(['rate'], function() {
const rate = layui.rate;
for (var item in order_sign_label_arr) {
const label_id = order_sign_label_arr[item].label_id;
rate.render({
elem: '.label_rate_'+label_id+'',
choose: function(value){
const past_value = arr_label_signed[label_id] ?? 0;
if (value === past_value){
this.value = 0;
value = 0;
}
arr_label_signed[label_id] = value;
const arrSignRes = [];
for(var i=0,len=arr_label_signed.length; i<len; i++) {
if(arr_label_signed[i]){
const signAgainReq = new Object();
signAgainReq.label_id = i;
signAgainReq.label_rate = arr_label_signed[i];
arrSignRes.push(signAgainReq);
}
}
//console.log('arrSignRes',arrSignRes);
$("#label_signed").val(JSON.stringify(arrSignRes));
}
});
}
});
-
最终页面效果
-
经验提示
以上是鄙人在实际业务中的处理步骤，仅做参考；
着重注意的是，对评分组件 render 渲染；
其次，原文档没有对打分取消的描述，所以此处我做了补充，以便 提高友好的交互性
if (value === past_value){
this.value = 0;
value = 0;
}
再者，服务端一定要对传来的参数进行校验处理，毕竟前端来的东西是不能全信的！
- 附录