layer

https://www.layui.com/demo/table/thead.html

 

layer常用方法


layui.config({
        base: '../../js/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var admin = layui.admin;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;

layui 给表邦定数据 


        var tableindex = table.render({
            elem: '#table表名称'
            , url: '/api/地址'
            , height: 'full-168'
            , cellMinWidth: 100
            , method: 'post'
            , page: true
            , limit: 20
            , limits: [10, 15, 20, 30, 40, 50]
            ,totalRow: true
            , contentType: 'application/json'
            ,where: {"Id":Id}
            , cols: [[
                {type: 'numbers', title: '序号', width: 40}

 layui 给表 字段 加上颜色


               , {field: 'Qt', title: '可用', minWidth: 100,templet: function (d) { return ""+ d.Qt+ ""}}

            ]]
            , where: reqForm

  指定tr填充背景色


            ,done:function (res, curr, count) {
                var that = this.elem.next();
                res.data.forEach(function (item, index) {
                    // 所需的条件
                    if (item.Qt&& item.Qt == "可用") {
                        // 添加颜色--#f2f2f2 ;'userName'根据需要填充背景色的field进行更改
                        that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#FBCC90");
                    }                });
            
     
       

遍历所有行 指定行背景颜色

    var table=$('.layui-table');
                if(table.length > 0) {
                    var index = -1;
                    //遍历所有行
                    table.find('tr').each(function () {
                        var qt= $(this).find('th[data-field="Qt"] div').html();
                        if(qt=="行名称")
                        {
                            $(this).find('th[data-field="Qt"]').css("background-color", "#00BFBF");

                        }

                    });

 

下拉框


        window.selectUsers = function () {
            $.ajax({
                type: 'POST',
                url: '/api/selecAll',
                success: function (res) {
                    if (res.code === 0) {
                        $.each(res.data, function (index, item) {
                            $('#userid').append(new Option(item.name, item.Id));
                        })
                        form.val('conditionForm', defaultForm);
                    } else {
                        //layer.alert(res.msg);
                    }
                    layui.form.render("select");
                }
            })
        };

     

  layer弹出窗口


                layer.open({
                    type: 2
                    ,title: '弹窗名称'
                    ,content: '../add.html?id='+data.Id+''
                    ,maxmin: true
                    ,area: ['800px', '750px']
                        ,cancel: function (index, layero) {alert("A");
                         }
                        ,end: function () {alert("B");
                            location.reload();  //layer.open关闭刷新
                        }
                }


              
    监听搜索


        form.on('submit(btn-from-searchs)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('tableid', {
                page: {curr: 1},
                where: field
            });
        });
    });

 

时间下拉框 

layui.use(['form', 'layedit', 'laydate', "jquery"], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , laydate = layui.laydate;

        laydate.render({
            elem: '#startDt',
            format: 'yyyy-MM-dd',

        });

        laydate.render({
            elem: '#endDt',
            format: 'yyyy-MM-dd',

        });
    });

    layui.config({
        base: '../../js/layuiadmin/'
    }).use(['index']).use(['form'], function () {
        var form = layui.form

    });

 

获取URI传参数


    function requestURLS(QueryString){
        var strHref =decodeURI(window.location.href);
        var strParm = "";
        if(strHref.search(/\?/) != -1){
            strHref = strHref.substr(strHref.search(/\?/) + 1);
            strHref = strHref.split(/&/);
            for(var icount = 0; icount < strHref.length; icount++){
                if(strHref[icount].search("^" + QueryString + "=") != -1){
                    strParm = strHref[icount].substr(QueryString.length + 1);
                }
            }
            return (strParm);
        }
        return (strParm);
    }

你可能感兴趣的:(前端)