要用 bootstrap 做一个 SwitchyOmega 情景模式设置那样的表格,如图 不需要左边的排序功能,点击添加条件按钮就多一行,每行四列,每列一个文本框和一个删除当前条件的按钮,表格下面有个提交,点击之后读所有文本框的内容进行处理。
刚学前端一天看起来这不像是 bootstrap+jquery 可以解决的,比如去访问非固定 id 的文本框内容,看了下 vue 的文档 https://vuejs.org/v2/guide/list.html 的 v-for demo 好像有点接近,但是一天前端经验看 vue 感觉非常难受,所以来问问思路和代码片段。谢谢
1
cxbig 2017-07-25 14:23:58 +08:00
Bootstrap 足以实现 Style 的部分
这些表单内容是不是自动提交更新的?如果是,单用 jQuery 会比较费事。可以考虑用 React 或 Vue 做交互。 |
2
Oathbinder OP @cxbig 不用自动提交,用户输入完成之后点击提交按钮,如下图
![]( https://i.loli.net/2017/07/25/5976ea99ad06b.png) 现在是我用固定文本框的 id 手动建的表格,如何才能实现点击 Add Condition 就添加一行,点击删除按钮删除所在行? |
3
coo 2017-07-25 15:00:06 +08:00
如果用 jQuery 的方法,可以维护一个列表,列表中存对象,然后每次数据发生变化时重新渲染到界面。
当然还是推荐用 Vue,很好解决。 |
4
cxbig 2017-07-25 15:02:17 +08:00
@Oathbinder
通常的原理是每一行的 html 做成模板放前端,点击更新的时候 append 进去; 删除的时候判断该行有没有 id (后台数据的 id ),有就在保存的时候发回一个 delete 信号,没有就直接干掉 html 即可。 |
5
Mogugugugu 2017-07-25 15:06:18 +08:00
楼主可以看看这个插件,API 什么的都还不错,实现楼主的场景不是问题。http://appendgrid.apphb.com/
|
6
meepo3927 2017-07-25 15:10:02 +08:00
才学一天吗,没有基础不好搞。
用 vue.js 比较方便, 当然用 jquery 动态添加 html 也可以实现 |
7
lneoi 2017-07-25 16:00:25 +08:00
看楼主只是要在界面上动态添加元素吧
把那一行的 html 模板写好,然后点击按钮时,插入到 table 末尾就行了。 删除,this 可以获取当前点击的,然后向上找 tr 父节点,就是包含此行 html 代码的那个容器,删掉即可。涉及后台取个参数发个 ajax,返回成功后再执行删除 html 操作。 |