layui可编辑表格新增、保存、删除操作以及注意事项

Layui一直是本小编使用的前端，因为使用方便可操作性强外观美观，让后端全栈的小编感觉很巴适。总结使人进步，那么现在我就直接撒干货了。这篇博文分两部分吧，显示总结性的讲解一下，然后小编会在第二部分把源码直接粘出来与大家共享，一是方便以后自己用了可以直接拿过来用，二是方便有困难的小伙伴直接粘贴一个demo来根据自己的需求改进。这篇文章会直接吧可编辑列表的新增一行、删除、更新以及查询都...

Edward·Che

11647人浏览 · 2019-10-11 10:38:30

Edward·Che · 2019-10-11 10:38:30 发布

一、可编辑表格相关解析

1、使用关键词edit:'text'，使表格点击变为编辑状态

这个用在js里，是一个属性值，意思就是用文本的方式来编辑。可以参照以下代码：其中的三个字段都加了这个属性，所以表格当点击的时候就会变成编辑状态了。

    var mUrl = interface_jwcaseinfo_queryChoose,
        mIns = table.render({
            elem: '#case',
            id: "case",
            cellMinWidth: 95,
            url: mUrl,
            method: 'get',
            height: "full-155",
            page: true,
            limits: [5, 10, 15, 20, 25, 30, 35, 40],
            limit: 5,
            response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'code', //状态字段名称
                statusCode: 200, //状态字段成功值
                msgName: 'msg', //消息字段
                countName: 'count', //总数字段
                dataName: 'data' //数据字段
            },
            cols: [
                [{
                    type: "radio",
                    width: 60,
                    fixed: 'center',
                }, {
                    field: 'CASE_NAME',
                    title: '案件名称',
                    minWidth: 160,
                    edit: 'text',
                    align: 'center'
                },{
                    field: 'UNDERTAKER_NAME',
                    title: '承办人姓名',
                    minWidth: 160,
                    edit: 'text',
                    align: 'center'
                }, {
                    field: 'CRT_TIME',
                    title: '创建时间',
                    minWidth: 160,
                    edit: 'text',
                    align: 'center'
                }]
            ]
        });

2、点击新增按钮新增一行

1）html页面代码

其实就是一个按钮

<button type="button" class="layui-btn" data-type="addRow" title="添加一行">
    <i class="layui-icon layui-icon-add-1"></i> 添加一行
</button>

2）增加监听

在layui中监听还是很有意思的，先通过layui-ui样式进行绑定，然后再根据data-type属性不同的类别区分进行不同的操作，通过三元式的判别type，来进行不同方法的执行：

①增加操作：

在点击增加调用该方法后，通过获取返回来的数据数组，来进行拼接操作。然后再进行重新加载表格的操作，即可在页面实现新增一行的效果。

②保存操作：

通过循环操作，判断每一行是否LAY_CHECKED状态来进行判断是否选中，然后将选中的数据进行保存操作。

③删除操作：

理念同保存操作。

    //按钮组监听
    $('.layui-btn').on('click', function() {
        var type = $(this).data('type'),
            url = $(this).data('url'),
            tit = $(this).children('cite').text();
        panelaction[type] ? panelaction[type].call(this) : '';
    });
    //定义事件集合
    var panelaction = {
        addRow: function(){	//添加一行
            var thisTime = getDate();
            var thisUserName = layui.sessionData("userModel").userName;
            var oldData = table.cache[layTableId];
            console.log(oldData);
            var newRow = {CASE_NAME: null,UNDERTAKER_NAME: thisUserName, CRT_TIME: thisTime};
            var currentPage = $(".layui-laypage-em").next().html();
            oldData.unshift(newRow);
            //oldData.push(newRow);
            mIns.reload({
                page: {
                    curr: 1
                },
                url: '',
                data : oldData
            });
        },
        save: function(){
            var oldData = table.cache[layTableId];
            console.log(oldData);

            var row = '';
            for(var i=0, tempRow; i < oldData.length; i++){
                tempRow = oldData[i];
                if(tempRow.LAY_CHECKED==true){
                    row = tempRow;
                }
            }
            if(null==row||""==row){
                layer.msg("请选择一行！", { icon: 5 }); //提示
                return;
            }
            if(null==row.UNDERTAKER_NAME||null==row.CASE_NAME){
                layer.msg("检查每一行，请选择分类！", { icon: 5 }); //提示
                return;
            }
            //var resData = JSON.stringify(row, null, 2);	//使用JSON.stringify() 格式化输出JSON字符串
            saveData(row);
        },
        delRow: function(){
            var oldData = table.cache[layTableId];
            console.log(oldData);

            var row = '';
            for(var i=0, tempRow; i < oldData.length; i++){
                tempRow = oldData[i];
                if(tempRow.LAY_CHECKED==true){
                    row = tempRow;
                }
            }
            if(null==row||""==row){
                layer.msg("请选择一行！", { icon: 5 }); //提示
                return;
            }
            var resData = JSON.stringify(row, null, 2);	//使用JSON.stringify() 格式化输出JSON字符串
            delData(row);
        }
    }

