class Structure2UserView(LoginRequiredMixin, View):

def get(self, request):
if id in request.GET and request.GET[id]:
# 通過id獲取需要綁定用戶的組織架構實例
structure = get_object_or_404(Structure, pk=int(request.GET[id]))
# 通過外鍵的反向查找（_set），找到已經綁定到該組織架構的所有用戶信息
added_users = structure.userprofile_set.all()
# 查找系統中所有用戶信息，User = get_user_object()使用自定義用戶模型都是通過這種模式
all_users = User.objects.all()
# 通集合獲取差集set().difference()，得出還未綁定的用戶
un_add_users = set(all_users).difference(added_users)
# 將這些數據返回給前端，用來渲染數據，形成一個複選框，左邊是未綁定用戶，右邊是已經綁定的用戶
ret = dict(structure=structure, added_users=added_users, un_add_users=list(un_add_users))
return render(request, system/structure/structure_user.html, ret)

{% block css %}
<link rel="stylesheet" href="{% static plugins/select2/select2.min.css %}">
{% endblock %}
{% block main %}
<div class="box box-danger">
<form class="form-horizontal" id="selectUsersForm" action="" method="post">
{% csrf_token %}
<input type="hidden" name=id value="{{ structure.id }}"/>
<div class="box-body">
<div class="row">
<div class="col-xs-5">
<label class="control-label">可選用戶:</label>
<select name="from" id="multiselect" class="form-control" size="18" multiple="multiple">
{% for item in un_add_users %}
<option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
{% endfor %}
</select>
</div>
<div class="col-xs-2">
<br><br><br><br><br><br>
<button type="button" id="multiselect_rightAll" class="btn btn-block"><i
class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i
class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i
class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="multiselect_leftAll" class="btn btn-block"><i
class="glyphicon glyphicon-backward"></i></button>
</div>
<div class="col-xs-5">
<label class="control-label">編輯：{{structure.name}}-已綁定用戶:</label>
<select name="to" id="multiselect_to" class="form-control" size="18" multiple="multiple">
{% for item in added_users %}
<option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12 margin-top-5">
<p class="text-maroon">*注意：一個用戶只能隸屬一個部門，如果選擇的用戶已存在部門，用戶將會從原有部門移出</p>
</div>
</div>
</div>
<div class="box-footer ">
<div class="row span7 text-center ">
<button type="button" id="btnCancel" class="btn btn-default margin-right ">重置</button>
<button type="button" id="btnSave" class="btn btn-info margin-right ">保存</button>
</div>
</div>
</form>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static plugins/select/multiselect.min.js %}"></script>
<script type="text/javascript">
$(document).ready(function () {
//初始化多選列表
$(#multiselect).multiselect({
search: {
left: <input type="text" class="form-control" placeholder="Search..." />,
right: <input type="text" class="form-control" placeholder="Search..." />,
},
fireSearch: function (value) {
return value.length > 3;
}
});

});

$("#btnSave").click(function () {
$(#multiselect_to option).prop(selected, true);
var data = $("#selectUsersForm").serialize();
console.log(data);
$.ajax({
type: $("#selectUsersForm").attr(method),
url: "{% url system:basic-structure-add_user %}",
data: data,
cache: false,
success: function (msg) {
if (msg.result) {
layer.alert(操作成功, {icon: 1});
} else {
//alert(msg.message);
layer.alert(操作失敗, {icon: 2});
}
return;
}
});
});

/*點取消刷新新頁面*/
$("#btnCancel").click(function () {
window.location.reload();