最近搜索
layui table 勾选 选中 变色
管理员
2026-08-23 09:00
<script th:inline="none">
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel',
'upload', 'element'], function () {
var laydate = layui.laydate //日期
, laypage = layui.laypage //分页
, layer = layui.layer //弹层
, dropdown = layui.dropdown
, form = layui.form
, table = layui.table //表格
, carousel = layui.carousel //轮播
, upload = layui.upload //上传
, element = layui.element; //元素操作
table.render({
elem: '#table'
, url: '/admin/order/list'
, height: 'full-100'
, cols: [[
{checkbox: true, fixed: true}
, {field: 'id', title: 'ID', width: 60, style: 'font-size: 12px;' }
, {field: 'orderNum', title: '订单号', width: 60, style: 'font-size: 12px;' }
, {field: 'imageUrl', title: '封面', width:60, templet: '#format_imageUrl', style: 'font-size: 12px;'}
, {field: 'title', title: '酒店名称', width: 120, style: 'font-size: 12px;' , templet: '#format_goods_name'}
, {field: 'taocan', title: '套餐名称', width: 70, style: 'font-size: 12px;' , templet: '#format_taocan' }
, {field: 'dingjin', title: '已付支付', width: 60, style: 'font-size: 12px;', templet: '#format_zhifu' }
, {field: 'amount', title: '订单总金额', width: 70, style: 'font-size: 12px;', templet: '#format_amount2' }
, {field: 'tuiJine', title: '退款金额', width: 60, style: 'font-size: 12px;'}
, {field: 'wei', title: '尾款', width: 60, style: 'font-size: 12px;', templet: '#format_wei'}
, {field: 'night', title: '几房', width: 60, style: 'font-size: 12px;' , templet: '#format_fang'}
, {field: 'personNum', title: '人数', width: 50, style: 'font-size: 12px;'}
, {field: 'trueName', title: '领队人', width: 60, style: 'font-size: 12px;'}
, {field: 'phone', title: '电话', width: 60, style: 'font-size: 12px;'}
, {field: 'to', title: '临近出行', width: 60, style: 'font-size: 12px;', templet: '#format_to'}
, {field: 'goDate', title: '出行日期', width: 80, style: 'font-size: 12px;'}
, {field: 'isSend', title: '发送酒店', width: 60, style: 'font-size: 12px;', templet: '#format_isSend'}
, {field: 'sendDateTime', title: '发送时间', width: 120, style: 'font-size: 12px;' }
, {field: 'state', title: '状态', width: 60, templet: function(d){
return get_state_text(d.state); // 直接返回含HTML标签的字符串
}, style: 'font-size: 12px;'}
, {field: 'shouhou', title: '售后', width: 60, style: 'font-size: 12px;', templet: function(d){
return get_shouhou_text(d.shouhou); // 直接返回含HTML标签的字符串
}}
, {field: 'tuiId', title: '业务员', width: 60, style: 'font-size: 12px;' , templet: '#format_tuiId'}
, {field: 'address', title: '位置', width: 80, style: 'font-size: 12px;'}
, {field: 'createDateTime', title: '创建时间', width: 140, style: 'font-size: 12px;'}
, {field: 'updateDateTime', title: '修改时间', width: 140, style: 'font-size: 12px;'}
, {field: 'payDateTime', title: '支付时间', width: 140, style: 'font-size: 12px;'}
, {field: 'remark', title: '备注', width: 70, style: 'font-size: 12px;'}
, {field: 'editInfo', title: '修改记录', width: 70, style: 'font-size: 12px;'}
, {field: 'fangChaNum', title: '房差', width: 70, style: 'font-size: 12px;'}
,{field:'state', title: '结算商户', width:60,style:'font-size: 12px;',templet: '#format_merchant' }
, {field: 'xianjin', title: '现金', width: 70, style: 'font-size: 12px;'}
, {field: 'jiudianJine', title: '酒店收款', width: 70, style: 'font-size: 12px;'}
, {field: 'chajia', title: '差价', width: 70, style: 'font-size: 12px;'}
, {field: 'youhui', title: '优惠', width: 70, style: 'font-size: 12px;'}
, {fixed: 'right', width: 60, title: '操作', toolbar: '#table_bar'}
]]
, id: 'table'
, page: true
, limits: [100, 200, 300, 400, 500, 1000, 2000, 3000],
limit: 100,
// 核心：表格渲染完成后，自定义合计行计算
done: function(res, curr, count) {
dropdown.render({
elem: '.demolist' //可绑定在任意元素中，此处以上述按钮为例
, data: [
{
title: '详情'
, id: 1
, href: '#'
},
{
title: '修改状态'
, id: 2
, href: '#'
},
{
title: '修改业务员'
, id: 3
, href: '#'
},
{
title: '延长过期'
, id: 4
, href: '#'
},
{
title: '转移支付'
, id: 5
, href: '#'
}
]
, click: function (data, obj) {
console.log('下拉菜单ID:', data.id);
if (data.id == 1) {
view(table_list_id);
}
if (data.id == 2) {
set_state(table_list_id);
}
if (data.id == 3) {
edit_ywy(table_list_id);
}
if (data.id == 4) {
edit_guoqi(table_list_id);
}
if (data.id == 5) {
move_pay(table_list_id);
}
}
});
}
});
// ========== 监听checkbox勾选事件 ==========
table.on('checkbox(table)', function(obj){
var tr = obj.tr; // 获取当前行的DOM元素
if(obj.type === 'all'){
// 全选/取消全选：批量处理所有行
var checkStatus = table.checkStatus('table');
var data = checkStatus.data;
// 先清空所有行的选中样式
$('.layui-table-body .layui-table-tr-selected').removeClass('layui-table-tr-selected');
// 给选中的行添加样式
if(data.length > 0){
$.each(data, function(index, item){
$('tr[data-index="'+ item.LAY_TABLE_INDEX +'"]').addClass('layui-table-tr-selected');
});
}
}else{
// 单行勾选/取消勾选
if(obj.checked){
// 勾选：添加样式
tr.addClass('layui-table-tr-selected');
}else{
// 取消勾选：移除样式
tr.removeClass('layui-table-tr-selected');
}
}
});
//常规用法
laydate.render({
elem: '#date1'
});
//常规用法
laydate.render({
elem: '#date2'
});
//常规用法
laydate.render({
elem: '#go_date1'
});
//常规用法
laydate.render({
elem: '#go_date2'
});
// 动态插入选项（需在DOM加载后执行）
$('#state').html(getStateSelectHTML());
// if ("[[${goods?.recommend}]]" != "") {
// $("#recommend").val("[[${goods?.recommend}]]");
// }
//监听单元格编辑
table.on('edit(table)', function (obj) {
var value = obj.value //得到修改后的值
, data = obj.data //得到所在行所有键值
, field = obj.field; //得到字段
//layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
table_edit_update(data.id, field, value);
});
var table_list_id = 0;
//监听工具条 table_bar
table.on('tool(table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'more') {
console.log(data.id);
table_list_id = data.id;
}
});
form.on('select(state)', function (data) {
reload_data();
});
form.on('select(goodsBigTypeId)', function (data) {
reload_data();
});
form.render(); //更新全部表单
});
</script>联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组