④查询操作：

查询操作还是很巴适的这个设计理念，通过where来进行表格条件筛选查询。

    $('#searchBtn').on('click', function() {
        var caseName = $('#caseName').val();
        if (caseName != '') {
            table.reload("case", {
                page: {
                    curr: 1
                },
                where: {
                    CASE_NAME: caseName
                }
            })
        } else {
            table.reload("case", {
                page: {
                    curr: 1
                },
                where: {
                    CASE_NAME: ''
                }
            })
        }
    });

二、源码展示

1、html页面全源码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8">
    <title>案件选择</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Author" content="larry" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/larryms/larry/css/larry.css" media="all">
    <link rel="stylesheet" type="text/css" href="/larryms/css/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="/larryms/css/dataquery/admin.css" media="all">
    <style>
        .layui-form {
            height: 284px !important;
        }
        .layui-table-box{
            height: 234px !important;
        }
        .layui-table-body{
            height: 183px !important;
        }
    </style>
</head>

<body class="larryms-system">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<section class="layui-col-md12" style="margin: 0 auto; float: none;">
    <div class="layui-row larryms-panel">
        <div class="larryms-panel-body layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" style="height:374px; ">
            <form class="layui-inline fr layui-hide-xs" style="float: left;">
                <div class="larryms-search-box">
                    <div class="layui-input-inline">
                        <input type="text" name="caseName" id="caseName"  class="layui-input searchVal layui-inline" placeholder="案件名称" onkeypress="if(event.keyCode==13) {searchBtn.click();return false;}" autocomplete="off">
                    </div>
                    <a class="layui-btn larryms-search" id="searchBtn" data-type="reload">搜索</a>
                </div>
            </form>
            <div class="layui-inline" style="float: right">
                <button type="button" class="layui-btn" data-type="addRow" title="添加一行">
                    <i class="layui-icon layui-icon-add-1"></i> 添加一行
                </button>
                <button type="button" name="btnSave" class="layui-btn layui-btn-normal" data-type="save"><i class="layui-icon layui-icon-ok-circle"></i>保存</button>
                <button type="reset" name="btnReset" class="layui-btn layui-btn-danger" data-type="delRow"><i class="larry-icon larry-cha"></i>删除</button>
            </div>
            <div id="tableRes" class="user-list layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" style="height: 294px;">
                <table class="larryms-table-id" id="case" lay-filter="company" data-url="/larryms/data/dataquery/viewjwhistorychoose.json"></table>
            </div>
        </div>
    </div>
</section>

<!-- 加载js文件-->
<script type="text/javascript" src="/larryms/layui/layui.js"></script>
<script type="text/javascript" src="/larryms/plus/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/larryms/mods/dataquery/constant.js"></script>
<script type="text/javascript">
    layui.cache.page = 'viewjwhistorychoose';
    layui.config({
        version:"2.0.8",
        base:'/larryms/',  //实际使用时，建议改成绝对路径
        //entry:'test/', //自定义项目js入口，CDN资源引用或自定义js存放路径请设置该值，如默认请不要设置该参数
        mods:'dataquery/',
        rightMenu: false // false关闭，设置为custom时使用自定义，不使用默认menu
    }).extend({
        larry:'js/base'
    }).use('larry');
</script>
</body>

</html>

2、js全源码

