精华内容
下载资源
问答
  • Layui简介、layui例子

    2021-06-19 08:06:28
    Layui简介 什么是LayuiLayui(谐音:类UI)是一套开源的WebUI解决方案,采用自身经典的模块化规范,并遵循原生HTML/CSS/JS的开发方式,说明不会像我们之前的Bootstrap里面的js依赖jQuery。Layui则是原生的不会...

    Layui简介

    什么是Layui?

    Layui(谐音:类UI)是一套开源的WebUI解决方案,采用自身经典的模块化规范,并遵循原生HTML/CSS/JS的开发方式,说明不会像我们之前的Bootstrap里面的js依赖jQuery。Layui则是原生的不会依赖于jQuery,也不会依赖于其他的插件

    注意:它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,(它是WebUI的前端框架,但是它更多的是面向后端的开发者)

    Bootstrap面向的是前端的一个开发,Layui更多的是面向后端的一个开发

    【详情见Layui手册】

    Layui手册与Bootstrap框架大致一样,但也有许多不同的地方,具体的见Layui手册

    Layui手册里面有许多的元素,则自行去手册里面看,与Bootstrap的差不多,这次讲以后的项目中大量能用到的

    Layer既可以做为一个内置模块使用,也可以做为独立组件使用。如果你要是用独立组件除了引入layer.js还要引入jquer3.2.1.min.js的一个插件

    Layui例子

    弹出层

    先新建一个项目

    Layer作为layui的内置模块使用,他只需要引入layui.js和layui.css

    引入插件之后,定义一个保存layer弹出层模块的变量,然后加载模块;如果你是要用layui里面的模块,都需要把这个模块进行加载,不能直接使用

    加载模块里面有两个参数,一个是你要加载的模块,一个是回调函数,如果要加载多个模块,则把要加载的模块放到一个数据里面,加载一个模块则不需要放到数组里面

    在把layui中的layer弹出层模块加载了,然后在输出一个弹出层即可(见图表1)

    图表 1

    这是一个简单的弹出层,在Layui手册里面还有其他的样式内容,比如title - 标题、content - 内容、offset - 坐标等等。(见图表2

    图表 2

    弹出层写完了,现在开始看一下,弹出层里面的按钮(见图表3)

     

    图表 3

    日期

    新建一个视图,把插件引入进来,这里多引入一个bootstrap.min.css的插件

    在页面中添加一个或者两个input日期(见图表4)

    图表 4

    Callback等于回调函数

    先定两个变量

    加载layDate模块,

    执行一个laydate实例

    注意:所有的配置项都是写在花括号里面的(见图表5)

     

    图表 5

    表格

    还是和之前一样,新创一个视图,把相对应的插件引入进去

    这次的表格和之前写的表格不同,之前写的表格是在HTML里面通过行和列创建表格,这次使用layui插件去写,就是要在HTML里面放一个table即可,给它一个id。就不需要去写里面的行和列,(见图表6)

    图表 6

    先定义layer、layTable两个全局变量,通过var声明两个变量,变量的名称可以自定义。

    变量定义好了之后,加载Table的模块,可能后面我们会需要用到layer弹出层的模块,我们也一起加载了。(见图表7)

    !!!注意:加载模块中的关键字是固定的,不能顺便修改,或修改给一个数据

     

    图表 7

    Layui对我们的表格做了三种渲染方式,让我们更方便和快速的去写表格

     

     

    方式

    机制

    适用场景

    01.

    方法渲染

    JS方法的配置完成渲染

    (推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。

    02.

    自动渲染

    HTML配置,自动渲染

    无需写过多 JS,可专注于 HTML 表头部分

    03.

    转换静态表格

    转化一段已有的表格元素

    无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可

    我们这次用的是方法渲染(见图表8)

    1、方法渲染有几个必填参数:

    1)、elem:指定原始table容器的选择器或DOM

    2)、cols:表头的配置

    3)、url:采用异步数据接口相关参数,url是必填的,不采用异步接口,url可不填(这个url和异步里面的url是一样的)

    2、表头里面的参数

    1、title:标题的名称

    2、field:字段名。(字段名的设定非常重要,且是表格数据列的唯一标识,如果你是要使用数据库里面的数据,最好与你的数据库里面的名称对应)

    3、width:宽高

    4、type:设定列类型 {normL:常规列,无需设定;checkbox:复选框;radio:单选框;numbers:序号列;space:空列}

    图表 8

    如果你想要看一下你创建的表格没有没有显示那就在下面添加一个data[ ],data:加载本地数据

    运行项目检查代码,我们要layui表格在HTML里面就写了图表6这一句代码,里面什么多没有。但我们使用layui里面方法的渲染,在下面多了一个div,里面就添加了一整张表格,里面包括行和列

    配置好了之后我们就要去找数据,要么在data[ ]里面传入一些数据,要门就通过异步。我们还是用我们熟悉的异步

    在控制器里面去写查询语句,在这之前要把数据库里面的数据引入到Models里面,引入过来之后要实例化(见图表9)

    图表 9

    实例化之后定一个方法

    查询数据则通过LINQ标准数据查询,代码执行到这一句不会去查询,如果想要代码执行到这一句就去查询,在后面加一个ToList(),强行把数据查询出来(见图表10)然后进行返回,注意:他有自己的一个返回格式,不能顺便返回一个格式,不然则接收不到

    图表 10

    要指定的格式,我们则去定义一个类,在这个类里面就有你想要的一个字段,我把这个类进行返回,只是我们把数据放到那个类里面

    在解决方案下面添加一个EntityClass实例类文件夹,把我们要添加的类全放到这里面。(见图表11)

    图表 11

    因为他这里的数据类型不确定所以这里我们用一个T表示,这个T就表示一个泛型

    我们把类封装好了之后,我们就要用到它(见图表12)下面可能会出现显示可能的修补,我们就要把它的一个命名空间引入进来,返回的值就是实例化LayuiTableData对象Student。要把Student进行一个返回

    Student里面就有几个数值count总共返回的一个条数还有一个data(见图表12、13)

    图表 12

    图表 13

    Toolber:开启表格头部工具栏区域(具体见layui手册)

    Page:设置了page就开启了分页,它的值一个是布尔类型,一个是对象类型

    Limit:每页显示的条数

    Limits:每页条数的选择项

    分页的公式:(page-1)*limit

    Skip():跳过序列中指定数量的元素,然后返回剩余的元素

    Take():从序列中的开头返回指定数量的连续元素

    我不想把所有的数据放在一张表格里面,我想把分成几页。怎么分?

    先找到所有的数据,然后通过Skip()+公式+ Take()+ToList()就可以完成一个分页(见图表14)

    图表 14

    这个方法可以实现分页的效果,就是每次要用它的时候每次都要去写就比较麻烦。这样我们就可以去定义一个实体类,把它封装起来(见图表15)

    图表 15

    注意:在控制器的方法上要调用这个实体类(见图表16)后面是模糊查询的属性

    图表 16

    这样要用到的时候,就可以去调用它的类就可以了(见图表17)

    图表 17

    分页做完了就要来做,现在开始写模糊搜索了,在页面上添加一个div(见图表18)

    图表 18

    模糊查询的作用是什么呢?

    模糊查询的作用是为了方便查询数据,不需要一个个去查询数据搜索一下就可以直接把你想要的数据查找出来

    方法一:见图表19

    方法二:见图表20

    图表 19

    图表 20

    图表 21

    图表21是控制器里面的写法和分页的一样都写在同一个方法里面

    自定义列模块(见图表22)

    图表 22

    这是定义了一个自定义列的模块,表格上面则没有这个自定义列,所以我们要在方法渲染上面在添加一个表格(见图表23)

    图表 23

    这样一个表格的样式就全部完成了

    展开全文
  • layui简单例子

    2018-09-17 09:03:00
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单例子<...link rel="stylesheet" href="css/layui.css"> <style> bod...
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">  
      <title>简单例子</title>
      <link rel="stylesheet" href="css/layui.css">
      <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
      </style>
    </head>
    <body>
     
     <script type="text/html" id="switchTpl">
      <!-- 这里的 checked 的状态只是演示 -->
      <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" />
    </script>
    <script type="text/html" id="checkboxTpl">
      <!-- 这里的 checked 的状态只是演示 -->
      <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" />
    </script>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
     
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
      
    <script src="layui.js"></script>
    <script>
    
    layui.use('table', function(){
      var $ = layui.jquery, table = layui.table, form = layui.form;   
      
      //执行一个 table 实例
      table.render({
        elem: '#demo'
        ,height: 420
        ,url: '/demo/table/user' //数据接口
        ,title: '用户表'
        ,page: true //开启分页
        ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
        ,totalRow: true //开启合计行
        ,cols: [[ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
          ,{field: 'username', title: '用户名', width:80}
          ,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: true}
          ,{field: 'sex', title: '性别', width:80, sort: true}
          ,{field: 'score', title: '评分', width: 80,event: 'setSign', sort: true, totalRow: true}
          ,{field: 'city', title: '城市', width:150} 
          ,{field: 'sign', title: '签名', width: 200}      
          ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
          ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
          ,{field: 'classify', title: '职业', width: 100}
          ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
          ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
        ]]
      }); 
     
      
      //监听头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
        ,data = checkStatus.data; //获取选中的数据
        switch(obj.event){
          case 'add':
            layer.msg('添加');
          break;
          case 'update':
            if(data.length === 0){
              layer.msg('请选择一行');
            } else if(data.length > 1){
              layer.msg('只能同时编辑一个');
            } else {
              layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
            }
          break;
          case 'delete':
            if(data.length === 0){
              layer.msg('请选择一行');
            } else {
              layer.msg('删除');
            }
          break;
        };
      });
      
      //监听行工具事件
      table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"    
        var data = obj.data //获得当前行数据
        ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent == 'detail'){
          layer.alert(JSON.stringify(data), {
          title: '当前行数据:'
        });
        } else if(layEvent === 'del'){
          layer.confirm('真的删除行么', function(index){
            obj.del(); //删除对应行(tr)的DOM结构
            layer.close(index);
            //向服务端发送删除指令
          });
        }
      });  
      
       //监听性别操作
      form.on('switch(sexDemo)', function(obj){
        layer.tips(this.value + ' ' + this.name + ''+ obj.elem.checked, obj.othis);
      });
      
      //监听锁定操作
      form.on('checkbox(lockDemo)', function(obj){
        layer.tips(this.value + ' ' + this.name + ''+ obj.elem.checked, obj.othis);
      });
      
     
      
    });
    </script>
    </body>
    </html>        
            

     

    转载于:https://www.cnblogs.com/kgdxpr/p/9660351.html

    展开全文
  • LayUI框架表单例子

    2019-06-20 15:08:26
    <!DOCTYPE html> <html> <head> <meta charset="utf-8">...layui.form小例子</title> <link rel="stylesheet" href="layui.css" media="all"> </head&...
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layui.form小例子</title>
        <link rel="stylesheet" href="layui.css" media="all">
    </head>
    <body>
    <form class="layui-form" lay-filter="biaodan">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" lay-verify="username" name="username" lay-filter="shuru" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="fuxuan" value="0" name="like[xie]" title="写作">
                <input type="checkbox" lay-filter="fuxuan" value="1" name="like[yue]" title="阅读">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关关</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="guan" name="kaiguan[guan]" value="guan" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关开</label>
            <div class="layui-input-block">
                <input type="checkbox"  lay-filter="kai" name="kaiguan[kai]" value="kai" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="danxuan" name="sex" value="0" title="男">
                <input type="radio" lay-filter="danxuan" name="sex" value="1" title="女">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请填写描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="desc" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    
    <?php $this->beginBlock('javascript'); ?>
    <script>
        layui.use('form', function(){
            var form = layui.form;
    
            //监听下拉框
            form.on('select(aihao)', function(data){
                alert(data.value);
            });
            //监听复选框
            form.on('checkbox(fuxuan)',function (data) {
                alert(data.value);
            });
            //开关风格 checkbox
            form.on('switch(kai)',function (data) {
                alert(data.value);
            });
            //开关风格 checkbox
            form.on('switch(guan)',function (data) {
                alert(data.value);
            });
            //单选事件
            form.on('radio(danxuan)',function (data) {
                alert(data.value);
            });
            form.on('submit(*)',function (data) {
              console.log(data.field); //当前容器的全部表单字段,名值对形式:{name: value}
                return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    
            });
            form.val("biaodan", {
                 "username": "呵呵" // "name": "value"
                ,"kaiguan[guan]": true
                ,"interest":"0"
                ,"like[xie]": "0"
                ,"kaiguan[kai]": true
                ,"sex": '0'
                ,"desc": "我爱我家"
            })
            form.verify({
                username: function(value, item){ //value:表单的值、item:表单的DOM对象
                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                        return '用户名不能有特殊字符';
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if(/^\d+\d+\d$/.test(value)){
                        return '用户名不能全为数字';
                    }
                }
            })
        });
    </script>
    <?php $this->endBlock(); ?>
    
    展开全文
  • layui使用vue的例子

    2019-06-13 08:32:55
    layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
  • layui 模板引擎 例子

    千次阅读 2018-09-19 17:48:27
    //数据模板 &lt;script type="text/html" id="editMenuPl"&gt;...layui-table"&gt; &lt;tr&gt; &lt;th&gt;功能名称&lt;/th&gt;

    //数据模板

    <script type="text/html" id="editMenuPl">
        <table id="wdy-table" class="layui-table">
            <tr>
                <th>功能名称</th>
                <th>路径</th>
                <th>操作</th>
            </tr>
            {{#  layui.each(d, function(index, item){ }}
            <tr><td>{{item.functionName}}</td>
                <td>{{item.functionUrl}}</td>
                <td>
    
                    <button class="layui-btn layui-btn-sm layui-btn-warm" onClick="beforeRename({{"'"+item.id+"'"}})">编辑</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" onClick="beforeRemove({{"'"+item.id+"'"}})">删除</button>
                </td>
            </tr>
            {{# }); }}
        </table>
    </script>

    //渲染数据容器

    <div id="view">
    
    
    </div>

    //ajax 请求成功以后的回调函数

    success: function success(ret){
            console.log(ret.data);
            var editMenu=document.getElementById("editMenuPl").innerHTML;var view=document.getElementById("view");
            laytpl(editMenu).render(ret.data,function (html) {
                view.innerHTML = html;
    
            });
        }
    展开全文
  • Layui表格排序例子

    千次阅读 2019-07-01 17:20:48
    layui.sort(dataTemp, obj.field, obj.type === 'desc') : dataTemp;   // reload表格   tableIns = table.reload('test', {   initSort: obj   , data: dataNew   , page: {   curr: 1 ...
  • 今天小编就为大家分享一篇layui导出所有数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui.form小例子

    2018-11-30 11:41:00
    layui.form小例子 需要引入layui的包 <!doctype html> <html> <head> <meta charset="utf-8"> <title>layui.form小例子</title> <link rel="stylesheet" href=...
  • layui引入echarts(例子

    万次阅读 2019-10-22 11:01:00
    页面容器: <div id="main" style="width:100%;height:500px;"></div> 引入echarts: layui.config({ echarts: '/assets/common/module/echarts.js' ...layui.use(['echarts'], function () ...
  • 今天小编就为大家分享一篇Layui 动态禁止select下拉的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layUI

    千次阅读 多人点赞 2018-05-24 14:37:10
    项目中突然使用了layui当时看文档看的比较懵逼,但是自己做了一些例子感觉就没有那么难了 用的都是一些基本的数据操作api上的例子还是比较好的。例如&lt;script&gt;layui.use('table', function(){ var ...
  • 1 layui是很好框架 方便带有自动的分页 加载 官网已经写好 2 本项目涉及增删改查 数据存储 相关的正则表达式 3 本着解决问题 来看待项目 3代码 【table class =“layui】 lay-data={自己的属性 高宽 limit ...
  • layui实现checkbox的目录树tree的例子发布时间:2020-10-05 23:17:04来源:脚本之家阅读:86作者:weixin_39703044废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下layui.use([ 'tree' ], function() {$ =...
  • 今天小编就为大家分享一篇layui 动态设置checbox 选中状态的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Layui给switch添加响应事件的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Layui Table js 模拟选中checkbox的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇LayUI数据接口返回实体封装的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui监听单元格编辑前后交互的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui树形菜单动态遍历的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui-select动态选中值的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui.table 的使用例子

    2019-09-15 22:30:57
    平台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用<...link rel="stylesheet" href="layuiadmin/layui/css/layui.css"...
  • 今天小编就为大家分享一篇layui数据表格跨行自动合并的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui插件表单验证提交触发提交的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui实现checkbox的目录树tree的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui使用表格渲染获取行数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui多图上传实现删除功能的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近项目需求,使用弹窗播放m3u8视频,本例子中使用了layui.open弹窗方式。 代码例子如下: 语法 layer.open(options) layer.open 根据type不同,类型也就不一样,有五种类型:0(信息框,默认)1(页面层)2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,354
精华内容 941
关键字:

layui例子