我们在上一节中，搞定了全局变量的增删改查功能。
现在我们来梳理和回忆一下，这个功能整个的设计。
如图，我准备先设置俩组变量。这里要明确一个概念，每个按钮代表的是一个变量组，而不是一个变量，一个用户可以拥有多套变量组，每组内可包含多个变量。用户在之后的使用时，可以对具体的项目，设置生效的变量组。生效后，该项目的接口中引入的变量，才会去该变量组中找到对应的值。这点设计和postman类似。
所以，针对每个项目，我们都需要增加一个字段，该字段包含了该项目可以生效的变量组的id。
这个设计，同样也需要前后端共同配合实现。其中前端我们就设计成，用户通过具体项目进入全局变量设置页面的时候，带着项目所生效的变量组id，然后在所有变量组上通过可选框等体现出来。
首先我们去models.py中 对项目表增加字段：
然后运行同步命令：
在我们之前的设计中，项目的所有数据在进入全局变量页面时都已经带着了，所以我们现在直接去global_data.html 中进行实现即可：
如上图，我在每个变量组按钮后都加上了个多选框，以此来显示和设置 是否在此项目中生效。注意，其中的id和value都是变的，借助i.id让每个变量组都不同。而其中的name是固定的，所有都用的一个。所以我们后续的js代码中可以用getElementsByName 方法来一次性拿到所有框。
看下效果：
针对此框，我们要做的是俩件事：
- 根据带进来的项目数据，来判断是否选中
- 用户点击选中或取消时，请求后台真实的进行变更数据库。
首先来完成第一件事：
该端代码中 判断一个字符串是否在一个数组列表中运用了jq的 $.inArray方法，这种简单的判断如果在js中还是很麻烦的。
可复制：
<script> if("{{ project.global_datas }}" != "None" && "{{ project.global_datas }}" != ""){ if( $.inArray( "{{ i.id }}", "{{ project.global_datas }}".split(',') ) != -1 ){ document.getElementById('check_{{ i.id }}').checked = 'checked' } } </script>
如上图，我在循环内 都插入了一个小型的js代码，让其判断当前项目的公共变量是否是空或None,如果不是，则判断当前循环内的这个变量组的id是否在 列表格式的 项目生效变量组id的列表中。如果存在，则拼接成这个变量组多选框的id并把其变为选中状态。
我们来测试下：
用例1:当前项目属于旧项目，更改的表结构产生的新字段 是否会报错：
结果没有报错，通过。
用例2:新创建的项目，进入该页面是否报错：
结果也没报错，通过。
用例3:当前项目中是正常的选中了第一个变量组：
我们得首先去后台给该项目手动写一个global_datas来方便测试。所以记下现在的变量组1的id 然后去后台设置：
如果是多个则用英文逗号存储，不过后续的存储全是我们自动js负责，所以也不会出现错误也不用人去手动。
效果如下：
可以看到，显示效果已经成功了。
接下来我们要做的是，点击选中/不选中 的自动保存。
首先我们先来给所有的这个check_input增加一个 点击更改内容就触发js函数的 属性：onchange,顾名思义，和onclick都差不多哦。
我们在下面写个叫change_check()的函数，当任意多选框被点击后，这个函数就会触发：
写好后我们就要实现它了， 逻辑很简单，当被触发后，它就去统计最新的选择情况，然后连同项目id，一起发给后台，让后台更新数据库后，它在刷新本页面 即可实现效果。
代码如下：
function change_check() { // 获取所有选中的checkbox的值 组成列表 chk_value var chk_value =[]; $('input[name="check_names"]:checked').each(function(){ chk_value.push($(this).val()); }); //依然是jq的方法 // 把结果发送给后台 $.get("/global_data_change_check/",{ "project_id":"{{ project.id }}", "global_datas": chk_value.toString() },function (ret) { document.location.reload() }) }
代码中依然使用了 $开头的 jquery的写法，大家可以学习下。
然后我们去urls.py中：
最后是views.py：
然后我们重启服务，刷新页面开始测试：
可以看到已经可以正常的 选中 取消 等操作了。
