layui可編輯表格新增、儲存、删除操作以及注意事項

Layui一直是本小編使用的前端，因為使用友善可操作性強外觀美觀，讓後端全棧的小編感覺很巴适。總結使人進步，那麼現在我就直接撒幹貨了。這篇博文分兩部分吧，顯示總結性的講解一下，然後小編會在第二部分把源碼直接粘出來與大家共享，一是友善以後自己用了可以直接拿過來用，二是友善有困難的小夥伴直接粘貼一個demo來根據自己的需求改進。這篇文章會直接吧可編輯清單的新增一行、删除、更新以及查詢都講一遍。

一、可編輯表格相關解析

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" target="_blank" rel="external nofollow"  />
    <link rel="stylesheet" type="text/css" href="/larryms/larry/css/larry.css" target="_blank" rel="external nofollow"  media="all">
    <link rel="stylesheet" type="text/css" href="/larryms/css/base.css" target="_blank" rel="external nofollow"  media="all">
    <link rel="stylesheet" type="text/css" href="/larryms/css/dataquery/admin.css" target="_blank" rel="external nofollow"  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");
    }

layui可編輯表格新增、儲存、删除操作以及注意事項

繼續閱讀

大型項目的一些思考

ASP.NET頁面修改模闆頁Title、SeoKeywords、SeoDescription

xx 2.0項目軟體開發代碼泥團問題

關于小程式如何跟公衆号關聯的解決方法

_CRT_SECURE_NO_WARNINGS錯誤提示

解決Layui導出長數字變科學計數

layui彈出框confirm自定義樣式

Layui實作一個簡單的布局

layui table關閉分頁，隻顯示預設的前10條資料的問題解決方法

IDEA中用maven生成的目錄結構中沒有src/test目錄解決辦法

SQLServer 提升查詢速度

Bmob(wechatApp)--查詢資料1.查詢所有資料2.查詢第一條資料3.根據id查詢4.條件查詢5.分頁查詢6.查詢指定字段

Bmob(wechatApp)--對象的增删改1.建立對象2.添加資料3.修改資料4.删除資料

DataBaby | 跨伺服器異構資料庫查詢結果整合實驗跨庫Table合并全自助查詢、對賬系統探路之行

layui多任務上傳添加進度條