论坛 › WEB前端 › LayUI使用笔记

李维强-15级 发表于 2017-11-21 20:57:20

LayUI使用笔记

本帖最后由 李维强-15级 于 2018-3-25 22:18 编辑

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

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

李维强-15级 发表于 2018-3-25 01:46:28

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

在jquery文件里面 最后加入
$.fn.loadForm = function (data) {
    if (Object.prototype.toString.call(data) === '') {
      data = eval('(' + data + ')');
    }
    var form = $(this);
    for (var name in data) {
      var value = data;
      var cc = form.find('input, input');
      if (cc.length) {
            cc.each(function () {
                if (isChecked($(this).val(), value)) {
                  $(this).attr('checked', true);
                }
            });
      } else {
            form.find('input').val(value);
            form.find('textarea').val(value);
            form.find('select').val(value);
      }
    }
    function isChecked(val, value) {
      if (val == String(value) || $.inArray(val, $.isArray(value) ? value : ) >= 0) {
            return true;
      } else {
            return false;
      }
    }
}

李维强-15级 发表于 2018-4-19 17:21:12

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

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

李维强-15级 发表于 2019-2-28 16:00:44

本帖最后由 李维强-15级 于 2019-4-13 17:50 编辑


页面底部的设置尤为关键

<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 和之前一样

李维强-15级 发表于 2019-4-14 20:07:07

本帖最后由 李维强-15级 于 2019-4-14 20:17 编辑

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

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

李维强-15级 发表于 2019-4-19 21:31:34

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

李维强-15级 发表于 2019-4-27 12:27:07

本帖最后由 李维强-15级 于 2019-4-27 12:32 编辑

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

      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级 发表于 2019-4-27 12:31:53

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

            , 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.GCL * (res.data.CLDJ + res.data.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级 发表于 2022-8-9 11:53:21

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

查看完整版本: LayUI使用笔记