前端框架LayUi的使用总结(一)

        近端时间做一个关于后台管理系统时用到了LayUi前端框架，对于搞后台的我开始使用时那真是一脸茫然，百般查阅资料才搞明白一些简单的使用，小小的总结一下分享给大家。不足之处，欢迎指导交流。

  一，使用LayUi需要引入的文件及目录结构

1. ├─css// css目录
2. ││─modules//模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个:)
3. ││├─Laydate
4. ││├─层
5. ││└─layim
6. │└─layui.css//核心样式文件
7. ├─font//字体图标目录
8. ├─images//图片资源目录（目前只有layim和编辑器用到的GIF表情）
9. │─lay//模块核心目录
10. │└─模块//各模块组件
11. │─layui.js//基础核心库
12. └─layui.all.js//包含layui.js和所有模块的合并文件

二，获取LayUi的方式（良心资源，小小推荐一下喽〜）

1.官网获取  https://www.layui.com /

2.通过  GitHub  或  码云得到  layui的完整开发包

 三，LayUI的使用

相信很多刚开始使用LayUi这款前端框架的小猿们最头疼的就是怎么接收值？怎么传值？接下来就以简单的对管理员的一些操作功能演示一下。

  （一）数据表格的使用：

        1.HTML代码断

   <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">管理员管理</a>
        <a><cite>管理员信息管理</cite></a>
      </span>
     	<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
		<div class="demoTable">
		 <div class="layui-inline" >
		    <input class="layui-input" name="id" id="demoReload"  autocomplete="off">
		  </div>
		  <div class="layui-btn" data-type="reload">搜索</div>
		</div><br/>
		<div class="layui-btn-group demoTable">
         <button class="layui-btn" onclick="x_admin_show('添加管理员','./admin-add.html')"><i class="layui-icon"></i>添加</button> 
		</div>
      <table class="layui-hide" id="LAY_table_admin" lay-filter="admin"></table>

        2.js代码断（方法渲染以及数据表格重载）

<script>
	//数据表格
    layui.use('table', function(){
    	  var table = layui.table;
    	  //方法级渲染
    	    table.render({
		    elem: '#LAY_table_admin'
		    ,url:'/getAdmins.action'  //发送请求获取所有管理员
		   	,cellMinWidth: 80 
		    ,cols: [[
		      {checkbox:true,fixed: true,align:'center'}
		      ,{field:'id',width:80,align:'center',title: 'ID'}
		      ,{field:'account',width:160,align:'center',title: '管理员账号'}
		      ,{field:'username',width:160,align:'center',title: '管理员名称'}
		      ,{field:'createtime',width:160,title: '添加时间',align:'center',sort: true, 
                  templet :function (row){
                  return createTime(row.createtime);}}
		      ,{field:'status',width:160,align:'center', title: '状态',templet: '#titleTpl'}
		      ,{fixed: 'right', title: '操作',align:'center', toolbar: '#barDemo'}
		    ]]
		    ,page: true
		    ,id: 'testReload'
    	  });
   	  //数据重载
   	  var $ = layui.$, active = {
   	    reload: function(){
   	      var demoReload = $('#demoReload');
   	      table.reload('testReload', {
   	    	url:'/getAdmin.action'  //发送请求获取单个管理员
   	        ,page: {
   	          curr: 1 //重新从第 1 页开始
   	        }
   	        ,where: {
   	            username: $("#demoReload").val()
   	        }
   	      });
   	    }
  	  };
   	  $('.demoTable .layui-btn').on('click', function(){
   	    var type = $(this).data('type');
   	    active[type] ? active[type].call(this) : '';
   	  });
    });
</script>

        3.js代码段（数据转译）

<!-- 数据转译 -->
<script type="text/html" id="titleTpl">
	{{#  if(d.status == '0'){d.status = '可用' }}
   	 <span style="color: #F581B1;">{{ d.status }}</span>
  	{{#  } else { d.status = '禁用' }}
  	{{ d.status }}
 	{{#  } }}
</script>

        4.js代码段（动态加载的工具按钮）

<!-- 操作按钮 -->		
<script type="text/html" id="barDemo">
 	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

        5.js代码段（时间戳的处理）

<!-- 时间戳处理-->
<script>
	function createTime(v){
	  	var date = new Date(v);
	      var y = date.getFullYear();
	      var m = date.getMonth()+1;
	      m = m<10?'0'+m:m;
	      var d = date.getDate();
	      d = d<10?("0"+d):d;
	      var h = date.getHours();
	      h = h<10?("0"+h):h;
	      var M = date.getMinutes();
	      M = M<10?("0"+M):M;
	      var str = y+"-"+m+"-"+d+" "+h+":"+M;
	      return str;
	  }
</script>

后续内容请查看我的博文，前端框架LayUi的使用总结（二）~~~欢迎访问我的博客：谁让你是巧克力​​​​​​​