欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

layui+ssm實(shí)現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)功能

 更新時(shí)間：2023年12月08日 09:33:39   作者：洛洛不覺  
在使用layui加載后端數(shù)據(jù)請(qǐng)求時(shí),對(duì)數(shù)據(jù)選項(xiàng)框進(jìn)行雙擊即可實(shí)現(xiàn)數(shù)據(jù)的輸入編輯更改,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

layui實(shí)現(xiàn)數(shù)據(jù)表格雙擊編輯數(shù)據(jù)更新

在使用layui加載后端數(shù)據(jù)請(qǐng)求時(shí)，對(duì)數(shù)據(jù)選項(xiàng)框進(jìn)行雙擊即可實(shí)現(xiàn)數(shù)據(jù)的輸入編輯更改

代碼塊

    var form = layui.form, table = layui.table,
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        laypage = layui.laypage;
    var util = layui.util;
    $ = layui.jquery;
    //數(shù)據(jù)表格
    table.render({
        id: 'categoryList',
        elem: '#categoryList',
        url: ctx + "/book/getCategoryList", //數(shù)據(jù)接口
        cellMinWidth: 80,
        toolbar: '#toolbar',
        editTrigger: 'dblclick',// 觸發(fā)編輯的事件類型（默認(rèn) click ）
        limit: 10,//每頁(yè)條數(shù)
        limits: [10, 20, 30, 40],
        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
        css: [
            // 對(duì)開啟了編輯的單元格追加樣式
            '.layui-table-view td[data-edit]{color: #16B777;}'
        ].join(''),
        cols: [[ //表頭
            {type: 'numbers', title: '序號(hào)', width: 80},//序號(hào)列
            {field: 'categoryName', title: '類別名稱', align: 'center', edit: 'textarea'},// edit: 'textarea'主要標(biāo)記當(dāng)前項(xiàng)是否啟用編輯
            {field: 'categoryDesc', title: '類別說明', align: 'center', edit: 'textarea'},
            {
                field: 'categoryDate',
                title: '創(chuàng)建時(shí)間',
                sort: true,
                align: 'center',
                templet: '<div>{{ formatTime(d.categoryDate,"yyyy-MM-dd hh:mm:ss")}}</div>'
            },
            {
                fixed: 'right', title: '操作', align: 'center', templet: function (d) {
                    return '<button class="layui-btn  layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">編輯</i></button>'
                        + '<button class="layui-btn layui-bg-red layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete">刪除</i></button>';
                }
            },
        ]],
        page: true
    });
   /*
   * 單元格雙擊編輯事件
   * */
    table.on('edit(categoryList)', function (obj) {
        var field = obj.field; // 得到修改的字段
        var value = obj.value // 得到修改后的值
        var cateId = obj.data.cateId; // 獲取當(dāng)前修改數(shù)據(jù)的id
        // 值的校驗(yàn)
        if (value.replace(/\s/g, '') === '') {
            layer.msg('修改值不能為空！');
            return obj.reedit(); // 重新編輯
        }
        // 編輯后續(xù)操作，如提交更新請(qǐng)求，以完成真實(shí)的數(shù)據(jù)更新
        var index = top.layer.msg('正在將新數(shù)據(jù)寫入數(shù)據(jù)庫(kù)，請(qǐng)稍候...', {icon: 16, time: false, shade: 0.8});
        var msg;
        setTimeout(function () {
            $.ajax({
                type: "POST",
                url: ctx + "/book/updateCate",
                data: {
                    cateId: cateId, // 獲取當(dāng)前修改數(shù)據(jù)的id
                    field: field,// 得到修改的字段
                    value: value,// 得到修改后的值
                },
                success: function (d) {
                    if (d.code == 0) {
                        msg = d.msg;
                    } else {
                        msg = d.msg;
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    layer.msg("獲取數(shù)據(jù)失??！ 先檢查sql 及 Tomcat Localhost Log 的輸出");
                }
            }).done(function () {
                top.layer.close(index);
                top.layer.msg(msg);
                layer.closeAll("iframe");
                setTimeout(function () {
                    parent.location.reload();
                }, 1000);
            });
        }, 2000);
    });
});

