layuirate（评分组件）使⽤的⼀点经验分享背景
这⼏天在做管理后台的功能开发时
需要添加⼀个可以进⾏ 标签打分的模块，⽅便后期对接单⼈员的 信息收集
根据需求，我选取的是常⽤的 layui.rate 组件
在嵌⼊页⾯是发现：
如果直接在页⾯上进⾏显⽰，按照⽂档指导是很容易实现的
但是，当前项⽬毕竟是在前⼈开发的代码基础上进⾏优化
此时，代码处理逻辑为 js-post 请求回调后
并且使⽤了 layer.open() 弹窗，在表格中进⾏显⽰
那么，就会出现 layui.rate 组件渲染不完整或失效的情况
操作步骤
1. ⾸先，引⼊ layui 前端框架的 js、css 是前提
2. js 代码，动态⽣成打分模块的 html 代码
3. layer.open() 回调成功 success() ⽅法中，进⾏ der() 的渲染
4. 实现 der() 中的 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';
前端ui框架是什么意思
});
②. 此为 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 = der_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;
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;
}
再者，服务端⼀定要对传来的参数进⾏校验处理，毕竟前端来的东西是不能全信的！
附录

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。