应用场景: A与B之间存在一对多关系.

CBV实现方案:

CreateView/UpdateView + inlineformset + jquery

具体:

view方面:重写post/get方法, 或者 get_context_data/form_valid方法。

template方面:注意利用can_delete属性,{{form.DELETE}},将已存在的记录打上true标记,则在保存时自动删除相应记录。

jquery:注意元素的准确定位。这里罗嗦下:判断一行是否是已经存在的行还是新增加的(尚未保存到db)的行的方法是判断{{form.id}}生成的隐藏域的value是否为""或者undefined,如果是,则为新增的行,可以用jq将此行remove掉,同时不要忘了更新所有的控件的id以及行数保存的隐藏域的值。

$.each(function(index, each_obj){}).  (index在重新排定id时比较有用)

$.parent() (取得直接父元素)

$.parents() (取得所有父元素)

$.children() (取得所有子元素)

$.children().children() (此用法暂时还没明了过来)

通配符: $("[attr *= bbb]") ,$("[attr ^= bbb]") ,$("[attr $= bbb]") 分别是contains,start_with,end_with逻辑。

inlineformset的html操作的核心在于:

1) 行数(在隐藏域)

2) DELETE标志/id,在修改的时候是必需的

3) 至少要extra=1,多出一行的处理(hide/show),且此行作为模板行,隐藏起来。

4) 多种记录存在一个formset里面的处理(新增的记录,修改的记录,删除的记录),其中修改的记录和新增的处理比较简单--基本不用特别处理; 删除的情况有点复杂,删除原有的记录,还是删除新增加的记录,这个要人工判断,根据id隐藏域是否有value值,再相应的给delete标志位打标志。

简单示例可以查看这里:https://github.com/TommyU/dynamic_form

django动态表格总结的更多相关文章

  1. 在<s:iterator>标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

  2. HTML5&CSS3经典动态表格

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. django 动态更新属性值

    django 动态更新属性值 class TestTime(models.Model): """ 功能说明:指定测试的每一关总用时 """ ...

  4. 5.11-5.15javascript制作动态表格

    制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...

  5. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  6. jQuery的下面是动态表格动态表单中的HTML代码

    动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...

  7. JavaScript 创建动态表格

    JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...

  8. Java利用poi生成word(包含插入图片,动态表格,行合并)

    转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...

  9. jQuery动态表格插件 AppendGrid

    AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...

随机推荐

  1. 理解C#泛型

    在C# 2.0中引入了泛型,泛型的出现解决了编码中的很多问题.相信大家一定经常用到"System.Collections.Generic"命名空间中的泛型集合类("Gen ...

  2. 第三章:Javascript类型、值和变量。

    计算机程序的运行需要对值(value)比如数字3.14或者文本"hello world"进行操作,在编程语言中,能够表示并操作的值的类型叫做数据类型(type),编程语言最基本的特 ...

  3. Moqui学习Day4

    添加一个新建表单 添加一个按钮来弹出新建表单,并创建一个转换来处理输入数据操作. 在FindTutorial.xml文件中添加一个转换. <!--新增 列表 --> <transit ...

  4. Sublime Text 3 破解版 + 注册机 + 汉化包 + 教程

    SublimeText 是一个代码编辑器,也是HTML和散文先进的文本编辑器. SublimeText 是由程序员 Jon Skinner 于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展 ...

  5. HTTP协议强化理解

    一:第一波 1.  是什么? 答:是一种定义超文本在网络中如何进行传输的协议!   所有的WWW上的文件都必须遵循! 是基于TCP/IP. 传输路径:  客户端<——>服务端  (全双工) ...

  6. OC基础--self关键字&super关键字

    PS:OC中的self关键字可以与C#中的this关键字区分记忆,虽然区别还是很大的. OC中的super关键字指的是父类指针 一.self关键字必须了解的知识: 1.使用场合:只能用在方法中(对象方 ...

  7. Java基础-转义字符

    Java中的字符占两个字节.一些常用的转义字符: ①\r表示接受键盘输入,相当于按下了回车键: ②\n表示换行: ③\t表示制表符,相当于Table键: ④\b表示退格键,相当于Back Space键 ...

  8. Oracle中的伪列

    分页查询中,需要用到伪列rownum,代码如下: select * from (select rownum rn, name from cost where rownum <= 6) where ...

  9. ElasticSearch插件安装Head、Kopf与Bigdesk

    ElasticSearch-Head ElasticSearch-Head 是一个与Elastic集群(Cluster)相交互的Web前台. ES-Head的主要作用 它展现ES集群的拓扑结构,并且可 ...

  10. POJ2594 Treasure Exploration

    Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 8193   Accepted: 3358 Description Have ...