精华内容
下载资源
问答
  • layui 小白学习心得

    2019-10-08 15:15:35
    个人感觉在官方文档上去学习layui 是一个非常不错的选择,可以使你迅速的学习layui 的一般用法,让你能看懂前端layui(官方文档做的简单明了) 官网:http://www.layui.com/doc/ 像大多数前端技术一样,你要先...

    layui 是广泛使用的前端技术

    个人感觉在官方文档上去学习layui 是一个非常不错的选择,可以使你迅速的学习到layui 的一般用法,让你能看懂前端layui(官方文档做的简单明了)

    官网:http://www.layui.com/doc/

    像大多数前端技术一样,你要先引入css和js

    不过我一般引入的是../layui/layui.all.js,而不是../layui/layui.js  对我们不是前端的人员来说比较简单,不用考虑很多,直接将所有js 引过来

    在layui的学习中最重要的对layui 模板的定义有非常清晰的认知

    在文档中这一块要重点学习

    一般我们的功能代码是写在js 页面中,然后我们去引用js ---不要忘了模板注入,用到什么我们就要注入什么

     

    看完基础文档,然后对照示例:http://www.layui.com/demo/

    我们就会初步看懂layui 技术了

     

    转载于:https://www.cnblogs.com/jsbk/p/9310875.html

    展开全文
  • 学习layui框架感悟!

    2019-07-18 20:15:24
    大致从以下几个方面了解layui(类ui): 1.layer (有独立版本:layer.layui.com) 2.laydate(有独立版:http://www.layui.com/laydate/) 3.layim (独立版:layim.layui.com) 3.layui (官网:https://www.layui.com/) ...

    在这里插入图片描述
    大致从以下几个方面了解layui(类ui):
    1.layer (有独立版本:layer.layui.com)
    2.laydate(有独立版:http://www.layui.com/laydate/)
    3.layim (独立版:layim.layui.com)
    3.layui (官网:https://www.layui.com/)

    在这里插入图片描述
    Layer(弹出层)
    layer 至今仍作为 layui 的代表作,由于其用户基数较大,所以至今仍把她作为独立组件来维护
    1.首先实现Layer的功能之前,需要引用jquery.js和layui.js

    <script src="layer/jquery-3.4.1.min.js"></script>(先引用jquery.js)
    <script src="layer/layer.js"></script>(其次再引用layui.js)
    
    

    2.用法:官网里提供了各种弹出框的相应代码,把代码复制到自己的项目文件对应页面即可。
    在这里插入图片描述Laydate(日期与时间选择)
    单独下载使用请参考以下实例:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>使用 layDate 独立版</title>
    </head>
    <body>
    <input type="text" id="test1">
    <script src="/laydate/laydate.js"></script> <!-- 自己的路径 -->
    <script>
    //执行一个laydate实例
    laydate.render({
      elem: '#test1' //指定元素,即id
    });
    </script>
    </body>
    </html>
     
    

    参考官网里http://www.layui.com/laydate/,里的日期和时间样式,直接调用方法即可。

    第二种laydate用法,在layui里使用
    1.当然layui需要引进layui.css(css引进用link标签)layui.js
    2.通过layui.use(‘laydate’, callback)加载模块后,再调用相应的方法即可。

    layui(即时通讯)
    LayIM 是基于 layui 的一款独立的付费组件,它是网页即时通讯 UI 解决方案,您购买授权后得到的是一套前端源代码,而服务端程序需自写。
    官网的开发者文档里每个功能讲的很清楚,也配有相应的样例。需要用到相应功能时,查阅具体用法即可。

    下面了解一下layui,layer和laydate、layui、layui(付费)的这些模块,可以使用独立版,也可以使用layui内嵌版

    首先layui使用前需要引入两个文件

    <link  ref=" stylesheet"   href="/layui/css/layui.css"></link>(自己的路径)
    <script src="/layui/layui.js"></script>(自己的路径)
    
    

    在这里插入图片描述
    在这里插入图片描述
    layui框架页面元素和内置模块都很丰富,在项目里部署好layui后,参考对应的开发手册直接调用对应的方法即可。

    最后简单总结一下
    初次学习layui,这一款2016年发布的国产框架,简单分享一下我的学习思路:
    首先应该明白从哪几个主要方面着手开始了解学习,我这先了解了一下layui,可以独立的layer、laydate、layim。
    其次再去了解layui的其它内容:页面元素和其它内置模块。
    这样对layui框架有了大致的了解,再结合具体的开发者文档,实现自己需要的功能。

    备注:这是我第一次学习layui框架的感悟,后续会支持更新!有不足的地方,请指正!

    展开全文
  • Layui表格分页心得

    2021-09-15 10:05:26
    很多小伙伴们在使用layui的时候,发现它的表格渲染实现很简单,只需要给个接口,在后台拿数据并且使用规定的格式返回数据就行了,具体返回的json格式如下(用的是Java代码) private int code;//状态码 private ...

    很多小伙伴们在使用layui的时候,发现它的表格渲染实现很简单,只需要给个接口,在后台拿数据并且使用规定的格式返回数据就行了,具体返回的json格式如下(用的是Java代码)

        private int code;//状态码
        private String msg;//信息
        private Object data;//返回的数据
        private String count;//数据条数

    但是我们渲染表格数据完成之后,往往需要分页,这个时候很多小伙伴们在查看官方文档的时候,会有点看不明白,甚至大多数都是这个问题:

    我草?我明明给了每页显示条数跟下拉列表参数啊,为什么他还是只显示全部的数据呢?具体代码可能是这样的:

     table.render({
                elem: '#currentTableId',
                url: "${pageContext.request.contextPath}/admin?method=selectAllUser",
                toolbar: '#toolbarDemo',
                limits: [10, 20, 40, 55, 70, 85],
                limit: 10,
                page: {
                    theme: '#1E9FFF',
                    curr: 1,
                },
                skin: 'line',
                method: 'post',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {type: "checkbox", width: 50},
                    {field: 'userId', width: 320, title: 'ID', sort: true},
                    {field: 'userName', width: 160, title: '用户昵称'},
                    {field: 'realName', width: 160, title: '用户真实姓名'},
                    {field: 'sex', width: 80, title: '性别'},
                    {field: 'address', width: 80, title: '地址', width: 100},
                    {field: 'phone', title: '电话号', width: 150},
                    {field: 'role', width: 100, title: '角色', sort: true},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                ]],

    这个时候大家就在网上找来找去了,我也同样遇到了这个坑,不过自己也是总结出来使用的方法了

    首先,一定要确定layui的json返回格式是官网上规定的,跟我这样写就行了

    第二,要将参数page设置为true,代表开启分页,但是这个参数很明显 是一个bool类型的参数,官网上写的很清楚,它是可以设置为object类型的,那么我们就可以自定义其中的属性,从而达到自定义样式以及相关操作了

    pageBoolean/Object开启分页(默认:false)。支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外)

     第三,就是上面提到的大多数的问题

    我们在后台写数据接口的时候,其实就是一个select * from table_name 拿到的是所有数据,我们只需要在前端进行分页显示就行了,我的解决办法就是直接在后台拿到所有的数据,然后再前端进行数据截取就行了

    首先确保自己的放回json是标准layui所支持的类型,这个很关键

            然后再进行表格渲染的时候,将page参数设置为object类型,具体参考如上图

    其中将curr(当前页码)设置为1,因为如果不设置的话默认就是undetifiled,会写很多重复代码

    然后最关键的点来了:

            官网上给出了一个表格参数叫

    parseData:function(data){
    }

            它可以拿到我们的返回json数据,所以说到这里就差不多明白了

    我们可以定义一个变量进行数据data的返回,比如我们定义一个result,用来返回数据

                parseData: function (res) {
                    //这个page参数,开启分页后,它的值是true的,它是一个bool类型
                    //当点击了分页工具的操作的时候,它就是一个对象了
                    /*包含以下信息,里面的curr就代表当前页码数,我们可以根据这个来自定义返回的数据是什么
                    //可以在page上面定义这些json值,这样好操作
                    *
                    * {elem: 'layui-table-page1', count: 13, limit: 10, limits: Array(6), groups: 3, …}
                            count: 13
                            curr: 2
                            elem: "layui-table-page1"
                            groups: 3
                            index: 1
                            jump: ƒ (e,t)
                            layout: (6) ['prev', 'page', 'next', 'skip', 'count', 'limit']
                            limit: 10
                            limits: (6) [10, 20, 40, 55, 70, 85]
                            pages: 2
                    *
                    * */
                    console.log(this.page.curr);
                    console.log(this.limit);
                    var result;
                    // if (this.page.curr) {
                    //(10(2-1),10*2)也就是10,20
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    // } else {
                    //一开始就是0-10,点击第二页的时候,curr就是2,limit还是自己定义的10,想达到分页就只需要对查询出来的数据进行划分
                    //对于result进行赋值,每次的值根据需要进行截取
                    // result = res.data.slice(0, this.limit);
                    // }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };

    然后再其中用上刚刚所提到的截取操作,根据curr(当前页码),和limit(每页显示的数据量)进行result赋值。

            比如我这里limit是10 curr起始是1 那么result就是json数据返回中data的值截取0-10之间的值,这样我们就拿到了0-10的数据,从而达到第一页面显示10条数据,当我们点击第二页的时候,curr就是2,第二页的数据就是10-20,以此类推,即可满足自己的需要啦

    展开全文
  • layui学习之路——数据表格 之前用.net开发的网站很多功能体验不佳,比如锁定表头和数据编辑,尽管能实现,但使用起来很糟糕,尤其是数据量大的时候。最近学了一段时间layui,感觉效果还可以,但比我想象中难,不是...

    layui学习之路——数据表格

    之前用.net开发的网站很多功能体验不佳,比如锁定表头和数据编辑,尽管能实现,但使用起来很糟糕,尤其是数据量大的时候。最近学了一段时间layui,感觉效果还可以,但比我想象中难,不是套个框架就能用的,现在讲学习心得记录一下,后台语言为C#。
    首先就是数据表格。
    html:

    //第一种静态表格,直接用的官方文档例子
    <table lay-even  class="layui-table " >
              <colgroup>
                <col width="150">
                <col width="200">
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>昵称</th>
                  <th>加入时间</th>
                  <th>签名</th>
                </tr> 
              </thead>
              <tbody>
                <tr>
                  <td>贤心</td>
                  <td>2016-11-29</td>
                  <td>人生就像是一场修行</td>
                </tr>
                <tr>
                  <td>许闲心</td>
                  <td>2016-11-28</td>
                  <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
                </tr>
              </tbody>
            </table>
    
    //第二种展现数据库数据,这个才是重点
     <table id="demo" lay-filter="test" ></table>
    

    js:

    
     $(document).ready(function() {   
                reloadTable();
            });
    function reloadTable(){            //这里将数据表格封装成一个方法,方便之后添加功能
                    layui.use(['upload', 'element', 'layer','table'],function(){
                        var table=layui.table;
                        //var layer = layui.layer;
                        //var upload=layui.upload;
                        var index = layer.load(1); //添加laoding,0-2两种方式
                        table.render({
                            elem:'#demo',            //对应html的table的id
                            height:600,                  //整张表的高度,设置高度后自动锁定表头
                            url:'global/DataService_Test.ashx' ,      //数据源,就是下面的文件
                            loading:false,    //加载条
                            method:'post',    //post方法本地第一次加载IE会报error,谷歌没问题
                            page:false,                    //分页
                           // toolbar: '#toolbarDemo',   //指向自定义工具栏
                            defaultToolbar: [], 
                           //    limit:20,
                            request: {
                            pageName: 'page', //页码的参数名称,默认:page
                            limitName: 'limit' //每页数据量的参数名,默认:limit
                            },
                            id: 'table1',
                            parseData: function(res) {
                               return {
                                   "code": res.code, //数据状态的字段名称,默认:code
                                   "msg": res.msg, //成功的状态码,默认:0    
                                   "count": res.count, //状态信息的字段名称,默认:msg
                                   "data": res.data//数据总数的字段名称,默认:count
                                   //dataName: 'data' //数据列表的字段名称,默认:data
                               };
                           },
                           
                            cols:[[
                               {type:'radio'}   //单选列
                              ,{field: 'col1', title: 'col1', align:'center'}   
                              ,{field: 'col2', title: 'col2',align:'center'}
                              ,{field: 'col3', title: 'col3',width:100, align:'center'} 
                            ]],   
                            done: function(res, curr, count) { //返回数据执行回调函数
                                 console.log(res);   //所有数据
                                 console.log(curr);  //得到当前页码
                                 console.log(count);//得到数据总量
                                 layer.close(index); //返回数据关闭loading
                                 /*  for (var i = 0; i < index; i++) {        //改变单元格背景色
                                    $("[data-field='col1']").children().each(function () {
                                        if ($(this).text() == 'Y') {
                                            $(this).css({ "background-color": "skyblue", "color": "#ffffff" });
                                        } 
                                    });
                                }*/
                              }
                        });
                        });
                        }       //js括号还得去notepad++里确认下对应关系……
    

    ashx即一般程序文件:

        public class DataService_Test : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                DataSet ds = new DataSet();
                SqlConnection DB = new SqlConnection(WebConfigurationManager.AppSettings["key1"].ToString());
                string sql_text = @"select * from table1";
                DB.Open();
                SqlDataAdapter objAdapter = new SqlDataAdapter(sql_text, DB);
                objAdapter.Fill(ds, "test1");
                context.Response.Write(ToJsonTableRun(ds.Tables["test1"]));  //将datatable转化为json格式发送到前端
                DB.Close();
            }
    
            public string ToJsonTableRun(DataTable dt) {      //json转化方法
                JavaScriptSerializer JavaScriptSerializer = new JavaScriptSerializer();
                JavaScriptSerializer.MaxJsonLength = int.MaxValue;
                ArrayList arrayList = new ArrayList();
                foreach(object obj in dt.Rows){
                    DataRow dataRow = (DataRow)obj;
                    Dictionary<string,object> dictionary=new Dictionary<string,object>();
                    foreach(object obj2 in dt.Columns){
                        DataColumn dataColumn = (DataColumn)obj2;
                        dictionary.Add(dataColumn.ColumnName,dataRow[dataColumn.ColumnName].ToString());
                    }
                    arrayList.Add(dictionary);
                }
                Hashtable tableMap = new Hashtable();
                tableMap.Add("code", "0");
                tableMap.Add("msg", "");
                tableMap.Add("count", arrayList.Count);
                tableMap.Add("data", arrayList);
                return JavaScriptSerializer.Serialize(tableMap);
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    

    这样就能展现一个基础的数据表格了,但可能会有一点瑕疵,样式还需要手动修正一下。
    css:

     .layui-table th
            {
            	text-align:center;
            	background-color:#009688;
            	color:White;
            	font-weight:bold;
            	position:static;
            	} 
            .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            text-overflow: inherit;
            white-space: normal;
            }
            
             .layui-table-view .layui-form-radio
             {
                line-height: 1.4;     //调整layui库里的图片位置,数字大小需要自行尝试
              }
    

    还有一个注意点,导入时请把整个文件夹都原封不动导入进去,不要只导入一个layui.js,不然很多图片资源无法加载,导致看起来很奇怪。

    展开全文
  • 如果你是新手学习layui,那这个绝对会对你有很大的帮助; 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考。 使用心得:之前做项目的时候用到过这种数据表格,看中的是它的页面美观大方。 你可能会对...
  • javaWeb学习心得

    2021-01-04 22:46:13
    10.layui table表格的数据重载【搜索功能】 我的script var $ = layui.$, active = { reload: function(data){ /* 表示获取到搜索框的值 */ var demoReload = $('#demoReload'); console.log(demoReload.val()) //...
  • SpringMVC学习心得

    2021-08-30 21:40:47
    结合layui前端整合smm 一、回顾MVC 1.什么是MVC model: dao和service view:视图 controller:servlet 2.什么是springmvc? spring mvc 是spring framework的一部分,基于java实现mvc的轻量级web框架 也就是说它是一...
  • 因为公司的需要,这几天学习layui框架,稍微有一些心得。介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍。 官网地址:https://www.layui.com/doc/element/layout.html 简单的布局 layui的...
  • layui表格使用之重载

    2020-12-18 10:09:11
    近期由于项目使用到layui,所以下班后花了点时间学习了一下layui ,记录分享一下学习心得与踩坑经验 需求描述: 按照创建时间查询xxx表数据需要支持条件输入,点击查询按钮发起查询. 步骤一:创建查询面板 留意此处...
  • 树形结构 - layui.tree

    万次阅读 2018-07-20 15:59:08
    最近公司项目有点多一段时间没有更新,刚完成的一个项目用到了tree树形结构有一些使用心得分享一下.  开始是想使用zTree -- jQuery 控件,后来还是选用了基于layui的树形控件,因为项目后台管理界面都是用到layui...
  • layui框架的响应式布局

    万次阅读 2018-10-28 23:35:38
    因为公司的需要,这几天学习layui框架,稍微有一些心得。介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍。 官网地址:https://www.layui.com/doc/element/layout.html 简单的布局 layui...
  • laydate:Layui框架下的日期组件 Bootstrap Table:基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。 使用文档: ...
  • 部署的坑 七、心得体会 前言 此项目为仓库管理系统,是我大二下的实训课作业,虽然是从学期初开始写的,但是实际写项目的日子也就十多天(前面都没怎么动,果然只有临近ddl效率才高)。 到我写这篇博文的时候,实际...
  • Layui前后台交互数据获取java

    千次阅读 2018-08-10 09:36:02
    Layui是一款适用于后台程序员的UI框架,学习成本低。Json数据格式交互前后台,并且也相当适用单页面开发。有兴趣的朋友可以看看layui官网。 Layui前后台数据交互 layui有自己的一套特定的数据格式交互(这很重要)...
  • 分享学习前端的心得

    2020-06-19 16:43:26
    这也导致在学习的时候会发现,有些对应的技术要点可能在上一个月可以使用,到下个月就完全失效,不再有用。所以对于前端的学习方面,我们又该如何稳定自己的技术。 1.选择目前流行的前端框架 这点很重要,前端框架有...
  • 文章目录 原始layui动态表格模板...经过学习之后,稍微有些自己的心得,把最终学习结果总结一下,方便前端新人查阅 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit...
  • LayUI下拉框默认选中方法

    千次阅读 2020-04-23 14:29:34
    layui中有两种下拉框默认选中方法。注意两种方法必须加上form.render()才有效果。 1、方法一: $("#selectid").find("option[value="+value+"]").prop("selected",true); form.render(); 2、方法二: $("#...
  • 我本身是一个后端工程师,但是我却接触到了这个框架,所以给大家分享一个我的心得,当然,这只是一个基础的LayUi的使用,大神请勿围观, 不卖关子了,切入正题~ LayUi是一款非常强大的前端框架,强大之处在于他...
  • 如果你是新手学习layui,那这个绝对会对你有很大的帮助; 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考。 使用心得:之前做项目的时候用到过这种数据表格,看中的是它的页面美观大方。 你可能会对layui...
  • 坚持我们的坚持,热爱我们的热爱。今天分享的系统是基于SSM的权限系统,系统的界面和功能都十分nice。仅限制学习使用,禁止商用。源码见文末BM.Tech基于 SSM+Shiro+Layu...
  • layui 经典代码笔记

    千次阅读 2018-06-01 23:18:56
    id=44e6cbfc-6ce3-426f-a8f4-0fad7ab76096">学习心得</a></dd> <dd><a href="/Home/ArticleListView?id=f6d63a28-8916-489b-a5c5-6e207e7ec3e4">生活感悟</a></dd> <dd><a href="/Home/ArticleListView?id=97d4c0...
  • ### 学习心得 本人是一名在校大学生,才疏学浅,编程小白。学习了java基础知识后,想往java web方向发展,于是在网上找了很多资料,最后发现了Jfinal(jfinal官网),刚刚接触框架开发,一点都不会,通过网上各种...
  • 我们通常会用屏(Screen)来... }, 备注:所有内容首发于公众号,之后除了Flutter也会更新其他技术文章,TypeScript、React、Node、uniapp、mpvue、数据结构与算法等等,也会更新一些自己的学习心得等,欢迎大家关注
  • 我们使用LayUI的后台管理系统框架时,会使用table.render方法与Java后端系统的controller层进行数据交互,LayUI的table.render方法处理的res返回结果有固定的数据格式,如果controller层返回的数据与LayUI不匹配时会...
  • Boostrap学习心得

    2015-09-14 17:35:00
    进入新公司,前端用到各种页面元素几乎都是bootStrap框架里的,下面介绍下某些页面控件怎么运用,作为知识点备份,提供有需要人观看;... 官网: http://sentsin.com/layui/laydate 页面中需要引入的...
  • 静态页面制作心得

    2019-03-26 09:49:10
    静态页面制作心得 前端入门者的小白在写静态页面的时候,最好采用原生的方式,这样不但可以将自己的基础加以夯实,还可以锻炼自己页面布局的能力。 如果利用一些辅助搭建页面的框架或者其他的,比如layui,...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 133
精华内容 53
关键字:

layui学习心得