今天我们来实现一下admin中，右边的filter和pop的功能。
先来实现filter的功能。
我们先来想一下步骤：
首先我们要在页面中显示这样一个标签。当我们 list_filter = [ "publish", "authors"]
我们要在页面上显示的是publish和author的所有数据。这应该怎么做？
我们怎么能拿到这些数据？这一部分是在页面中显示的，所以应该放在showlist的类中。
{‘publish’：[<Publish: 沙河出版社>, <Publish: 西二旗出版社>, <Publish: 山西出版社>,]} 只要构造成这样的形势，在页面上循环打印就行了。
这样就在页面看到了，那么接下来就是点击相应的publish，显示相应的数据。
在试图函数中，
这样filter的功能就实现了。
然后再实现pop功能，
当我们点击添加按钮的加号的时候，弹出一个相应的页面，数据添加完后，显示在原来的页面并且弹出的页面关闭。所以，先在页面上渲染加号。
我们在页面上加了这一行代码：
但是显示的效果是在每个字段后面都有了+号，这不是我们想要的，我们只想要在有关联其他字段的字段后面添加+号。
这应该怎么做，我们是否应该判断一下，判断他是多对多字段或者一对多字段的时候，就给他加+号。但是怎么判断呢？
我们在渲染页面的时候，用的是form表单，但我们知道form表单中的多对多字段和model中的关联字段不一样。
那应该怎么做呢？
在addview视图函数中我们先来打印一下字段.field的类型：
我们看到打印结果：
我们可以看到打印结果，后面的publish和author字段是分别属于ModelChoiceField和ModelMultipleChoiceField，其实这两者是继承的关系，ModelMultipleChoiceField继承了ModelChoiceField，所以我们只需要判断字段是否属于ModelChoiceField，就能够知道是否属于关联字段了。所以我们这样做，
在页面上：
这样在页面上就能得到想要的结果了。加号的渲染就完了。
然后就是处理点击加号的事情了，我们在添加a标签的时候，有一个onclick事件，那个pop函数的url是那里传过来的呢？肯定是从form里传过来的。所以:
这样在页面上添加js代码：
这样当点击加号的时候就能实现弹出一个新的添加页面。
这个function还需要再传一个参数，
<script> var pop_back_id = ''; //定义一个全局变量， function pop(url,id) { pop_back_id = id; //这个值在我们添加完数据在页面上显示的时候会用到 window.open(url,url,"width=800,height=500,top=100,left=100") } </script>
然后就该处理数据了。
现在我们能实现的是我们一点击+号就能弹出来一窗口，然后我们要实现的是添加完数据后，关闭窗口，但是我们知道，可以通过点击+号可以添加数据，也可以通过list_view页面的添加按钮添加数据，那他是怎么判断我们是通过点击+号还是通过按钮添加，所以我们在window.open的时候，在url中传一个参数。
<script> var pop_back_id = ''; //定义一个全局变量， function pop(url,id) { pop_back_id = id; //这个值在我们添加完数据在页面上显示的时候会用到 window.open(url+'?pop=1',url+'?pop=1',"width=800,height=500,top=100,left=100") } </script>
这样请求时只需要判断一下request.get能不能拿到pop值，如果能拿到pop，就说明是通过+号添加数据，添加完后可以关闭窗口。
添加完数据，点击提交所，这是一个post请求。所以在add_view的试图函数中
返回子页面后，在pop子页面执行js代码关闭窗口。
然后就是添加数据在页面上显示。同样是在子页面中进行js代码。
pop子页面的代码就是：
父页面就是add页面，js代码
<script> var pop_back_id = ''; //定义一个全局变量， function pop(url,id) { pop_back_id = id; //这个值在我们添加完数据在页面上显示的时候会用到 window.open(url+'?pop=1',url+'?pop=1',"width=800,height=500,top=100,left=100") } function pop_back_func(text,pk) { //console.log(text); //console.log(pk); var $option=$('<option>'); $option.html(text); $option.attr('value',pk); $option.attr('selected','selected'); $('#'+pop_back_id).append($option) //这个函数是在原来的select标签下添加一个option标签 } </script>
pop_back_func函数就是实现了在添加数据后，将数据显示在父页面的区域
这样基本的pop功能就实现了。
父页面的js代码可以单独写一个js文件。
然后再add页面和change页面引入。
接下来就是调bug阶段。
知识点：
