好的，久违的代码干货荣耀回归。
本节内容继续开发我们的项目内全局变量，在此之前，先让我们一起回顾下，之前我们的进度：
我们的设计是，在项目内，新增了一个全局变量的页面：
紧接着，我们求建造了对应的数据库的表，然后又去后台新建了一个demo数据：
然后在views.py中，成功通过child_json() 绑定了页面和这套数据：
接下来我们就要来搞前端交互，创造一套可以增删改查的 全局变量的 前端页面。
既然我们已经成功搞定了后端进入的函数，所以我们专心搞前端：
打开我们的P_global_data.html：
跟随我的思路开始想，要展示表中所有符合的变量套，那么前端最外层应该是个for循环才对：
那里面呢？我的设计是 循环的是变量套的名字，名字本身是一个按钮，点击可以进入编辑：
添加了这个按钮后，看看当前的样子：
可以发现位置 肯定不好。所以我们 给它换个好的位置：
现在距离左边界有了100px的距离了：
现在我们去后台，多造一条数据，这样就可以看出 多个变量套的排列问题了：
可以看到 排列如此：
问题1:没有竖向排列
问题2:长短不一
所以我们修改前端样式代码如下：
效果如下：
现在我们要设计一个 显示内部数据的多行输入框。计划是给摆在右侧，所以可以通过脱离文档流 让其漂浮的办法，来快速完成效果：
因为这个显示编辑框是公共的，所以也就只存在一组，那么也就不能放在for循环内了。
效果如下：
效果如下：
现在还差删除和 增加按钮了。
删除按钮 是可以删除任意的，所以它要在循环内。
增加按钮 是公共的，只有一个，所以它在循环外：
按照箭头指向的 地方 进行改动成下图：
效果如下：
暂时我们 的外观设计就像个毛坯房，不过等我们把这个功能实现了，再单独拿出一节进行页面优化即可：
本节内容到此结束：
复制版本代码：
<div style="padding-left: 100px"> {% for i in global_data %} <button class="btn-danger">删除</button> <button class="btn-default" style="margin-top: 5px;width:150px ">{{ i.name }}</button> <br> {% endfor %} <br> <button class="btn-primary">新增</button> </div> <div style="position: absolute;left: 310px;top: 65px"> <input id="name" type="text" style="width: 500px" placeholder="输入变量套的名字"> <br> <textarea id="data" style="width: 500px;height: 500px;" placeholder="输入json格式的变量套内容"></textarea> </div>
