layui案例

最新推荐文章于 2025-01-02 09:10:16 发布

原创最新推荐文章于 2025-01-02 09:10:16 发布 · 506 阅读

0 ·

CC 4.0 BY-SA版权

layui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了layui前端框架在实际项目中的应用，包括UI设计、组件使用以及与后端交互的案例，展示了其简洁高效的特性。

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5" id="form">
                        <div class="layui-inline layui-show-xs-block">
                            <select name="deptNo" id="dept_list" >
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" id="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit lay-filter="emp_search"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main" lay-filter="emp_like">
                    <table class="layui-table layui-form" id="emp_list" lay-filter="empList">
                      
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

 
<script type="text/html" id="empBarDemo">
   <a title="查看" lay-event="emp_detail"><i class="layui-icon">&#xe63c;</i></a>
</script>

<script src="./js/jquery-3.3.1.js"></script>
<script>

    
    layui.use(['table','form'],function () {
        var table = layui.table,
        form = layui.form;
        
        $.ajax({
            type:'get',
            url:'http://localhost:8080/ycoa/manage/dept/list',
            async:false,
            success:function (data) {
                if(data.status == 0){
                    var datas = data.data;
                    var html_2 = "";
                    for(var i=0;i<datas.length;i++){
                        html_2+='<option value="'+datas[i].deptno+'">'+datas[i].deptname+'</option>';
                    }
            
                    html_2='<option value="" >请选择</option>'+html_2;
                    $("#dept_list").html(html_2);
                    form.render(); //重新渲染  
                }
            }
        });
 
        
        //方法渲染
        var tableIns = table.render({
            elem: '#emp_list',
            url: 'http://localhost:8080/ycoa/manage/emp/like', //设置异步接口
            method: 'post',
            toolbar: true,
            title: '员工数据表',
            page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                    curr: 1,
                    groups: 6,
                    limit: 20
            },
            cols: [[
                {checkbox: true,fixed: true},
                {field:'userId',title: 'userId'},
                {field:'username',title: '用户名'},
                {field:'empno',title: '员工号'},
                {field:'deptName',title: '部门名称'},
                {field:'msgName',title: '部门上级'},
                {field:'job',title: '职位'},
                {field:'email',title: '邮箱'},
                {field:'phone',title: '电话'},
                {field:'comm',title: '虚拟币',sort: true,templet:function(res){
                    return '<a class="layui-table-link" lay-event="get_emp_comm_detail">'+res.comm+'</a>'
                }},
                {field:'hiredate',title: '受雇日期'},
                {field:'sal',title: '薪金'},
                {field:'right',title: '操作',toolbar:'#empBarDemo'}
            ]] //设置表头
        });
        
        
        //监听工具条    tool是工具条事件名，empList是table原始容器的属性 lay-filter="对应的值"
        table.on('tool(empList)',function(obj){
            
            var data = obj.data;
            var layEvent = obj.event;
            
            if(layEvent === 'emp_detail'){ //查看员工信息
                
                xadmin.open('虚拟币明细','./employee-add.html?userId='+data.userId+'');
                
            }else if(layEvent === 'get_emp_comm_detail'){ //查看员工虚拟币信息
                
                xadmin.open('虚拟币明细','./employee-add.html?userId='+data.userId+'');
                
            }else if(layEvent === 'LAYTABLE_EXPORT'){   //数据导出
                table.exportFile(tableIns.config,data,'xls');
            }
            
        });


        //搜索
        form.on('submit(emp_search)',function(data){
            var username = $('#username').val();
            var deptNo = $('#dept_list').val();
            tableIns.reload({
                where:{
                    'username': username,
                    'deptNo': deptNo
                },
                page:{
                    curr: 1
                }
            });
            return false;
        });
        

    });

</script>

删除：

if(layEvent === 'rp_del'){ 
    layer.confirm('真的删除行么', function(index){
        //向服务端发送删除指令
      	$.ajax({
      	    type:"post",
      	    url:"http://localhost:8080/ycoa/manage/rewardOrPunish/delete",
      	    data: {id:data.id},
      	    success: function(data){
      	        console.log(data.status);
      	        if (data.status == 0) {
      	            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      	            layer.alert("删除成功", {icon: 6});
                }else {
                    var msg = data.msg;
                    layer.alert(msg, {icon: 5});
                }
      	       }
      	});
        layer.close(index);
    });
}