V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Oathbinder
V2EX  ›  前端开发

这样的表格是如何实现的?

  •  
  •   Oathbinder · 2017-07-25 14:15:51 +08:00 · 2201 次点击
    这是一个创建于 2438 天前的主题,其中的信息可能已经有所发展或是发生改变。

    要用 bootstrap 做一个 SwitchyOmega 情景模式设置那样的表格,如图 不需要左边的排序功能,点击添加条件按钮就多一行,每行四列,每列一个文本框和一个删除当前条件的按钮,表格下面有个提交,点击之后读所有文本框的内容进行处理。

    刚学前端一天看起来这不像是 bootstrap+jquery 可以解决的,比如去访问非固定 id 的文本框内容,看了下 vue 的文档 https://vuejs.org/v2/guide/list.html 的 v-for demo 好像有点接近,但是一天前端经验看 vue 感觉非常难受,所以来问问思路和代码片段。谢谢

    7 条回复    2017-07-25 16:00:25 +08:00
    cxbig
        1
    cxbig  
       2017-07-25 14:23:58 +08:00
    Bootstrap 足以实现 Style 的部分
    这些表单内容是不是自动提交更新的?如果是,单用 jQuery 会比较费事。可以考虑用 React 或 Vue 做交互。
    Oathbinder
        2
    Oathbinder  
    OP
       2017-07-25 14:56:36 +08:00
    @cxbig 不用自动提交,用户输入完成之后点击提交按钮,如下图
    ![]( https://i.loli.net/2017/07/25/5976ea99ad06b.png)
    现在是我用固定文本框的 id 手动建的表格,如何才能实现点击 Add Condition 就添加一行,点击删除按钮删除所在行?
    coo
        3
    coo  
       2017-07-25 15:00:06 +08:00
    如果用 jQuery 的方法,可以维护一个列表,列表中存对象,然后每次数据发生变化时重新渲染到界面。

    当然还是推荐用 Vue,很好解决。
    cxbig
        4
    cxbig  
       2017-07-25 15:02:17 +08:00
    @Oathbinder
    通常的原理是每一行的 html 做成模板放前端,点击更新的时候 append 进去;
    删除的时候判断该行有没有 id (后台数据的 id ),有就在保存的时候发回一个 delete 信号,没有就直接干掉 html 即可。
    Mogugugugu
        5
    Mogugugugu  
       2017-07-25 15:06:18 +08:00
    楼主可以看看这个插件,API 什么的都还不错,实现楼主的场景不是问题。http://appendgrid.apphb.com/
    meepo3927
        6
    meepo3927  
       2017-07-25 15:10:02 +08:00
    才学一天吗,没有基础不好搞。

    用 vue.js 比较方便, 当然用 jquery 动态添加 html 也可以实现
    lneoi
        7
    lneoi  
       2017-07-25 16:00:25 +08:00
    看楼主只是要在界面上动态添加元素吧
    把那一行的 html 模板写好,然后点击按钮时,插入到 table 末尾就行了。
    删除,this 可以获取当前点击的,然后向上找 tr 父节点,就是包含此行 html 代码的那个容器,删掉即可。涉及后台取个参数发个 ajax,返回成功后再执行删除 html 操作。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3373 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 13:16 · PVG 21:16 · LAX 06:16 · JFK 09:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.