• layui之普通数据表格显示switch选择表单组件


    先看效果:

    一般这写什么switch组件,下拉框组件只在表单显示,如果要在其他地方显示就要注意一下细节

    默默跳槽一下这个layui,真的蛋疼,每次用它东西都要各种设置东西,无语

    接下来看下代码:

    HTML代码

    <table class="layui-table layui-form" id="" >注意!!!这边的样式,要用表单的那些组件一定要有这个class样式:layui-form,要不然会调试的头皮发麻
            <thead>
                <tr>
                    <th>序号</th>
                    <th>纬度</th>
                    <th>预算kpi</th>
                    <th>项目说明</th>
                    <th>选择模板项目</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    js代码

    //你要用layui的form组件就要在use里面加个form,这个use你可以理解为初始化

    layui.use(["element", "laypage", "layer","form"], function () {

     var form = layui.form;
      form.render();//细节!!!和下面那个一样,

    function render(curr) {
        currentPage = curr;
        $.ajax({
            type: "get",
            url: "/xx/xx/xx/findPage",
            data: {
                type: type,
                currentPage: currentPage, 
                pageSize: pageSize},
            success: function (result) {
                if (result.status == 0) {
                    $(".layui-table tbody").html("");
              
                    $.each(result.data.pageContent, function (index, obj) {
                       var objStr = """ + obj.code + """;
                       var i= parseInt(index)+1+(parseInt(currentPage)-1)*parseInt(pageSize);
                        var str = "<tr>" +
                            "<td>" + i + "</td>" +
                            "<td>" + obj.groupName + "</td>" +
                            "<td>" + obj.kpiName + "</td>" +
                            "<td>" + obj.remark + "</td>" +
                            "<td>" +" <input type='checkbox' name='check' "+obj.check+"  title='模板项目'  value="+objStr+">" +                    
                            "</td></tr>";//这一句就是拼接起来的组件
                        $(".layui-table tbody").append(str)
                    });
                    form.render();//细节!这个好像要渲染一下!
                }
                if (result.message != null) {
                    layer.msg(result.message)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('{"status":"' + XMLHttpRequest.status + '","readyState":"' + XMLHttpRequest.readyState + '","textStatus":"' + textStatus + '","errorThrown":"' + errorThrown + '"}')
            }
        })
    }
     })
     
  • 相关阅读:
    使用虚拟环境virtualenv/Virtualenvwrapper隔离多个python
    计算机硬件基本知识及Linux的常用命令
    网络电子时钟系统案例
    地铁时钟系统介绍
    北斗校时服务器装置介绍
    网络电子时钟系统成功案例
    高精度统一时钟基准特点
    IEEE1588 PTP对时系统原理及特点
    GPS轨迹发生模拟器介绍
    python urllib模块
  • 原文地址:https://www.cnblogs.com/bbllw/p/10141822.html
Copyright © 2020-2023  润新知