LayUI使用笔记

李维强-15级

官网地址：http://www.layui.com/

实际上可以用的的地址：  http://kit.zhengjinfan.cn/下载地址http://git.oschina.net/besteasyteam/kit_admin上面东西后
引用路劲会出错 需要在地方引用会出错， 所以分别在layui/build/js/kitconfig.js里面，把那个resourcePath改为实际目录即可

李维强-15级

添加类似easyui里面的from.load方法

在jquery文件里面 最后加入

[JavaScript] syntaxhighlighter_viewsource syntaxhighlighter_copycode

$.fn.loadForm = function (data) {
    if (Object.prototype.toString.call(data) === '[object String]') {
        data = eval('(' + data + ')');
    }
    var form = $(this);
    for (var name in data) {
        var value = data[name];
        var cc = form.find('input[name="' + name + '"][type=radio], input[name="' + name + '"][type=checkbox]');
        if (cc.length) {
            cc.each(function () {
                if (isChecked($(this).val(), value)) {
                    $(this).attr('checked', true);
                }
            });
        } else {
            form.find('input[name="' + name + '"]').val(value);
            form.find('textarea[name="' + name + '"]').val(value);
            form.find('select[name="' + name + '"]').val(value);
        }
    }
    function isChecked(val, value) {
        if (val == String(value) || $.inArray(val, $.isArray(value) ? value : [value]) >= 0) {
            return true;
        } else {
            return false;
        }
    }
}

李维强-15级

fa图标使用
先引
<link rel="stylesheet" href="~/Content/layui/plugins/font-awesome/css/font-awesome.min.css" media="all">
然后直接CSS用

图标具体在这里
http://www.fontawesome.com.cn

李维强-15级

layui2.4.zip (1.73 MB, 下载次数: 3)

2019-2-28 15:56 上传

点击文件名下载附件

页面底部的设置尤为关键

  <script src="layui/layui.js"></script>
  <script>
  layui.config({
      base: '../' //静态资源所在路径 也就是当前文件夹之前的父级目录
  }).extend({
      index: 'layui2.4/lib/index' //主入口模块
  }).use('index');
  </script>

实际上的目录为两者相加../layui2.4/lib/index  这样~~~~
也可以这样组合
  layui.config({
      base: './' //静态资源所在路径 也就是当前文件夹目录
  }).extend({
      index: 'lib/index' //主入口模块
  }).use('index');

这样也可以 ，./表示当前目录下，然后组合起来就是./lib/index 和之前一样


layuiAdmin.std-v1.1.0.zip (3.6 MB, 下载次数: 0)

2019-4-13 17:04 上传

点击文件名下载附件

layuiAdmin std v1.x 【iframe版】.pdf (786.26 KB, 下载次数: 4)

2019-4-13 17:49 上传

点击文件名下载附件

李维强-15级

LAYUI上传显示进度条示例
https://blog.csdn.net/qq_36311372/article/details/82117417

https://www.cnblogs.com/youmingkuang/p/9183528.html

李维强-15级

form表单内，select下拉的选中方法
先加selected的属性，然后再form.render刷新一下
            $("select[name=state]").find("option[value='" + state + "']").attr("selected", true);
            form.render();
            //layui.form().render(); //这是1.0的写法
            //layui.form.render();  //这是2.0更新后的写法

李维强-15级

点击表格后，让某一行变色的操作

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

        table.on("tool(表格ID)", function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
	    if (layEvent == 'Edit') {   //这里是消息回调
                $(tr).css("background-color", "#90EE90");//这里直接设置CSS即可变色
                $(temptr).css("background-color", "white");//让之前变色的行恢复颜色
                temptr = tr;//这里把当前tr赋值给全局变量，让之前变色的行恢复颜色
            }

李维强-15级

在表格渲染完后，再添加特定的行
这里需要在table.render最后加入done的回调，下面直接给出项目中的例子，这里是添加了2行数据在表格内

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //curr是表示当前页码
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                var sum = 0;
                var tax = 0;
                for (var i = 0; i < res.data.length; i++) {
                    sum += res.data[i].GCL * (res.data[i].CLDJ + res.data[i].RGDJ);
                }
                if ("" == $("#TaxRate").val()) {
                    TaxRate = 0.033;
                } else {
                    TaxRate = $("#TaxRate").val();
                }
                tax = sum * TaxRate;
                var temphtml = '';
                temphtml = '<tr>' +
                    '<td align="center">税金</td>' +
                    '<td align="center"></td>' +
                    '<td align="center">元</td>' +
                    '<td align="center">' + sum.toFixed(2) + '</td >' +
                    '<td align="center">' + (TaxRate * 100).toFixed(2) + '%</td>' +
                    '<td align="center"></td>' +
                    '<td align="center"></td>' +
                    '<td align="center"></td>' +
                    '<td align="center">' + tax.toFixed(2) + '</td>' +
                    '<td align="center"></td>' +
                    '<td align="center"></td>' +
                    '</tr>';
                temphtml += '<tr style="background-color:#B0E0E6;">' +
                    '<td align="center" colspan="8">合计</td>' +
                    '<td align="center">' + (tax + sum).toFixed(2) + '</td>' +
                    '<td align="center" colspan="2"></td>' +
                    '</tr>';
                $('tbody').append($(temphtml));
            }

李维强-15级

layuiadmin左侧增加四级菜单     （导航默认是三级）
https://download.csdn.net/download/sinat_26708145/10825149

李维强-15级

表格hover效果：
在头部样式

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

        .layui-table-hover {
            background-color: deepskyblue !important;
            
        }
        .myTableCrossColor {
            background-color: #D1EEEE;
        }

表格加载后

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

            done: function (res, curr, count) {
                var that = this.elem.next();
                if (res.data.length == 0) {
                    return;
                }
                res.data.forEach(function (item, index) {
                    if (index % 3 == 0) {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").addClass("myTableCrossColor");
                    } else {
                        //var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", 'white');
                    }
                })


            }