当前位置: 首页 > news >正文

layui实现数据列表的复选框回显

layui版本2.8以上

实现效果如图:

<input type="hidden" name="id" id="id" value="{:g_val( 'id',0)}">
<div id="tableDiv"><table class="layui-hide" id="table_list" lay-filter="table_list"></table>
</div><script src="layui/layui.js"></script>
//方法级渲染table.render({elem: '#table_list', url: "/admin/****/****_search", cols: [[{type:'checkbox'},{field: 'name', title: '设备名称', width: 200}, {field: 'model_number', title: '设备型号', width: 200}, {field: 'merchant_name', title: '所属商户', width: 200}, {field: 'status', title: '设备状态', width: 120}, {field: 'remark', title: '备注', width: 200}, {field: 'create_time', title: '创建时间', width: 250}, {field: 'update_time', title: '更新时间', width: 250}]]// , page: true// , limit: 30// , height: document.documentElement.offsetHeight - 100, height:  'full-180'  // 表格高度根据浏览器自适应, page: false// 取消分页时使用, limit: Number.MAX_VALUE// 取消分页时使用, done: function (res, curr, count) {$("[data-field='status']").children().each(function () {if ($(this).text() == '1') {$(this).text("播放中")} else if ($(this).text() == '2') {$(this).text("休息中")}});$("[data-field='deleted']").children().each(function () {if ($(this).text() == '1') {$(this).text("正常")} else if ($(this).text() == '0') {$(this).text("禁用")}});$.ajax({url: "/admin/****/get****",type: "post",data: { id: $('#id').val()},success: function (data) {//遍历ajax返回的结果//打印出data的格式为数组实例:[1,2,3,6]for (var i = 0; i < data.length; i++) {//遍历数据表格$.each(res.data, function (index, row) {//判断ajax返回的id是否与数据行中的id相等if (row.id == data[i]) {// console.log(row.LAY_INDEX);// console.log(row.LAY_TABLE_INDEX);$('#tableDiv tr[data-index=' + row.LAY_INDEX + '] input[type="checkbox"]').next().eq(0).click();$('#tableDiv tr[data-index=' + row.LAY_INDEX + '] input[type="checkbox"]').next().eq(1).click();}})}}});}});

http://www.lryc.cn/news/149968.html

相关文章:

  • 关于使用RT-Thread系统读取stm32的adc无法连续转换的问题解决
  • 【启扬方案】启扬多尺寸安卓屏一体机,助力仓储物料管理系统智能化管理
  • Android Glide使用姿势与原理分析
  • 管理类联考——逻辑——汇总篇——知识点突破——形式逻辑——联言选言——真假
  • ChatGPT数据分析及作图插件推荐-Code Interpreter
  • 说说FLINK细粒度滑动窗口如何处理
  • 记一次反弹shell的操作【非常简单】
  • 如何排查 Flink Checkpoint 失败问题?
  • lazarus(pascal)和c语言读日志文件筛选保存为新文件
  • 学习JAVA打卡第四十九天
  • Golang数据结构和算法
  • python 装饰器
  • iOS如何获取设备型号的最新方法总结
  • SpringBoot之RestTemplate使用Apache的HttpClient连接池
  • 第49节:cesium 倾斜模型osgb转3dtiles,并加载(含源码+视频)
  • 零信任安全模型详解:探讨零信任安全策略的原理、实施方法和最佳实践,确保在网络中实现最小特权原则
  • 01_nodejs简介
  • 企业架构LNMP学习笔记4
  • 探索UniApp分包
  • uniapp 支持图片放大
  • Oracle数据泵备份恢复(导出导入)详细语句
  • 【JS案例】JS实现积分抽奖(内附源码)
  • angular抛出 ExpressionChangedAfterItHasBeenCheckedError错误分析
  • 动态链接库的__declspec(dllexport)关键字的概念
  • 群晖NAS:DS Video、Jellyfin等视频电影电视剧海报、背景墙搜刮器
  • WEBGL(3):鼠标动态绘制点
  • Sass基础
  • Java中的消息队列有哪些?
  • 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比
  • 测试用例编写规范参考