Bootstrap + Django - 前端bootstrap-table列表编辑某列数据下拉框数据变为选中状态【selected】
1.效果
列表中的角色为市场部人员
点击此列修改角色按钮弹窗后为显示选中状态
2.主要代码
1. html
弹窗部分
<div class="form-group">
<label for="" class="col-sm-6 control-label">角色：</label>
<div class="col-sm-9">
<select onchange="get_role_permission()" name="role_id" class="custom-select" id="userRoleNameId">
<option selected="selected" value="0">请选择</option>
</select>
</div>
</div>修改角色按钮
{
field: 'operation',
title: '操作',
halign: 'center',
width: '120px',
visible: true,
formatter: function (value, row, index) {
{#console.log(row)#}
var result = "";
result += '<a href="#" οnclick="get_user_role_info('+JSON.stringify(row).replace(/\"/g,"'")+')" data-toggle="modal" data-target="#changeUserRoleModal">修改角色</a> '
result += '<a href="#" οnclick="del_team_member('+JSON.stringify(row.user_detail).replace(/\"/g,"'")+')"><i class="fas fa-trash-alt"></i></a>'
return result
}2. js
下拉框数据变为选中状态【selected】
document.getElementById("userRoleNameId")[index].selected = true代码实现
function get_user_role_info(obj) {
console.log(obj)
var t = document.getElementById("userRoleNameId");
// 下拉框数据变为选中状态【selected】
if (obj.role.role_id) {
t[obj.role.role_id].selected = true
} else {
t[0].selected = true
}
// 获取角色权限
var userRolePermission = ""
for (var key in obj.permission) {
userRolePermission += obj.permission[key]+'; '
}
// 给修改的用户id和角色权限赋值
$('#change_user_id').val(obj.user_detail.id)
$('#rolePermissionId').text(userRolePermission)
}3. 后端数据格式
{
...
role:{
role_id: 1, 'role_name': 'hello',
role_id: 2, 'role_name': 'world',
...
},
...
}
3. 附上完整代码
{% extends "base.html" %} {% load static %}
{% block main %}
<style>
.table th, .table td, .table b {
text-align: center;
vertical-align: middle !important;
word-break: break-all;
}
</style>
{% for i in permission %}
{% if i.0 == 'is_superuser' %}
hehehehe
{% endif %}
{% endfor %}
<!-- data structure index start -->
<section class="section">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title mb-4 pb-2">
{% if team_name or company %}
<h4 class="title mb-4">{{ company }} - {{ team_name }}</h4>
{% else %}
<h5 class="title mb-4">未设置所属公司或未加入团队，请联系管理员进行设置</h5>
{% endif %}
</div>
</div><!--end col-->
</div><!--end row-->
<div id="toolbar">
<div class="form-inline" role="form">
{% if 'is_team_leader' in permission.keys or 'is_superuser' in permission.keys or 'is_set_permission' in permission.keys %}
<button id="addTeamMember" class="btn btn-soft-primary btn-sm" data-toggle="modal"
data-target="#addUserModal">
<i class="fa fa-plus"></i> 添加团队成员
</button>
{% endif %}
{% if 'is_superuser' in permission.keys %}
<button style="margin-left: 5px" class="btn btn-soft-primary btn-sm" onclick="window.open('/admin/teams/team/add/')">
<i class="fa fa-plus"></i> 创建团队
</button>
<button style="margin-left: 5px" class="btn btn-soft-primary btn-sm" onclick="window.open('/admin/registration/')">
<i class="fas fa-edit"></i> 角色权限管理
</button>
{% endif %}
<!-- 自定义搜索查询 -->
<div class="input-group" style="left: 5px;display: none"><input id="search-keyword"
class="form-control search-input" type="search"
placeholder="Search" autocomplete="off">
<div class="input-group-append">
<button id="search-button" class="btn btn-soft-primary btn-sm" type="button" name="search"
title="Search">
<i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
<!-- data structure index pagination -->
<table id="table"
class="table-sm small"
data-pagination="true"
data-buttons-class="soft-primary btn-sm"
data-sort-name="created_date"
data-sort-order="desc"
data-remember-order="true"
data-show-fullscreen="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-show-export="true"
data-click-to-select="true"
data-toolbar="#toolbar"
style="table-layout: fixed;height: auto"
>
<thead class="thead-light">
</table>
</div>
</section>
<!-- data structure index end -->
<!-- 添加团队成员弹窗 -->
<div class="modal fade" id="addUserModal" style="top: 100px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">
添加团队成员
</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
<form method="post" action="" class="form-horizontal" role="form" id="userEmailForm" style="margin: 5px;">
<div class="form-group">
<input type="text" class="form-control" name="email" value="" id="email"
placeholder="请输入团队成员邮箱">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="add_team_member()">提交</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 修改角色弹窗 -->
<div class="modal fade" id="changeUserRoleModal" style="top: 100px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changeRoleModalLabel">
修改团队成员角色
</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
<form method="post" action="" class="form-horizontal" id="changeUserRoleForm" style="">
<div class="col-sm-6">
<input type="hidden" class="form-control" id="change_user_id" value="">
</div>
<div class="form-group">
<label for="" class="col-sm-6 control-label">角色：</label>
<div class="col-sm-9">
<select onchange="get_role_permission()" name="role_id" class="custom-select" id="userRoleNameId">
<option selected="selected" value="0">请选择</option>
</select>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8">该角色拥有的权限：</label>
<div class="col-sm-12">
<div id="rolePermissionId" class="form-text text-muted"></div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="change_user_role()">提交</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
{% endblock %}
{% block script %}
<!-- JS for download table-->
<script>
var $table = $('#table')
$(function () {
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('destroy').bootstrapTable({
exportDataType: $(this).val(),
exportTypes: ['excel', 'xml', 'csv', 'txt', 'sql'],
columns: [
{
field: 'state',
checkbox: true,
visible: $(this).val() === 'selected'
}
]
})
}).trigger('change')
})
</script>
<!-- JS for pagination -->
<script>
var $articlesTable = $('#table').bootstrapTable('destroy').bootstrapTable({
url: '/teams/my_team_members/',
method: 'GET',
dataType: "json",
uniqueId: 'id', //每一行的唯一标识，一般为主键列
striped: false, //是否显示行间隔色
cache: false,
sortName: 'update_time',
sortable: true,
sortOrder: 'desc',
sidePagination: "server",
undefinedText: '--',
singleSelect: true,
toolbar: '#toolbar', //工具按钮用哪个容器
showToggle: true, //是否显示详细视图和列表视图的切换按钮
strictSearch: true,
clickToSelect: true,
pagination: true, //是否显示分页（*）
showRefresh: true, //是否显示刷新按钮
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [5, 20, 50, 100, 'all'],
paginationPreText: "<",
paginationNextText: ">",
queryParamsType: "",
maxHeight: "200px",
queryParams: function (params) {
var query_params = {
'pageSize': params.pageSize,
'pageNumber': params.pageNumber,
'search_kw': $('#search-keyword').val(), // 查询框中的参数传递给后台
'sortName': params.sortName,
'sortOrder': params.sortOrder
};
return query_params;
},
//返回数据格式处理
responseHandler: function(res) {
if (res.all_role) {
for (var i=0; i < res.all_role.length; i++) {
$("#userRoleNameId").append('<option value='+res.all_role[i].id+'>'+res.all_role[i].name+'</option>');
}
}
if (!res.is_set_role_permission) {
$('#table').bootstrapTable('hideColumn', 'operation');
}
return {
"total": res.total, //总页数
"rows": res.rows, //数据
};
},
columns: [
{
field: 'no',
title: 'No',
align: 'center',
halign: 'center',
width: '50px',
visible: true,
formatter: function (value, row, index) {
var result = "";
result += '<a href="/teams/data_structure_detail/' + + '/" target="_blank">' + row.no + '</a>'
return result
}
},
{
field: 'username',
title: '姓名',
align: 'left',
halign: 'center',
width: '120px',
visible: true,
formatter: function (value, row, index) {
return row.user_detail.first_name + row.user_detail.last_name
}
},
{
field: 'email',
title: '邮箱',
align: 'left',
halign: 'center',
width: '180px',
visible: true,
formatter: function (value, row, index) {
return row.user_detail.email
}
},
{
field: 'company',
title: '公司',
align: 'center',
halign: 'center',
width: '100px',
visible: true,
formatter: function (value, row, index) {
return row.user_pro.company
}
},
{
field: 'role',
title: '角色',
align: 'center',
halign: 'center',
width: '120px',
visible: true,
formatter: function (value, row, index) {
return row.role.role_name
}
},
{
field: 'permission',
title: '角色权限',
align: 'left',
halign: 'center',
width: '170px',
visible: true,
formatter: function (value, row, index) {
var result = "";
for (var key in row.permission) {
result += '<span>'+row.permission[key]+'; </span>'
}
return result
}
},
{
field: 'update_time',
title: '更新时间',
align: 'center',
halign: 'center',
width: '160px',
visible: true,
sortable: true,
},
{
field: 'operation',
title: '操作',
halign: 'center',
width: '120px',
visible: true,
formatter: function (value, row, index) {
{#console.log(row)#}
var result = "";
result += '<a href="#" οnclick="get_user_role_info('+JSON.stringify(row).replace(/\"/g,"'")+')" data-toggle="modal" data-target="#changeUserRoleModal">修改角色</a> '
result += '<a href="#" οnclick="del_team_member('+JSON.stringify(row.user_detail).replace(/\"/g,"'")+')"><i class="fas fa-trash-alt"></i></a>'
return result
}
},
],
onLoadError: function (data) {
console.log("数据加载失败！", "错误提示");
$.messager.alert({title: '提示', msg: '数据加载失败！', icon: 'warning', top: 200});
},
});
// 搜索查询按钮触发事件
$("#search-button").click(function () {
console.log($('#search-keyword').val())
$('#table').bootstrapTable(('refresh'));
})
// 回车执行搜索
$("#search-keyword").bind('keyup', function (event) {
console.log($('#search-keyword').val())
$('#table').bootstrapTable(('refresh'));
})
</script>
<!-- JS for edit data -->
<script>
function get_role_permission() {
var role_id = $('#userRoleNameId').val();
console.log(role_id)
if (role_id === '0') {
console.log(role_id)
$('#rolePermissionId').text('')
return;
}
$.ajax({
url: server_url + '/users/get_role_permission/'+role_id+'/',
method: 'GET',
processData: false,
contentType: false,
cache: false,
success: function (data) {
if (data.status === 200) {
console.log("data:" + data.msg);
var userRolePermission = ""
for (var key in data.msg) {
userRolePermission += data.msg[key]+'; '
}
$('#rolePermissionId').text(userRolePermission)
return;
}
console.log(data)
$.messager.alert({title: '提示', msg: data.msg , icon: 'warning'});
},
//请求失败，包含具体的错误信息
error: function (data) {
console.log(data.msg);
}
});
}
function get_user_role_info(obj) {
console.log(obj)
var t = document.getElementById("userRoleNameId");
if (obj.role.role_id) {
t[obj.role.role_id].selected = true
} else {
t[0].selected = true
}
var userRolePermission = ""
for (var key in obj.permission) {
userRolePermission += obj.permission[key]+'; '
}
$('#change_user_id').val(obj.user_detail.id)
$('#rolePermissionId').text(userRolePermission)
}
function change_user_role() {
var formData = new FormData($("#changeUserRoleForm")[0]);
var change_user_id = $('#change_user_id').val();
console.log(change_user_id)
$.ajax({
url: server_url + '/users/change_user_role/'+change_user_id+'/',
method: 'POST',
data: formData,
dataType: "json",
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("data:" + data);
if (data.status === 200) {
console.log("data:" + data.msg);
$.messager.show({
title: '提示',
msg: data.msg,
showType: '',
timeout: 500,
width: 300,
height:130,
style: {top: 200}
});
$('#changeUserRoleModal').modal('hide');
document.getElementById("userRoleNameId").options.length=1;
$('#table').bootstrapTable('refresh');
return;
}
console.log(data)
$.messager.alert({title: '提示', msg: data.msg , icon: 'warning'});
},
//请求失败，包含具体的错误信息
error: function (data) {
console.log(data.msg);
}
});
}
function del_team_member(obj) {
console.log(obj)
$.messager.confirm({
title: '提示', msg: '是否将['+obj.first_name+obj.last_name+']用户从团队中移除?', top: 200,
fn: function (r) {
if (r) {
$.ajax({
url: server_url + '/teams/remove_team_member/' + + '/',
method: 'get',
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("data:" + data);
console.log("data:" + data.status);
if (data.status === 200) {
{#$.messager.alert({title: '提示', msg: data.msg, icon: 'warning', top: 200,});#}
$.messager.show({
title: '提示',
msg: data.msg,
showType: '',
timeout: 500,
style: {top: 200}
});
console.log("data:" + data.msg);
document.getElementById("userRoleNameId").options.length=1;
$('#table').bootstrapTable('refresh');
return
}
console.log(data)
$.messager.alert({title: '提示', msg: '权限不足或服务请求异常，数据无法删除！', icon: 'warning', top: 200});
},
//请求失败，包含具体的错误信息
error: function (data) {
console.log('error' + data.msg);
$.messager.alert({title: '提示', msg: '请求服务错误或当前网络不佳！', icon: 'warning', top: 200});
}
});
}
}
});
}
</script>
<!-- JS for add team member -->
<script>
function add_team_member() {
var formData = new FormData($("#userEmailForm")[0]);
var email = $('#email').val()
if (email === '') {
$.messager.alert("提示", '请输入团队成员邮箱！', "info");
return
}
$.ajax({
url: server_url + '/teams/add_team_member/',
method: 'POST',
data: formData,
dataType: "json",
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("data:" + data);
console.log("data:" + data.res);
if (data.status === 200) {
console.log("data:" + data.msg);
{#$.messager.alert("提示", data.msg, "info");#}
$.messager.show({
title: '提示',
msg: data.msg,
showType: '',
timeout: 500,
width: 300,
height:130,
style: {top: 200}
});
$('#addUserModal').modal('hide');
$('#email').val('');
document.getElementById("userRoleNameId").options.length=1;
$('#table').bootstrapTable('refresh');
{#window.setTimeout("window.location=server_url+'/teams/my_team/'", 300);#}
return;
}
console.log(data)
$.messager.alert({title: '提示', msg: data.msg , icon: 'warning'});
},
//请求失败，包含具体的错误信息
error: function (data) {
console.log(data.msg);
}
});
}
</script>
{% endblock %}以上就是关于前端bootstrap-table列表编辑某列数据下拉框数据变为选中状态的介绍，仅供参考，希望对你有所帮助。
