组件化的可编辑数据表格

宏猫
65 阅读4分钟

一、主要需求

假设表格中要显示的数据来自服务端，由JSON格式表示，格式如下：

[{pro1:val1,pro2:val2,pro3:val3,…},{pro1:val1,pro2:val2,pro3:val3,…},{pro1:val1,pro2:val2,pro3:val3,…},…]

（2）通过以上JSON格式的数组（数据自拟，建议数据对象不少于3个属性）生成可编辑表格，并且能灵活配置可编辑的数据列。

（3）能分别为不同的可编辑列提供验证规则。

（4）能配置和实现数据行的可删除操作。

（5）以上（2）、（3）、（4）均需提供默认配置，以简化可编辑表格函数的参数传递。

（6）数据修改能直接映射到从JSON生成的数据对象（该对象可作为缓存，以备提交到服务器）中。

二、设计方案和思路

  1. 需求分析： 确定可编辑表格的功能需求，包括点击单元格进入编辑模式、编辑完成后的确认逻辑、输入验证等。 分析配置参数的内容，确定如何以参数的形式接收可编辑列、验证规则、样式等。 使用fetch+json-server来实现数据获取（自己加的小需求）
  2. JavaScript逻辑： 编写函数来处理可编辑表格的逻辑，该函数接受表格DOM和配置对象作为参数。 在函数中，首先获取表格元素，并遍历其所有单元格，根据配置确定哪些列是可编辑的。 为可编辑的单元格添加点击事件监听器，当点击时，将单元格内容替换为文本框，并设置文本框的值为原内容。监听文本框的失去焦点（blur）事件或按下回车键（keydown）事件，作为确认编辑的触发条件。 在确认编辑前，根据配置中的验证规则对输入内容进行验证，如果不符合要求，给出提示并阻止确认。 如果验证通过，更新单元格的内容为文本框的值，并移除文本框，恢复为原始单元格状态。
  3. 配置参数处理： 定义默认配置对象，包含可编辑列的标识、默认验证规则、默认样式等。 在函数中，将传入的配置对象与默认配置对象合并，以覆盖默认配置。 根据合并后的配置对象，动态设置表格的交互和样式。
  4. 输入验证： 根据配置中的验证规则，编写验证函数来检查用户输入是否符合要求。 验证规则可以包括数据类型、长度限制、格式匹配等。 如果输入不符合规则，显示提示信息并阻止确认编辑。

三、目录结构

image.png

另外还在js中加上了utils，用来封装fetch请求

四、核心代码逻辑

image.png

image.png

image.png

image.png

image.png

补充easyhttp的fetch封装

export default class EasyHttp {
    get(url) {
        return new Promise((resolve, reject) => {
            fetch(url)
                .then(res => res.json())
                .then(data => resolve(data))
                .catch(err => reject(err))

        })
    }

    // post方式
    post(url, data) {
        return new Promise((resolve, reject) => {
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(res => res.json())
                .then(data => resolve(data))
                .catch(err => reject(err))

        })
    }


    //put 修改
    put(url, data) {
        return new Promise((resolve, reject) => {
            fetch(url, {
                method: 'PUT',
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(res => res.json())
                .then(data => resolve(data))
                .catch(err => reject(err))

        })
    }

    //delete
    delete(url, data) {
        return new Promise((resolve, reject) => {
            fetch(url, {
                method: 'DELETE',
                headers: {
                    'Content-type': 'application/json'
                },
            })
                .then(res => {
                    // 检查状态码  
                    if (res.ok) {
                        // 如果状态码是200-299，则解析JSON  
                        return res.json();
                    } else {
                        // 如果状态码表示错误，抛出一个错误或返回错误信息  
                        throw new Error(`HTTP error! status: ${res.status}`);
                    }
                })
                .then(data => {
                    // 成功时返回数据  
                    resolve(data);
                })
                .catch(err => {
                    // 出现错误时拒绝Promise  
                    reject(err);
                });
        });
    }
}

五、后续添加删除逻辑和修改及删除可以自动保存json的更新

image.png

配置项新增可删除项，方便后面解析 image.png 在渲染时，根据删除的配置渲染，动态添加删除按钮，并且加上可删除属性设置为true，方便下次使用

image.png 删除的具体逻辑加到了edit.js文件中，然后我们删除之后再发送请求即可

image.png

每次更改数据之后保存的逻辑，放在了验证为true之后

六、总结与反思

  1. 最好把需求分模块来完成，专业专职
  2. 一开始做本地数据json，没有考虑到后面进行修改之后post的需求，所以在代码设计上，可能没考虑到修改之后的json也跟着修改的需求，这次就没有完成了，是个遗憾
  3. 对数组和对象的api的使用可以进行练习一下，有些时候调不出来，提示没有这个方法
  4. JS对DOM操作的时候有很多种不同对象类型，每个不同的类型之间的操作和方法都不一样，需要总结:1.HTMLcollection2.nodelist3.纯HTML，目前来看使用nodelists来操作方法最方便， nodelist3可以直接通过children遍历出纯HTML节点操作，比较好用
avatar
文章
阅读
粉丝