基于前端layui框架使用心得

layui框架是一款快速创建后台管理系统的框架，最大的好处就是便利快捷引入项目中

下载：点击http://www.layui.com/官网下载最新的安装包

如何引入：下载好解压包，将解压出来的目录，原封不动的导入项目根目录eclipse是webroot，IDEA是webapp下

使用步骤：在后台首页index.html下引入layui.js和layui.css

                然后在html下写以下脚本

                

               第一个参数是一个数组，是使用哪些模块，例如,['form','table','element']

                第二个参数是执行的函数

使用layui常用组件：快速布局，导航，面包屑导航，datatable（数据表格），富文本编辑器

这个是一个快速布局的代码，可以快速定义你的后台系统布局

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
html>


    charset="utf-8">
    name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    rel="stylesheet" href="../../layui/css/layui.css">
    rel="stylesheet" href="../css/index.css">
    
    

class="layui-layout-body">
class="layui-layout layui-layout-admin">
    
class="layui-header">
        
class="layui-logo">YOUKNOW博客
        
        
class="layui-nav layui-layout-left">
            
class="layui-nav-item">href="">首页
            
class="layui-nav-item">href="">用户
            
class="layui-nav-item">href="">博客
            
class="layui-nav-item">href="">评论
        
        
class="layui-nav layui-layout-right">
            
class="layui-nav-item">
                href="javascript:;">
                    src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    ${CURRENT_USER.nickname}
                
                
class="layui-nav-child">
                    
href="">基本资料
                
            
            
class="layui-nav-item">href="" οnclick="logout();">注销
        
    

    
class="layui-side layui-bg-black">
        
class="layui-side-scroll">
            
            
class="layui-nav layui-nav-tree"  lay-filter="test">
                
class="layui-nav-item layui-nav-itemed">
                    class="" href="javascript:;">用户
                    
class="layui-nav-child">
                        
href="javascript:;" οnclick="getUserList()">用户管理
                    
                
                
class="layui-nav-item">
                    class="" href="javascript:;">博客
                    
class="layui-nav-child">
                        
href="javascript:;">博客管理
                    
                
                
class="layui-nav-item">
                    class="" href="javascript:;">评论
                    
class="layui-nav-child">
                        
href="javascript:;">评论管理
                    
                
                
class="layui-nav-item">
                    href="" οnclick="logout();">注销
                
        
        
    

    
class="layui-body" style="background-color: #ccc" id="content">
        
        
class="layui-row">
            
class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                type="text" name="title" required  lay-verify="required" placeholder="搜索" autocomplete="off" class="layui-input">
            
            
class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                class="layui-btn" lay-submit lay-filter="formDemo">确定
            
        

        
class="layui-row" style="margin-left: 150px;margin-top: 150px;">
            
class="layui-col-xs6 layui-col-sm6 layui-col-md3 d1">
                
class="num">6
                
class="text">用户数量
            
            
class="layui-col-xs6 layui-col-sm6 layui-col-md3 d1">
                
class="num">8
                
class="text">博客数量
            
            
class="layui-col-xs4 layui-col-sm12 layui-col-md3 d1">
                
class="num">20
                
class="text">评论数量
            
        
    

    
class="layui-footer">
        
        © youknow.natapp1.com授权管理维护
    

重点讲述一下，datatable，这个组件的好处，避免了前端发送ajax取得数据采取拼接字符串局部刷新内容

例如：在导航标签上绑定一个函数getUserList()：

//获取用户列表，并且刷新内容div生成table
var getUserList = function(){
    $("#content").html("");
    var table = layui.table;
    table.render({
        elem:'#user-table',
        url:'/manage/user/testApi.do',
        height:315,
        page:true,
        limit:5,
        cols:[[
            {field:'id',width:80,sort:true,title:'ID'},
            {field:'username',width:80,title:'用户名'},
            {field:'password',width:80,title:'密码'},
            {field:'tel',width:80,title:'性别'},
            {field:'nickname',width:80,title:'昵称'},
            {field:'head',width:150,title:'头像'},
            {field:'question',width:80,title:'问题'},
            {field:'answer',width:80,title:'答案'},
            {field:'role',width:80,title:'角色'},
            {field:'createTime',width:100,title:'创建时间'},
            {field:'updateTime',width:100,title:'更新时间'},
            {fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
        ]],
        response: {
            statusName: 'status' //数据状态的字段名称，默认：code
            ,statusCode: 0 //成功的状态码，默认：0
            ,msgName: 'hint' //状态信息的字段名称，默认：msg
            ,countName: 'total' //数据总数的字段名称，默认：count
            ,dataName: 'data' //数据列表的字段名称，默认：data
        }
    });
    table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象

        if(layEvent === 'detail'){ //查看
            layer.msg('ID：'+ data.id + ' 的查看操作');
        } else if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
            });
        } else if(layEvent === 'edit'){ //编辑
            //do something

            //同步更新缓存对应的值
            obj.update({
                username: '123'
                ,title: 'xxx'
            });
        }
    });
};

这个代码包含了所有作用，讲述一下实现思路：

1.绑定一个getUserList函数

2.利用jquery取得id为content的div，用jquery的html()函数重写content的innerHTML，里面的参数为一个table标签，一定要绑定id属性和layui-filter属性

3.取得layui的table模块的实例赋值给table变量，用table.render("options")生成一个动态表格,参数为一个多维数组，

4.为这个数组初始化数据，就是给动态表格赋值属性，主要要填写，url(异步数据接口),elem（原始table的id属性），cols属性就是表头部分，与返回data数据格式一致，response定义返回格式(status一定要和后台沟通好，这个代表成功的标志，其他默认就行),

注意，如果要绑定工具条，那么在cols最后一列添加一个toolbar,这个属性值为自定义的tool模版

5.为这个tool模版的每个标签监听事件，如上面代码写的一样