layui.define(['jquery', 'table', 'larryms','forms','laydate','layer'], function(exports) {
    var $ = layui.$,
        table = layui.table,
        forms = layui.forms,
        laydate = layui.laydate,
        larryms = layui.larryms,
        layer = layui.layer;

    var tbWidth = $("#tableRes").width();
    var layTableId = "case";
    var mUrl = interface_jwcaseinfo_queryChoose,
        mIns = table.render({
            elem: '#case',
            id: "case",
            cellMinWidth: 95,
            url: mUrl,
            method: 'get',
            height: "full-155",
            page: true,
            limits: [5, 10, 15, 20, 25, 30, 35, 40],
            limit: 5,
            response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'code', //状态字段名称
                statusCode: 200, //状态字段成功值
                msgName: 'msg', //消息字段
                countName: 'count', //总数字段
                dataName: 'data' //数据字段
            },
            cols: [
                [{
                    type: "radio",
                    width: 60,
                    fixed: 'center',
                }, {
                    field: 'CASE_NAME',
                    title: '案件名称',
                    minWidth: 160,
                    edit: 'text',
                    align: 'center'
                },{
                    field: 'UNDERTAKER_NAME',
                    title: '承办人姓名',
                    minWidth: 160,
                    edit: 'text',
                    align: 'center'
                }, {
                    field: 'CRT_TIME',
                    title: '创建时间',
                    minWidth: 160,
                    edit: 'text',
                    align: 'center'
                }]
            ]
        });
    $('#searchBtn').on('click', function() {
        var caseName = $('#caseName').val();
        if (caseName != '') {
            table.reload("case", {
                page: {
                    curr: 1
                },
                where: {
                    CASE_NAME: caseName
                }
            })
        } else {
            table.reload("case", {
                page: {
                    curr: 1
                },
                where: {
                    CASE_NAME: ''
                }
            })
        }
    });

    //按钮组监听
    $('.layui-btn').on('click', function() {
        var type = $(this).data('type'),
            url = $(this).data('url'),
            tit = $(this).children('cite').text();
        panelaction[type] ? panelaction[type].call(this) : '';
    });
    //定义事件集合
    var panelaction = {
        addRow: function(){	//添加一行
            var thisTime = getDate();
            var thisUserName = layui.sessionData("userModel").userName;
            var oldData = table.cache[layTableId];
            console.log(oldData);
            var newRow = {CASE_NAME: null,UNDERTAKER_NAME: thisUserName, CRT_TIME: thisTime};
            var currentPage = $(".layui-laypage-em").next().html();
            oldData.unshift(newRow);
            //oldData.push(newRow);
            mIns.reload({
                page: {
                    curr: 1
                },
                url: '',
                data : oldData
            });
        },
        updateRow: function(obj){
            var oldData = table.cache[layTableId];
            console.log(oldData);
            for(var i=0, row; i < oldData.length; i++){
                row = oldData[i];
                if(row.tempId == obj.tempId){
                    $.extend(oldData[i], obj);
                    return;
                }
            }
            tableIns.reload({
                data : oldData
            });
        },
        removeEmptyTableCache: function(){
            var oldData = table.cache[layTableId];
            for(var i=0, row; i < oldData.length; i++){
                row = oldData[i];
                if(!row || !row.tempId){
                    oldData.splice(i, 1);    //删除一项
                }
                continue;
            }
            tableIns.reload({
                data : oldData
            });
        },
        save: function(){
            var oldData = table.cache[layTableId];
            console.log(oldData);

            var row = '';
            for(var i=0, tempRow; i < oldData.length; i++){
                tempRow = oldData[i];
                if(tempRow.LAY_CHECKED==true){
                    row = tempRow;
                }
            }
            if(null==row||""==row){
                layer.msg("请选择一行！", { icon: 5 }); //提示
                return;
            }
            if(null==row.UNDERTAKER_NAME||null==row.CASE_NAME){
                layer.msg("检查每一行，请选择分类！", { icon: 5 }); //提示
                return;
            }
            //var resData = JSON.stringify(row, null, 2);	//使用JSON.stringify() 格式化输出JSON字符串
            saveData(row);
        },
        delRow: function(){
            var oldData = table.cache[layTableId];
            console.log(oldData);

            var row = '';
            for(var i=0, tempRow; i < oldData.length; i++){
                tempRow = oldData[i];
                if(tempRow.LAY_CHECKED==true){
                    row = tempRow;
                }
            }
            if(null==row||""==row){
                layer.msg("请选择一行！", { icon: 5 }); //提示
                return;
            }
            var resData = JSON.stringify(row, null, 2);	//使用JSON.stringify() 格式化输出JSON字符串
            delData(row);
        }
    }

    function saveData(data) {
        $.ajax({
            cache: true,
            type: "POST",
            dataType: 'json',
            contentType : 'application/json;charset=utf-8',//缺少这个415
            url:interface_jwCaseInfo_saveData,
            data:JSON.stringify(data),
            async: false,
            error: function(request) {
                larryms.msg("新增出错！");
            },
            success: function(data) {
                var dsall = data.data;
                window.location.reload();
                larryms.msg("新增成功！");
            }
        });
    }

    function delData(data) {
        $.ajax({
            cache: true,
            type: "DELETE",
            dataType: 'json',
            contentType : 'application/json;charset=utf-8',//缺少这个415
            url:interface_jwCaseInfo_delData,
            data:JSON.stringify(data),
            async: false,
            error: function(request) {
                larryms.msg("删除出错！");
            },
            success: function(data) {
                mIns.reload();
                larryms.msg("删除成功！");
            }
        });
    }

    function getDate() {
        var oDate = new Date(); //实例一个时间对象；
        var year = oDate.getFullYear();   //获取系统的年；
        var month = oDate.getMonth()+1;   //获取系统月份，由于月份是从0开始计算，所以要加1
        var date = oDate.getDate(); // 获取系统日，
        var hour = oDate.getHours(); //获取系统时，
        var min = oDate.getMinutes(); //分
        var sec = oDate.getSeconds(); //秒
        return year+"-"+month+"-"+date+" "+hour+":"+min+":"+sec;
    }
    exports('viewjwhistorychoose', {});
});

3、后台controller源码

其中保存是需要在后台判断是否有主键来判定是执行新增还是更新操作的。

    @Autowired
    private JwCaseInfoService jwCaseInfoService;

    @PostMapping("/saveData")
    @ApiOperation(value = "存储信息", notes = "存储信息")
    public Bean saveData(@RequestBody Map<String,String> params){
        jwCaseInfoService.insertData(params);
        return new Bean("success");
    }

    @DeleteMapping("/delData")
    @ApiOperation(value = "存储信息", notes = "存储信息")
    public Bean delData(@RequestBody Map<String,String> params){
        jwCaseInfoService.deleteData(params);
        return new Bean("success");
    }