前言
记几个坑和常用的代码段
AdminLTE的侧边栏问题
点击后侧边栏会自动收回，加入js代码使其在页面刷新后仍保持原有状态。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<script>
$(function(){
$('.sidebar-menu li:not(.treeview) > a').on('click', function(){
var $parent = $(this).parent().addClass('active');
$parent.siblings('.treeview.active').find('> a').trigger('click');
$parent.siblings().removeClass('active').find('li').removeClass('active');
});
$(window).on('load', function(){
$('.sidebar-menu a').each(function(){
if(this.href === window.location.href){
$(this).parent().addClass('active')
.closest('.treeview-menu').addClass('.menu-open')
.closest('.treeview').addClass('active');
}
});
});
});
</script>
通知问题
使用toastr插件
初始化1
2
3
4
5
6
7
8
9
10
11
12
13
14
15toastr.options = {
closeButton: false,
debug: false,
progressBar: false,
positionClass: "toast-top-right",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "5000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
ManyToManyField的添加问题
前端使用multiselect插件
https://crlcu.github.io/multiselect/
HTML:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52<div class="modal fade" id="AddGroupModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">新分组</h4>
</div>
<form method="post" id="js_addGroupForm">
<div class="modal-body">
<div class="row" id="modal.flashes"></div>
<div class="form-group">
<label class="control-label" for="name">新分组:</label>
<input type="text" class="form-control" placeholder="组名" id="name" autofocus />
</div>
<div class="form-group">
<label for="group_members">人员:</label>
<div id="container" style="width: 90%;height: 90%;">
<div class="row">
<div class="col-xs-5">
<select name="from[]" id="search" class="form-control" size="8" multiple="multiple">
{% for linkman in linkmen %}
<option value="{{ linkman.id }}">{{ linkman.name }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-2">
<button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
</div>
<div class="col-xs-5">
<select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="js_addGroup">保存</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
js：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69<script>
jQuery(document).ready(function($) {
$('#search').multiselect({
search: {
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
},
fireSearch: function(value) {
return value.length > 3;
}
});
});
$(function () {
// 提交表单
$('#js_addGroup').on('click', function () {
var name = $('#name').val();
var options = $('#search_to option');
var members = new Array();
var i;
for(i=0;i<options.length;i++){
members.push(options[i].value);
}
//console.log(members);
toastr.options = {
closeButton: false,
debug: false,
progressBar: false,
positionClass: "toast-top-right",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "5000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
$.ajax({
cache: false,
type: "POST",
url: "{% url 'contacts:add_group' %}",
dataType: 'json',
//data: $('#js_addGroupForm').serialize(),
data: {
'name': name,
'members': members,
},
async: true,
beforeSend: function (xhr, settings) {
// 这里需要csrf_token的值，而不是代码
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function (data) {
if (data.status == 'success') {
toastr.options.timeOut = 1000;
toastr.options.onHidden = function() { window.location.href = "{% url 'contacts:group_list' %}"; }
toastr.success(data.msg);
} else if (data.status == 'fail') {
toastr.error(data.msg);
}
}
});
});
})
</script>
几个坑点 ，这里前端传值传array时会在json中自动加上[]
所以在后端接收时记得用getlist(list[])
manytomanyfiled的字段用create来创建，add添加内容
后端代码：
forms.py1
2
3class AddGroupForm(forms.Form):
name = forms.CharField(max_length=20, required=True)
group_members = forms.ModelMultipleChoiceField(queryset=Linkman.objects.all())
views.py1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16class AddGroup(LoginRequiredMixin, View):
def post(self, request):
add_group = AddGroupForm(request.POST)
if add_group != '':
if Group.objects.filter(name=request.POST.get('name')):
return HttpResponse('{"status":"fail", "msg":"分组已存在！"}', content_type='application/json')
group = Group.objects.create(name=request.POST.get('name'))
members = request.POST.getlist('members[]')
num = len(members)
for i in range(num):
group.group_members.add(members[i])
return HttpResponse('{"status":"success", "msg":"添加成功！"}', content_type='application/json')
return HttpResponse('{"status":"fail", "msg":"内容不符合要求！"}', content_type='application/json')