重工电子论坛

标题: LayUI使用笔记 [打印本页]

作者: 李维强-15级    时间: 2017-11-21 20:57
标题: 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
添加类似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级    时间: 2018-4-19 17:21
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
本帖最后由 李维强-15级 于 2019-4-13 17:50 编辑

layui2.4.zip (1.73 MB, 下载次数: 3)
页面底部的设置尤为关键

  <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) layuiAdmin std v1.x 【iframe版】.pdf (786.26 KB, 下载次数: 4)
作者: 李维强-15级    时间: 2019-4-14 20: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
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级    时间: 2019-4-27 12:27
本帖最后由 李维强-15级 于 2019-4-27 12:32 编辑

点击表格后,让某一行变色的操作
[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级    时间: 2019-4-27 12:31
在表格渲染完后,再添加特定的行
这里需要在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.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
layuiadmin左侧增加四级菜单     (导航默认是三级)
https://download.csdn.net/download/sinat_26708145/10825149




欢迎光临 重工电子论坛 (http://cqutlab.cn/) Powered by Discuz! X3.1