我们在上一节中，搞定了全局变量的增删改查功能。
现在我们来梳理和回忆一下，这个功能整个的设计。
如图，我准备先设置俩组变量。这里要明确一个概念，每个按钮代表的是一个变量组，而不是一个变量，一个用户可以拥有多套变量组，每组内可包含多个变量。用户在之后的使用时，可以对具体的项目，设置生效的变量组。生效后，该项目的接口中引入的变量，才会去该变量组中找到对应的值。这点设计和postman类似。
所以，针对每个项目，我们都需要增加一个字段，该字段包含了该项目可以生效的变量组的id。
这个设计，同样也需要前后端共同配合实现。其中前端我们就设计成，用户通过具体项目进入全局变量设置页面的时候，带着项目所生效的变量组id，然后在所有变量组上通过可选框等体现出来。
首先我们去models.py中 对项目表增加字段：
然后运行同步命令：
在我们之前的设计中，项目的所有数据在进入全局变量页面时都已经带着了，所以我们现在直接去global_data.html 中进行实现即可：
如上图，我在每个变量组按钮后都加上了个多选框，以此来显示和设置 是否在此项目中生效。注意，其中的id和value都是变的，借助i.id让每个变量组都不同。而其中的name是固定的，所有都用的一个。所以我们后续的js代码中可以用getElementsByName 方法来一次性拿到所有框。
看下效果：
针对此框，我们要做的是俩件事：
- 根据带进来的项目数据，来判断是否选中
- 用户点击选中或取消时，请求后台真实的进行变更数据库。
首先来完成第一件事：
该端代码中 判断一个字符串是否在一个数组列表中运用了jq的 $.inArray方法，这种简单的判断如果在js中还是很麻烦的。
可复制：
代码语言：javascript复制<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：
然后我们重启服务，刷新页面开始测试：
可以看到已经可以正常的 选中 取消 等操作了。
本节内容到此结束，下节课我们将进入 让全局变量生效阶段。首先就是在接口调试层的 嵌入使用。
