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;
}
再者,服务端一定要对传来的参数进行校验处理,毕竟前端来的东西是不能全信的!