一个增删改功能的表格小demo

ideaa 发布于2019-08-22 17:23 / 1164人阅读

摘要：项目中遇到的一个小功能，原来的开发的写法可能有点冗余了，扩展性不高，又出了点小，特此回来自己写个类似的小，遇到的一些问题记录一下。这个里，是不可以被污染更改的。

项目中遇到的一个小功能，原来的开发的写法可能有点冗余了，扩展性不高，又出了点小bug，特此回来自己写个类似的小demo，遇到的一些问题记录一下。
大概这样

一个操作保留在本地的一个小表格（简化样式了）

请求的数据是所有的 name 列的数据

name列是个select，option会随着表格数据的增加而改变，也就是option不会和列表数据重复

三个主要方法，add，delete，change。因为最近想学习下lodash，深拷贝用的 _.cloneDeep()

设计

开始前一定思考下这个怎么实现会比较好，项目用的vue，抛弃原本的jquery，基于vue的数据驱动去做，响应式这块vue帮我们做好了。

下面是html的写法，一个v-for去实现页面

表格的数据是 dataList，数据结构这样

dataList:[
         {
             id:"a",//做提交时需要，当前行数据的id
             list:[//name 列select的option数据
                {
                    name:"a",
                    id:"a"
                },
                {
                    name:"b",
                    id:"b"
                },
                {
                    name:"c",
                    id:"c"
                },
                {
                    name:"d",
                    id:"d"
                },
             ]
         }
     ]

这里是最简单的结构了

然后一般我们在初始化的时候向后台请求到初始的数据，就是dataList中的list，我这里设定的假数据这样

resource:[
            {
                name:"a",
                id:"a"
            },
            {
                name:"b",
                id:"b"
            },
            {
                name:"c",
                id:"c"
            },
            {
                name:"d",
                id:"d"
            },
        ]

初始化

init(){
        let resource=_.cloneDeep(this.resource)
        let obj={
            list:resource,
            id:resource[0].id
        };
        this.dataList=[];
        this.dataList.push(obj);
      }

这里出现了深拷贝，因为我们的数据结构是引用类型嵌套引用类型，这里如果不深拷贝，那下面我对dataList中的项进行更改时，this.resource也会被更改。这个demo里，this.resource是不可以被污染更改的。这也是坑之一了

add

 add(){
            let that=this;
            //新建条数限制
            if(that.dataList.length>=that.resource.length){
              return false
            }
            //深拷贝数据
            let allData=_.cloneDeep(that.resource);
            // 新增时，判断已经创建的数据，然后先在对应的数据里删除  
            //这里对allData进行了操作，splice操作会直接更改原数组，并且allData是外层循环，如果先splice后，再循环内层，在运行 [i].id这个操作时会报错
            //allData是复制出来的源数组，dataList是表格内的数组
            for(let i=0;i
这里除去深拷贝的坑，还有一个是  如果在嵌套循环中需要更改数组（例如splice方法），那么需要被更改的数组一定最后一个被嵌套循环。否则在一些判断条件里会出错.
delete
        deleteTr(msg,index){
            let that=this;
            if(that.dataList.length<=1){
                return false;
            }
            //先直接删除,去掉对应数据
            that.dataList.splice(index,1);
            //处理对应数据里下拉框里的数据
            //复制一份源数据
            let allData=_.cloneDeep(that.resource);
            let obj={};
            //遍历找出删掉的是数组里的哪个数据,然后吧他给obj
            for(let i=0,len=allData.length; i
这里正常删除再添加
change
        change(msg,index){
            let that=this;
            //更改dataList中的list
            //把所有已选的数据多带带放置到一个arr数组里
            let arr=[];
            for(let k=0,len=that.dataList.length;k
这里我把select的v-model设置成msg.id，这样每次切换时id会自动变化。
 //         let allData=_.cloneDeep(that.resource);
            for(let  i =0,len=that.dataList.length; i
这一段最开始也错了，开始是注释的那行。
dataList里的每个list都需要独立的内存地址，所以这里需要循环深拷贝。
总结
刚刚写完代码，测了下功能没有问题就来记录了，代码还没有迭代优化，自己也没有想到更好的处理数据的方法，但是总觉得自己这个嵌套着的循环性能有些低下了。
会优化一下代码
刚回看一下就发现不少需要改的地方。不过需要休息了，下次编辑一下
日常鼓励自己。。。
这样的表格也的确不适合数据量大的情况，数据量大的情况需要换一下实现思路。
msl比赛1:1时开始写功能，写完看下朋友圈，md好像错过了什么。

云服务器海外云主机 java增删改查功能 php增删改查小项目增删改大数据增删改

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95132.html

Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查

摘要：最近在做毕设，同学在做前端页面的时候使用到和这些控件，然后自己又在刷题的时候遇到一个这个的实现，于是就自己去官网文档上学习了一下，尝试实现这个官方文档代码代码效果如下图示顶部结构页面上的三个，增删改新增修改删除这里的框的最近在做毕设，同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件，然后自己又在刷题的时候遇到一个这个demo的实现，于是就自己去...

oneasp 2019-08-22 18:28 评论0 收藏0
fsLayui介绍(layui插件)

摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。 fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。 GitHub下载码云下载测试环境地址：http://fslayui.itcto.cn 为什么要使用fsLa...

Barry_Ng 2019-08-22 11:16 评论0 收藏0
表格的增删改demo

摘要：前端菜鸟，下午没什么活儿，写了个不过脑子的，十分喜欢妖尾，就用妖尾做了模拟数据，大伙儿轻喷。前端菜鸟，下午没什么活儿，写了个不过脑子的demo，十分喜欢妖尾，就用妖尾做了模拟数据，大伙儿轻喷。设计感为0，页面配色丑得我都不想看，在此膜拜我司UI工程师，很多实现功能的地方没有想到更好的办法，希望各位大佬斧正！效果图 showImg(https://segmentfault.com/i...

lastSeries 2019-08-23 12:57 评论0 收藏0
fsLayui联动表格使用(二)

摘要：复杂联动表格使用点击主表格，加载副表格数据，支持主副表格的增删改查操作。演示地址复杂联动表格配置和基础联通表格类似，在基础上扩展一些增删改查功能，基础联动表格参考复杂的联动表格需要在基础表格上增加配置和按钮操作。复杂联动表格使用点击主表格，加载副表格数据，支持主、副表格的增删改查操作。演示地址：http://fslayui.itcto.cn 复杂联动表格配置和基础联通...

miguel.jiang 2019-08-01 18:15 评论0 收藏0
fsLayui联动表格使用(二)

摘要：复杂联动表格使用点击主表格，加载副表格数据，支持主副表格的增删改查操作。演示地址复杂联动表格配置和基础联通表格类似，在基础上扩展一些增删改查功能，基础联动表格参考复杂的联动表格需要在基础表格上增加配置和按钮操作。复杂联动表格使用点击主表格，加载副表格数据，支持主、副表格的增删改查操作。演示地址：http://fslayui.itcto.cn 复杂联动表格配置和基础联通...

kel 2019-08-22 11:23 评论0 收藏0