重工电子论坛

?找回密码
?立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 770|回复: 7
打印 上一主题 下一主题

LayUI使用笔记

[复制链接]

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
跳转到指定楼层
楼主
发表于 2017-11-21 20:57:20 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 李维强-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改为实际目录即可

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
沙发
?楼主| 发表于 2018-3-25 01:46:28 | 只看该作者
添加类似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;
        }
    }
}

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
板凳
?楼主| 发表于 2018-4-19 17:21:12 | 只看该作者
fa图标使用
先引

然后直接CSS用

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

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
地板
?楼主| 发表于 2019-2-28 16:00:44 | 只看该作者
本帖最后由 李维强-15级 于 2019-4-13 17:50 编辑

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

??
??

实际上的目录为两者相加../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, 下载次数: 1)

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
5#
?楼主| 发表于 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

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
6#
?楼主| 发表于 2019-4-19 21:31:34 | 只看该作者
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更新后的写法

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
7#
?楼主| 发表于 2019-4-27 12:27:07 | 只看该作者
本帖最后由 李维强-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赋值给全局变量,让之前变色的行恢复颜色
            }

236

主题

580

帖子

3479

积分

学生管理组

Rank: 8Rank: 8

积分
3479
8#
?楼主| 发表于 2019-4-27 12:31:53 | 只看该作者
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; temphtml += '' + '' + '' + '' + ''; $('tbody').append($(temphtml)); }
在表格渲染完后,再添加特定的行
这里需要在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 = '
税金' + sum.toFixed(2) + '' + (TaxRate * 100).toFixed(2) + '%' + tax.toFixed(2) + '
合计' + (tax + sum).toFixed(2) + '
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|cqutlab ( 渝ICP备15004556号 )?

GMT+8, 2019-10-23 11:57365棋牌首充50送50 , Processed in 0.106767 second(s), 30 queries .

Powered by Discuz! X3.1

? 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表