這里只要使用layui和后端ssm框架實(shí)現(xiàn)，所以后端代碼
controller代碼

 /*
     * 數(shù)據(jù)更新操作
     * */
    // 更新分類信息的接口
    @RequestMapping("/updateCate")
    @ResponseBody
    //根據(jù)前端提供的id,更改的字段，更改的值進(jìn)行查詢更新
    public ResultUtil updateCate(Integer cateId, String field, String value) throws ParseException {
        // 打印傳入的分類ID、字段和值
      /*  System.out.println(cateId);
        System.out.println(value);
        System.out.println(field);*/
        // 根據(jù)分類ID獲取分類實(shí)體
        CategoryEntity categoryEntity = bookService.getCategoryById(cateId);
        // 打印獲取到的分類實(shí)體
        System.out.println(categoryEntity);
        // 插入當(dāng)前時(shí)間作為修改時(shí)間
        Date data = new Date();
        // 創(chuàng)建一個(gè)SimpleDateFormat對(duì)象，用于格式化日期
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        // 使用SimpleDateFormat對(duì)象將Date對(duì)象轉(zhuǎn)換為字符串格式的日期
        String nowTime = simpleDateFormat.format(data);
        // 使用SimpleDateFormat對(duì)象將字符串格式的日期解析為Date對(duì)象
        Date date1 = simpleDateFormat.parse(nowTime);
        // 如果獲取到的分類實(shí)體不為空
        if (categoryEntity != null) {
            // 根據(jù)字段名進(jìn)行相應(yīng)的操作
            switch (field) {
                case "categoryDesc":
                    categoryEntity.setCategoryDesc(value);
                    break;
                case "categoryName":
                    categoryEntity.setCategoryName(value);
                    break;
                default:
                    // 如果字段名不符合要求，返回錯(cuò)誤信息
                    return ResultUtil.error("提交的數(shù)據(jù)有問題，請(qǐng)檢查！");
            }
            // 設(shè)置修改時(shí)間
            categoryEntity.setCategoryDate(date1);
            // 更新分類實(shí)體
            bookService.updateCategory(categoryEntity);
            // 返回成功信息
            return ResultUtil.ok("數(shù)據(jù)信息更新成功！");
        }
        // 如果獲取到的分類實(shí)體為空，返回錯(cuò)誤信息
        return ResultUtil.error("提交的數(shù)據(jù)有問題，請(qǐng)檢查！");
    }

service

    /*
    * 數(shù)據(jù)更新
    * */
    void updateCategory(CategoryEntity categoryEntity);
    /*
    * 根據(jù)id機(jī)型查詢數(shù)據(jù)
    *
    * */
    CategoryEntity getCategoryById(Integer cateId);

serviceImpl

    /*
     * 數(shù)據(jù)更新
     * */
    @Override
    public void updateCategory(CategoryEntity categoryEntity) {
        categoryDao.updateCategory(categoryEntity);
    }
    /*
     * 根據(jù)id查詢數(shù)據(jù)
     * */
    @Override
    public CategoryEntity getCategoryById(Integer cateId) {
        return categoryDao.getCategoryById(cateId);
    }

dao

  /*
    * 數(shù)據(jù)更新updateCategory
    * */
    void updateCategory(CategoryEntity categoryEntity);
    /*
    * 根據(jù)id查詢數(shù)據(jù)
    * */
    CategoryEntity getCategoryById(Integer cateId);

mapper.xml

 <!--根據(jù)id查詢數(shù)據(jù)-->
    <select id="getCategoryById"
            resultType="layui.library.manager.project.entity.CategoryEntity">
        SELECT *
        FROM tb_book_category
        where cateId = #{cateId}
    </select>
    <!--數(shù)據(jù)更新-->
    <update id="updateCategory" parameterType="layui.library.manager.project.entity.CategoryEntity">
        update tb_book_category
        <set>
            <if test="categoryName!=null">
                categoryName=#{categoryName},
            </if>
            <if test="categoryDesc!=null">
                categoryDesc=#{categoryDesc},
            </if>
            <if test="categoryDate!=null">
                categoryDate=#{categoryDate}
            </if>
        </set>
        where cateId=#{cateId}
    </update>

到此這篇關(guān)于layui+ssm實(shí)現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)的文章就介紹到這了,更多相關(guān)layui數(shù)據(jù)表格雙擊編輯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論