最近搜索
layui 统一管理。状态 常量。 统一 管理下拉数据。 select radio checkbox
管理员
2025-06-11 22:03
下拉菜单 统一管理
定义js文件。
// 订单状态
const state_config= {
0: '未付款',
1: '待出行',
2: '已完成',
3: '已退订',
4: '已取消'
};
const state_config_color = {
0: '<ber>待付款</ber>', // 待付款-红色
1: '<beg>待出行</beg>', // 待付款-红色
2: '<beb>已完成</beb>', // 待出行-橙色
3: '<zib>已退订</zib>', // 已完成-绿色
4: '已退订' // 已完成-绿色
};
/**
* 接受订单状态的数字 例如 1 2 5 3
* 返回 html格式。 例如 <ber>待付款</ber> 已退订
*/
function get_state_text(value){
return state_config_color[value] ;
}
// 订单状态
// 生成下拉框HTML
function getStateSelectHTML(defaultValue = '') {
let options = '<option value="">全部</option>';
Object.entries(state_config).forEach(([value, text]) => {
options += `<option value="${value}" ${defaultValue===value?'selected':''}>${text}</option>`;
});
return options;
}table这样写。
, {field: 'goDate', title: '出行日期', width: 80, style: 'font-size: 12px;'}
, {field: 'jinbi', title: '赠送金币', width: 60, style: 'font-size: 12px;'}
, {field: 'state', title: '支付状态', width: 90, templet: function(d){
return get_state_text(d.state); // 直接返回含HTML标签的字符串
}, style: 'font-size: 12px;'}
, {field: 'createDateTime', title: '创建时间', width: 140, style: 'font-size: 12px;'}
, {field: 'payDateTime', title: '支付时间', width: 140, style: 'font-size: 12px;'}
view页面这样写。
<script>
var goDate = "[[${#dates.format(order.goDate, 'yyyy-MM-dd')}]]";
var state = [[${order.state}]] ;
function set_week(){
var week = getWeekDay2(goDate);
$("#goDate").html(`${goDate} 【${week}】`);
}
function set_state_text(){
var state_txt = get_state_text(this.state);
console.log(state_txt);
$("#state").html(state_txt);
}
$(function(){
set_week();
set_state_text();
});
</script>
<tr>
<td>支付状态</td>
<td id="state">[[${order.state}]]</td>
</tr>
manage管理 页面下拉查询这样写。
// 动态插入选项（需在DOM加载后执行）
$('#state').html(getStateSelectHTML());
修改页面这样写。
// 动态插入选项（需在DOM加载后执行）
$('#recommend').html(getPositionSelectHTML());
if ("[[${goods?.recommend}]]" != "") {
$("#recommend").val("[[${goods?.recommend}]]");
}
form.render(); //更新全部表单
<div class="layui-inline">
<label class="layui-form-label">推荐位置</label>
<div class="layui-input-inline" style="width: 120px">
<select name="recommend" id="recommend" lay-filter="recommend">
</select>
</div>
</div>
多选框 统一管理
js文件
// jifen状态 getStateSelectHTML方法要用 1转出 2转入
const goods_recommend = {
a1: 'a1',
a2: 'a2',
a3: 'a3',
a4: 'a4',
a5: 'a5',
a6: 'a6',
a7: 'a7',
a8: 'a8',
a9: 'a9',
a10: 'a10',
a11: 'a11',
a12: 'a12',
a13: 'a13',
a14: 'a14',
a15: 'a15',
a16: 'a16',
a17: 'a17',
a18: 'a18',
a19: 'a19',
a20: 'a20',
a21: 'a21',
};
// jifen状态 设置状态 生成下拉框HTML order_manage.html 有下拉查询。
function get_goods_recommend_checkbox_html(defaultValue = '') {
let options = '';
Object.entries(goods_recommend).forEach(([value, text]) => {
// options += `<option value="${value}" ${defaultValue===value?'selected':''}>${text}</option>`;
options += `<input type="checkbox" ${defaultValue===value?'checked=""':''} name="like" value="${text}" title="${text}">`;
});
return options;
}添加修改页面这样写。
<script th:inline="javascript">
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel',
'upload', 'element', 'form'], function () {
var laydate = layui.laydate //日期
, laypage = layui.laypage //分页
, layer = layui.layer //弹层
, form = layui.form
, table = layui.table //表格
, carousel = layui.carousel //轮播
, upload = layui.upload //上传
, element = layui.element; //元素操作
table_ = table;
form_ = form;
// 动态插入选项（需在DOM加载后执行）
$('#recommend').html(get_goods_recommend_checkbox_html());
if([[${goods?.recommend}]]!=null){
$($.map([[${goods?.recommend}]].split(','),function(item){
return ':checkbox[name="like"][value="'+item+'"]';
}).join()).prop('checked',true)
}
form.render(); //更新全部表单
function save() {
var index = layer.msg('提交中，请稍候', {
icon: 16,
time: false,
shade: 0.8
});
var title = $("#title").val();
var tag = $("#tag").val();
var price = $("#price").val();
var recommend = $("input:checkbox[name='like']:checked").map(function(index,elem) {
return $(elem).val();
}).get().join(',');管理页面这样写
,{field:'recommend', title: '推荐位置', width:90,style:'font-size: 12px;' }单选框配置
js文件
// 1扫码预览pdf 2扫码查看页面
const blog_type_config= {
1: '扫码预览pdf',
2: '扫码查看页面'
};
//jifen状态 layui-table 展示数据 格式化数据用的 ber beg beb zib orange2
const blog_type_config_color = {
1: '<beg>扫码预览pdf</beg>', // 待付款-红色
2: '<beb>扫码查看页面</beb>', // 待付款-红色
9: '<zib>1</zib>', // 待付款-红色
5: '<orange2>1</orange2>', // 待付款-红色
6: '<orange2>1</orange2>', // 待付款-红色
};
function get_blog_type_text(value){
// return state_config[value] ;
return blog_type_config_color[value] ;
// return `<span class="${state_config_color[value]}">${state_config[value]}</span>`;
}
// 设置状态 生成下拉框HTML order_manage.html 有下拉查询。
function get_blog_type_select_html(defaultValue = '') {
let options = '<option value="">全部</option>';
Object.entries(blog_type_config).forEach(([value, text]) => {
options += `<option value="${value}" ${defaultValue===value?'selected':''}>${text}</option>`;
});
return options;
}
// 生成单选框 添加和修改页面用。 如果defaultValue是空 选择第一个。
function get_blog_type_radio_html(defaultValue = '') {
let options = '';
let isFirst = true;
Object.entries(blog_type_config).forEach(([value, text]) => {
let checked = '';
// 如果 defaultValue 为空且是第一个选项，或者 defaultValue 等于当前值
if ((defaultValue === '' && isFirst) || defaultValue === value) {
checked = 'checked=""';
}
options += `<input type="radio" ${checked} name="blog_type" value="${value}" title="${text}">`;
isFirst = false;
});
return options;
}添加和修改页面
<script src="/js/layui/layui_blog_type.js?v=v1111211"></script>
<div class="layui-form-item">
<label class="layui-form-label">打开类型</label>
<div id="blogType" class="layui-input-block" >
</div>
</div>
<script th:inline="javascript">
layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
'upload', 'element' , 'form'], function() {
var laydate = layui.laydate //日期
, laypage = layui.laypage //分页
,layer = layui.layer //弹层
,form= layui.form
, table = layui.table //表格
, carousel = layui.carousel //轮播
, upload = layui.upload //上传
, element = layui.element; //元素操作
table_ =table ;
form_ = form;
// 动态插入选项（需在DOM加载后执行）
if ([[${blog?.type}]] != null) {
//这里强制弄成字符串 后面加个空字符串。
$('#blogType').html(get_blog_type_radio_html([[${blog?.type}]]+""));
}else{
$('#blogType').html(get_blog_type_radio_html());
}
form.render(); //更新全部表单
});
</script>
获取值。：
var type = $('input[name="blog_type"]:checked').val();manage页面
, {field: 'type', title: '打开类型', width: 90, templet: function(d){
return get_blog_type_text(d.type); // 直接返回含HTML标签的字符串
}, style: 'font-size: 12px;'}
<label class="layui-form-label" style="widt联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组