• Layui中使用table组件时让某些行的checkbox自动选中


    在使用layui框架时,数据表格是经常使用的一个组件,一般在表格的左侧会有checkbox可以用来勾选当前行的数据,但是checkbox一般是由用户自己手动勾选的,那遇到需要自动勾选的情况怎么办呢?

    如果使用dom操作来控制checkbox选中是没有问题的,但是在使用layui的api方法时会获取不到此条被选中的数据,解决该问题的方法有两个。

    修改数据方法

    在表格的json数据中设置LAY_CHECKED为true,表格上的对应行的checkbox就是选中状态了。

    const data = [
      { id: 1, name: '张三', LAY_CHECKED: true },
      { id: 2, name: '李四', LAY_CHECKED: false },
      { id: 3, name: '王五', LAY_CHECKED: true }
    ]
    

    修改变量方法

    如果返回的数据里没有LAY_CHECKED属性呢?那么我们就需要修改layui里监控checkbox选中的变量了。

    layui.use('table', function() {
        var $ = layui.$;
        var table = layui.table;
        // 修改变量
        table = $.extend(table, {
          config: {
            checkName: 'isChecked'
          }
        });
        // 渲染table
        table.render({
            ...
        });
    });
    

    这样一来,我们就根据json中控制checkbox选中的变量名称来修改代码就可以了。

    如有错误,请多指教,谢谢!

  • 相关阅读:
    C++ 纸牌 今日头条面试题
    c++ 病句 今日头条面试题
    C++ 球迷 今日头条面试题
    C++ 活动安排
    C++ 弗洛伊德算法
    填坑 bzoj3337
    bzoj3884 上帝与集合的正确用法
    人参中第一次膜你退货
    洛谷P2216 [HAOI2007]理想的正方形
    洛谷 P1099 树网的核+P2491 [SDOI2011]消防
  • 原文地址:https://www.cnblogs.com/ykCoder/p/12924874.html
Copyright © 2020-2023  润新知