2020-11-09课堂笔记之LayUI前端框架

下载与导入layui样式

layUI官网，点此进入

进入layUI官网，点击下载，然后将layui文件夹复制在你的动态web项目的WebContent目录下面，如下图所示：

分别引入css样式和layui.js:

<link rel="stylesheet" href=".//layui/css/layui.css">   

<script src=".//layui/layui.js"></script>

css样式普遍运用

数据表格

数据表格代码示例：
1.基础表格

<script>
layui.use('table', function(){
	  var table = layui.table;
	  table.render({
		    elem: '#demo'
		    ,height: 312
		    ,method:'post'
		    ,url: 'SelectAllStudent' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		       {field: 'id', title: '编号', width:'80px', sort: true}
		      ,{field: 'name', title: '姓名', width:'80px'}
		      ,{field: 'birthday', title: '生日', width:'80px'}
		      ,{field: 'sex', title: '性别', width:'80px', sort: true}
		      ,{field: 'hobbyname', title: '爱好', width:'80px'}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		    ]]
		  });
  });
		  </script>

2.添加编辑和删除功能

<script type="text/html" id="barDemo">
  <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>

3.监听行事件：因为我有编辑和删除的功能

 //监听行事件
 <script>
	  table.on('tool(test)', function(obj){
		    var data = obj.data;
		    console.log(data);
		    //console.log(obj)
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		        obj.del();
		        console.log(data.id);
		        $.ajax({
					type : "get",
					url : "RemoveServlet?id=" + data.id,
					dataType : "json"
				});
		        layer.close(index);
		      });
		    } else if(obj.event === 'edit'){	      
		    }
		  });
		   </script>

注意：编辑功能暂未实现

以上数据表格案例的运行效果：

删除功能：