layui编辑删除功能

最新推荐文章于 2022-11-15 15:31:33 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2022-11-15 15:31:33 发布

阅读量2.2k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/Guoyu1_/article/details/90267104

版权

layui 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>终端格口属性管理</title>
    <style>
        .layui-table-header .layui-table thead tr {
            background: #fff;
        }
        .layui-table-click{
            background-color:#89c997 !important;
        }
        .layui-table-header .layui-unselect i{display: none}
    </style>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="gy_wrap2">
    <div class="gy_wrap2_top">
        <a href="javascript:"><img src="images/out.png" alt="">退出</a>
        <a href="javascript:"><img src="images/user.png" alt="">李丽</a>
        <a href="javascript:" οnclick="window.location.reload()" ><img src="images/shuaxin.png" alt="">刷新</a>
    </div>
    <div class="gy_wrap2_btn">
        <button class="btn" οnclick="btn()"> 终端格口属性查询</button>
    </div>
    <div class="table">
        <div class="top">
            <span class="sp" style="margin-right: 10px; vertical-align: middle;"></span>
            <div class="layui-btn-group demoTable">
                <!--<button data-type="allSelection" class="layui-btn">全选</button>-->
            </div>
            <ul class="top_right">
                <li> <a href="addterminalAttributePort.html" class="layui-btn">增加角色</a></li>
                <li> <a href="javascript:;" class="layui-btn" data-type="getDelData">删除角色</a></li>
                <li> <a href="javascript:;" class="layui-btn" data-type="getCheckData">修改角色</a></li>
            </ul>
        </div>
        <table class="layui-hide" id="test" lay-filter="menu-filter"></table>
    </div>
</div>
<div class="table" id="Fromtable" style="display: none">
    <form action="">
        <div class="FromtLine">
            <span class="qb_span" style="width: 20%">终端格口型号</span>
            <input class="qb_input" value="" type="text" style="width: 60%">
        </div>
        <div class="FromtLine">
            <span class="qb_span" style="width: 20%">格口坐标</span>
            <input class="qb_input" value="" type="text" style="width: 60%">
        </div>
        <div class="FromtLine">
            <span class="qb_span" style="width: 20%">硬件格口编号</span>
            <input class="qb_input" value="" type="text" style="width: 60%">
        </div>
        <div class="FromtLine">
            <span class="qb_span" style="width: 20%">格口型号</span>
            <input class="qb_input" value="" type="text" style="width: 60%">
        </div>
        <div class="FromtLine">
            <button class="btn1" οnclick="btn1()" style="margin-right: 30px">取消</button>
            <button class="btn2" οnclick="">确定</button>
        </div>
    </form>
</div>
<script>
    function btn() {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                title:"筛选条件",
                type: 1,
                area: ['650px', '305px'],
                content: $("#Fromtable"),
                shadeClose:true,
                move : false, //拖拽模式
                shade: 0.4
            });
        });
    }
</script>
<!--表格-->
<script>
    layui.use(['table','form'], function(){
        var table = layui.table,
            form = layui.form;
        table.render({
            elem: '#test'
            ,url:'json/xrole.json'
            ,height:'850px'
            ,id: 'testReload'
            ,cols: [[
                {type:'radio'}
                ,{ field:'name',title: '角色名称' , minWidth: 210,width:600}
                ,{field:'describe',   title: '角色描述' , minWidth: 210,width:1020}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,curr: 5 //设定初始在第 5 页
                ,groups: 2 //只显示 1 个连续页码
                ,first: true //不显示首页
                ,last: true //不显示尾页
            }
            ,done:function(){
            }
        });
        //监听表格复选框选择
        var $ = layui.$, active = {
            allSelection:function(){
                $('.layui-table-header .layui-unselect').click()
                // $('.layui-unselect .layui-form-checkbox .layui-form-checked'). attr('checked',true)
                var checkStatus = table.checkStatus('testReload')
                    ,data = checkStatus.data;
                $('.sp').text('已选 '+ data.length + ' 项')
            },
            getDelData:function(){
                var checkStatus = table.checkStatus('testReload');
                if(checkStatus.data.length==0){
                    layer.msg('请先选择要删除的数据行！', {icon: 2});
                    return ;
                }
                var codeId= "";
                for(var i=0;i<checkStatus.data.length;i++){
                    codeId += checkStatus.data[i].name;
                }
                layer.msg('删除中...', {icon: 16,shade: 0.3,time:5000});
                layer.confirm("确定删除"+codeId+"？",function(){
                    $.ajax({
                        type:"POST",
                        url: './json/xrole.json',
                        data:{"name":codeId},
                        success:function (data) {
                            layer.closeAll('loading');
                            if(data.code==1){
                                layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});
                                location.reload(true);
                            }else{
                                layer.msg('删除失败！', {icon: 2,time:3000,shade:0.2});
                            }
                        }
                    })
                })
            },
            getCheckData:function(){
                // var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                var checkStatus = table.checkStatus('testReload')
                    ,data = checkStatus.data;
                if(checkStatus.data.length==0){
                    layer.msg('请先选择要编辑的数据行！', {icon: 2});
                    return ;
                }
                var codeId= "";
                for(var i=0;i<checkStatus.data.length;i++){
                    codeId += checkStatus.data[i].id;
                }
                window.location.href = "editterminalPort.html?id="+codeId;
            }
        };
        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>

2.json

{
  "code": "0",
  "msg": "",
  "count": 2,
  "data": [
    {
      "name": "揽件员1",
      "describe": "文字文字文字文字文字文字"
    },
    {
      "name": "揽件员2",
      "describe": "文字文字文字文字文字文字"
    } 
  ]
}