jQuery之详记Bootstrap表格插bootstrap-table配置与应用-职坐标

jQuery之详记Bootstrap表格插bootstrap-table配置与应用

从安 2019-06-25 来源：阅读 3992 评论 0

摘要：本篇文章主要讲述jQuery之详记Bootstrap表格插bootstrap-table配置与应用，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章主要讲述jQuery之详记Bootstrap表格插bootstrap-table配置与应用，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

jQuery之详记Bootstrap表格插bootstrap-table配置与应用

1.测试环境

win7

JQuery-3.2.1.min.js

下载地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

Bootstrap-3.3.7-dist

下载地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zi

bootstrap-table-develop-v1.12.1.zip

下载地址：

https://github.com/wenzhixin/bootstrap-table

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-table-develop-v1.12.1.zip

2.配置与应用

HTML代码片段

head设置

<!DOCTYPE html>

<html>

<head>

{% load staticfiles %}

<!--[if lt IE 9]>

<![endif]-->

……略

</head>

table及toolbar工具条

<div>

<div>

<button class="btn btn-default" data-toggle="modal" data-target="#roleDialog" id="addBtn">新增

</button>

<button class="btn btn-default" id="editBtn">修改

</button>

<button class="btn btn-default" id="deleteBtn">删除

</button>

</div>

<div>

</div>

<span>

</span>

</div>

<span>

</span>

</div>

</form>

</div>

JS代码片段

数据表初始化配置

/**

* 获取角色表数据

function loadTableData () {

$('#' + roleTableID).bootstrapTable({

url: roleTableDataURL, // 服务器数据的加载地址。

method:'get', // 服务器数据的请求方式 'get' 或 'post'。

pagination:true,// 在表格底部显示分页信息(显示第 x 到第 x 条记录，总共 x 条记录)，翻页条 // 注意：数据页页数超过1页会才展示翻页条

paginationVAlign:'bottom', // 指定分页条在垂直方向的位置。'top'，'bottom' 或 'both'。

sidePagination:'server', // 设置在哪里进行分页，可选值为 'client' 或者 'server'。注意：设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。

responseHandler:responseHandler, // 加载服务器数据之前的处理程序，可以用来格式化数据。

pageSize:10, // 如果启用分页，设置初始化界面时，默认的每页显示数据条数

pageList:[10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 'All'], // 如果设置了分页，设置可供选择的页面记录数。设置为 All 或者 Unlimited，则显示所有记录

smartDisplay:false, // 设置为 true 是程序自动判断显示分页信息和 card 视图。这会导致自定义的 pageList不起作用

silentSort:true, // 设置为true将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效

showColumns:true, // 展示内容列下拉框，方便设置展示那些列

showRefresh:true, // 显示刷新按钮

idField:'id', // 指定主键列

//dataField: "data", //返回的json数组记录(表格数据)的key.默认是"rows", 数据格式： {"total": 0, "rows": []}

checkboxHeader:true, // 如果设置 false，将在列头隐藏全选复选框，反之则显示，设置为ture时，必须设置singleSelect=false 才有效

clickToSelect:true, // 如果设置 true，则在点击行时，自动选中 rediobox 、 checkbox。

singleSelect:false, //如果设置为true - 禁止多选，否则不禁止多选

striped:true, // 设置为 true 会有隔行变色效果

toolbar:'#toolbar', // 一个jQuery 选择器，形如#toolbar, .toolbar，指明自定义的 toolbar

toolbarAlign:'left', // 指定 toolbar 水平方向的位置。'left' 或 'right'。

columns: [{

field: 'checkbox',

align: 'center', // 设置数据对齐方式可选项： 'left', 'right', 'center'

halign: 'center', // 设置表头标题对齐方式可选项： 'left', 'right', 'center'

valign: 'middle', // 设置单元格数据的垂直方向上的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）针对checkbox似乎不起作用

checkbox:true, // 显示为复选框

width: '1%',// 设置列宽度

},{

field: 'id',

title: '角色ID',

align: 'center',

halign: 'center',

valign:'middle',

sortable:true, // 允许排序列

order:'desc', // 默认排序方式升序-asc 降序-desc

width: '2%',

}, {

field: 'name',

title: '角色名称',

align: 'center',

valign: 'middle',

halign: 'center',

width: '14%'

}, {

field: 'remark',

title: '角色描述',

valign: 'middle',

align: 'center',

halign: 'center',

width: '20%'

}, {

field: 'is_enable',

title: '是否启用',

valign: 'middle',

align: 'center',

halign: 'center',

width:'4%'

}, {

field: 'creater',

title: '创建人',

valign: 'middle',

align: 'center',

halign: 'center',

width:'7%'

}, {

field: 'create_time',

title: '创建时间',

valign: 'middle',

align: 'center',

halign: 'center',

width:'11%'

}, {

field: 'modifier',

title: '修改人',

valign: 'middle',

align: 'center',

halign: 'center',

width:'7%'

},{

field: 'modify_time',

title: '修改时间',

valign: 'middle',

align: 'center',

halign: 'center',

width:'11%'

},{

field:'operate',

title:'操作',

algin:'left',

halgin:'center',

width:'23%',

events: operateEvents,

formatter:operateFormatter

} ]

});

}

// 加载表格数据

loadTableData();

加载服务器数据之前的数据处理(responseHandler)

/**

* 加载服务器数据之前的处理程序，可以用来格式化数据。

* 参数：result为从服务器请求到的数据

* @param result

function responseHandler(result){

if (result.success == 'false') {

alert('获取角色信息失败');

return;

}

// 返回数据，渲染表格

return {

total: result.data.total, //总页数, key名称固定为"total"

rows: result.data.rows //行数据，key名称必须和bootstrapTable函数中dataField的值保持一致，默认为rows.

};

格式化操作列

/**

* 操作列格式化函数

function operateFormatter(value, row, index) {

if (row.is_enable == '是') {

return ''+

'<div>' +

'<button class="btn btn-default asign-resource">分配资源 <i class="glyphicon glyphicon-plus"></i></button>' +

'<button class="btn btn-default edit" >修改 <i class="glyphicon glyphicon-edit"></i></button>' +

'<button class="btn btn-default delete">删除 <i class="glyphicon glyphicon-remove"></i></button>' +

'<button class="btn btn-default switch" >禁用 <i class="glyphicon glyphicon-cog"></i></button>' +

'</div>';

} else {

return ''+

'<div>' +

'<button class="btn btn-default asign-resource">分配资源 <i class="glyphicon glyphicon-plus"></i></button>' +

'<button class="btn btn-default edit" >修改 <i class="glyphicon glyphicon-edit"></i></button>' +

'<button class="btn btn-default delete">删除 <i class="glyphicon glyphicon-remove"></i></button>' +

'<button class="btn btn-default switch" >启用 <i class="glyphicon glyphicon-cog"></i></button>' +

'</div>';

}

给操作列按钮注册点击事件

// 给操作按钮注册点击事件

window.operateEvents = {

'click .asign-resource': function (event, value, row, index) { // 注意click和.class之间必须有空格

……略

'click .edit': function (event, value, row, index) {

……略

'click .delete': function (event, value, row, index) {

……略

'click .switch': function (event, value, row, index) {

……略

}

};

函数参数说明：

event：jQuery事件（参考Events）。

value：字段名（实践发现，该参数获取到的值为undefined

row：json串格式表示的行数据

index：所点击行的index

给toolbar工具条按钮添加点击事件

// 给查询按钮增加点击事件

$('#' + queryBtnID).click(function () {

//刷新处理，指定query 的参数，注：此地方指定的参数，仅在当次刷新时使用

var dataArray = $('#' + queryFormID).serializeArray();

var queryContent = {}

$.each(dataArray, function () {

queryContent[this.name] = this.value;

});

// 刷新如果不指定参数刷新：$(tableSelector).bootstrapTable('refresh');

$('#' + roleTableID).bootstrapTable('refresh', {

query: queryContent

});

// 给表格上方的修改按钮绑定点击事件

$('#' + editBtnID).click(function() {

editRole('byTopEditBtn');

});

// 给表格上方的删除按钮绑定点击事件

$('#' + deleteBtnID).click(function() {

deleteRole('byTopDeleteBtn');

});

提交新增、修改表单

/**

* 提交新增、修改角色表单

$(document).ready(function() {

$('#' + roleFormID).submit(function() {

var dataArray = $('#' + roleFormID).serializeArray();

var data = {};

$.each(dataArray, function () {

data[this.name] = this.value;

});

var csrfToken = getCookie('csrftoken');

if (csrfToken == '') {

alert('获取Cookie失败');

return false;

}

if (opType == 'add') { // 新增

$.ajax({

type: "POST",

url: addRoleURL,

async: false,

data: data,

beforeSend: function (xhr, settings) {

if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

xhr.setRequestHeader("X_CSRFTOKEN", csrfToken);

}

success: function (result) {

if (result.success == 'true') {

alert(result.msg);

// 顶部插入一条记录

$('#' + roleTableID).bootstrapTable('insertRow', {index: 0, row: result.data});

$('#' + roleTableID).bootstrapTable('refresh');

// 隐藏模态对话框，并重置数据

$('#' + roleDialogID).modal('hide');

} else {

alert(result.msg + "，" + result.reason);

}

error: function(XmlHttpRequest, textStatus, errorThrown) {

alert('新增角色请求失败' + XmlHttpRequest.responseText);

}

});

} else if (opType == 'update') { // 修改

data['id'] = currentRole.id;

$.ajax({

type: "POST",

url: updateRoleURL,

async: false,

data: data,

beforeSend: function (xhr, settings) {

if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

xhr.setRequestHeader("X_CSRFTOKEN", csrfToken);

}

success: function (result) {

if (result.success == 'true') {

alert(result.msg);

// 在页面上更新角色信息

delete data['csrfmiddlewaretoken'];

// 更新行记录

$('#' + roleTableID).bootstrapTable('updateRow', {index: parseInt(rowIndex), row:result.data});

// 隐藏模态对话框，并重置数据

$('#' + roleDialogID).modal('hide');

} else {

alert(result.msg + "，" + result.reason);

// 需要手动关闭模态对话框，所以也会自动重置数据

}

error: function(XmlHttpRequest, textStatus, errorThrown) {

alert('修改角色请求失败' + XmlHttpRequest.responseText);

// 需要手动关闭模态对话框，所以也会自动重置数据

}

});

}

return false; // 避免跳转到django的返回结果数据页

});

插入行

$('#tableID').bootstrapTable('insertRow', {index: 0, row: result.data});

参数说明：

index 新增行的索引

row 新增行的数据，json串表示

更新行

$('#tableID').bootstrapTable('updateRow', {index: parseInt(rowIndex), row:result.data});

参数说明

index 要更新行的索引

row 要更新行的数据据，json串表示

修改记录

/**

* 修改角色

function editRole(flag) {

opType = 'update';

if (flag == 'byTopEditBtn') { // 通过点击表格上方的修改按钮进入

var rowArray = $('#' + roleTableID).bootstrapTable('getSelections');

if (rowArray.length <1) {

alert('请先选择要修改的角色');

return;

} else if (rowArray.length >1) {

alert('每次修改，只能选择一个角色');

return;

}

// 获取选中行索引

rowIndex = $('#' + roleTableID).find('tbody>tr.selected').first().attr('data-index');

currentRole = rowArray[0]; // 记录当前被修改的角色信息

data = [{'name': 'roleName', 'value':rowArray[0].name}, {'name':'roleDesc', 'value':rowArray[0].remark}]

} else if (flag == 'byRowEditBtn') { // 通过点击行右侧的修改按钮进入

data = [{'name': 'roleName', 'value':currentRole.name}, {'name':'roleDesc', 'value':currentRole.remark}]

}

// 用所选记录信息，填充即将弹出对话框中表单组件值

$.each(data, function () {

$('#' + this.name).val(this.value);

});

$('#' + roleDialogID).modal('show'); // 打开修改模态对话框

}

获取选中行索引

rowIndex = $('#' + roleTableID).find('tbody>tr.selected').first().attr('data-index');

这里为啥要获取，为啥可以这么获取？原因是这样的，通过选择表记录行，然后点击表格上方的修改按钮修改对应记录，这种情况下，无法直接获取对应行记录的索引，导致没法更新对应记录行，所以需要获取索引，没找到对应，至于为啥这么获取，是由table 表结构决定的，如下图：

删除记录

/**

* 删除角色

function deleteRole(flag) {

var idArray = [];

if (flag == 'byTopDeleteBtn') { // 通过点击表格上方的删除按钮进入

rowArray = $('#' + roleTableID).bootstrapTable('getSelections');

if (rowArray.length <1) {

alert('请先选择要删除的角色');

return;

}

} else if (flag == 'byRowDeleteBtn') { // 通过点击行右侧的删除按钮进入

idArray.push(currentRole.id);

}

var mark = true; // 标记是否删除成功

if (confirm('是否删除选中记录?')) {

$.each(rowArray, function() {

idArray.push(this.id);

});

$.ajax({

type: "POST",

url: deleteRoleURL,

async: false,

data: {'idArray':"" + idArray + ""},

success: function (result) {

if (result.success == 'true') {

alert(result.msg);

// 批量删除对应记录行

$('#' + roleTableID).bootstrapTable('remove',{ field: 'id', values: idArray});

//$('#' + roleTableID).bootstrapTable('refresh');

} else {

alert(result.msg + "，" + result.reason);

}

error: function(XmlHttpRequest, textStatus, errorThrown) {

alert('删除角色请求失败' + XmlHttpRequest.responseText);

}

});

}

删除记录

$('#tableID').bootstrapTable('remove',{ field: 'id', values: idArray});

field: 需要删除的行的 field 名称，

values: 需要删除的行的值，类型为数组。

获取选中行

$('#tableID').bootstrapTable('getSelections');

getSelections 返回所选的行，当没有选择任何行的时候返回一个空数组

后台代码片段

查询表数据

def role_tabe_data(request):

'''

获取角色表数据

:param request:

'''

if request.method == 'GET':

rows = [] # 用于存储记录行

table_data = {"total": 0, "rows": []}

try:

params = request.GET

# search = params.get('search') # 通过表格插件自带的搜索框搜索的内容 # 如果要实现，需要确认按哪些列搜索

page_size = int(params.get('limit')) # 每页记录数

offset = int(params.get('offset'))

page_index = offset // page_size + 1 # 第几页数据

sort = params.get('sort') # 排序字段 // 初始化页面时，无排序获取值为None

order = params.get('order') # 排序方式

role_name = params.get('roleNameQ') # 角色名称

start_time = params.get('startTime') # 开始时间

end_time = params.get('endTime') # 结束时间

sql_ddl = 'select id, name, remark, is_enable, creater, create_time, modifier, modify_time from website_role '

if role_name:

sql_ddl = sql_ddl + "where name like '%s%s' " % (role_name, '%%')

temp_mark = 1

else:

temp_mark = 0

if start_time:

if temp_mark:

sql_ddl = sql_ddl + "and create_time>='%s' " % start_time

else:

sql_ddl = sql_ddl + "where create_time>='%s' " % start_time

temp_mark = 1

else:

temp_mark = 0

if end_time:

if temp_mark:

sql_ddl = sql_ddl + "and create_time<='%s' " % end_time

else:

sql_ddl = sql_ddl + "where create_time<='%s' " % start_time

if order and sort:

sql_ddl = sql_ddl + 'order by %s %s' % (sort, order)

else:

sql_ddl = sql_ddl + 'order by id desc' # 最新创建的排在最前面

records = Role.objects.raw(sql_ddl)

records = json.loads(serializers.serialize('json', records), encoding='utf-8')

table_data["total"] = len(records)

paginator = Paginator(records, page_size) # 设置每页展示的数据

try:

page = paginator.page(page_index)

except PageNotAnInteger as e: # 如果请求的页面编号不存在，返回第一页数据

logger.warn('%s' % e)

page = paginator.page(1)

except EmptyPage as e: # 如果请求页面，超出页面范围，返回最后一页数据

logger.warn('%s' % e)

page = paginator.page(paginator.num_pages)

records = page.object_list

for record in records:

row = {}

row['id'] = record['pk']

row.update(record['fields'])

if row['is_enable']:

row['is_enable'] = '是'

else:

row['is_enable'] = '否'

rows.append(row)

table_data["rows"] = rows

content = {'data':table_data, 'msg':'获取角色信息成功', 'success':'true', 'reason': ''}

except Exception as e:

logger.error('getting roles info data failed: %s' % e)

content = {'data':[], 'msg':'获取角色信息失败', 'success':'false', 'reason': '%s' % e}

else:

logger.error('only get method allowed for getting roles data')

content = {'data':[], 'msg':'获取角色信息失败', 'success':'false', 'reason': 'only get method allowed for getting roles data'}

return JsonResponse(content)

说明：

bootstarp-table默认只支持按单列排序，默认打开页面，请求表数据时，会附加提供以下参数：

order=asc&offset=0&limit=pageSize

或者如下(添加了搜索框的情况下)

search=&order=asc&offset=0&limit=pageSize

search：前端输入的搜索内容

order:排序方式,asc - 升序 desc - 降序

sort：需要排序的列

offset：偏移

limit：限制查询返回记录数，即每页记录数

如下，我们可以通过limit和offset获取要查询要查询页面的索引(索引从1开始)

page_size = int(params.get('limit')) # 每页记录数

offset = int(params.get('offset'))

page_index = offset // page_size + 1 # 第几页数据

新增记录

def add_role(request):

'''

新增角色

'''

if request.method == 'POST':

try:

params = request.POST

creater = str(request.user)

role_name = params.get('roleName') # 资源名称

role_desc = params.get('roleDesc') # 资源描述

create_time = datetime.now().strftime('%Y-%m-%d %H:%M:%S')

# 验证数据合法性

if not role_name:

content = {'msg':'新增角色失败', 'success':'false', 'reason': '角色名称不能为空'}

return JsonResponse(content)

role_obj = Role(name=role_name,

remark=role_desc,

is_enable=1,

creater = creater,

create_time=create_time)

role_obj.save()

data = {'id':role_obj.id, 'name':role_name, 'remark':role_desc, 'is_enable':'是', 'creater':str(creater), 'create_time':create_time, 'modifier':'-', 'modify_time':'-' }

content = {'data':data, 'msg':'新增角色成功', 'success':'true', 'reason':''}

except Exception as e:

logger.error('adding role failed: %s' % e)

content = {'data':{}, 'msg':'新增角色失败', 'success':'false', 'reason': '%s' % e}

else:

logger.error('only post method allowed for adding role data')

content = {'data':{}, 'msg':'新增角色失败', 'success':'false', 'reason': 'only get method allowed for adding role data'}

return JsonResponse(content)

修改记录

def update_role(request):

'''

修改角色

'''

if request.method == 'POST':

try:

params = request.POST

modifier = str(request.user)

id = params['id']

role_name = params['roleName'] # 资源名称

role_desc = params['roleDesc'] # 资源描述

modify_time = datetime.now().strftime('%Y-%m-%d %H:%M:%S')

# 数据合法性验证

if not Role.objects.exclude(id=id).exists():

return JsonResponse({'msg':'修改失败', 'success':'false', 'reason': '角色不存在'})

# 更新数据

obj = Role.objects.get(id=id)

obj.name = role_name

obj.remark = role_desc

obj.modify_time = modify_time

obj.modifier = modifier

obj.save()

data = { 'name':role_name, 'remark':role_desc, 'modify_time':modify_time, 'modifier':modifier} # 返回需要更新的数据，以便页面更新对应行信息

content = {'msg':'修改成功', 'data':data, 'success':'true', 'reason':''}

except Exception as e:

logger.error('updating role failed: %s' % e)

content = {'msg':'修改失败', 'data':{}, 'success':'false', 'reason': '%s' % e}

else:

logger.error('only post method allowed for updating role')

content = {'msg':'修改失败', 'data':{}, 'success':'false', 'reason': 'only post method allowed for updating role'}

return JsonResponse(content)

删除记录

def delete_role(request):

'''

删除角色

'''

if request.method == 'POST':

try:

params = request.POST

id_list = eval(params.get('idArray') + ",") # 如果不加逗号，前端只传递一个参数时，这里获取到的id_list为单个整数值

mark = True

reason = ''

try:

with transaction.atomic():

for id in id_list:

role = Role.objects.filter(id=id)

if role.exists():

role.delete()

except Exception as e:

reason = 'deleting role failed: %s' % e

logger.error(reason)

mark = False

if mark:

return JsonResponse({'msg':'删除成功', 'success':'true', 'reason': ''})

else:

return JsonResponse({'msg':'删除失败', 'success':'false', 'reason': '%s' % reason})

except Exception as e:

logger.error('deleting role failed: %s' % e)

content = {'msg':'删除失败', 'success':'false', 'reason': '%s' % e}

else:

logger.error('only post method allowed for deleting role')

content = {'msg':'删除失败', 'success':'false', 'reason': 'only post method allowed for deleting role'}

return JsonResponse(content)

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！

jquery中文手册 jquery下载 jquery怎么用

本文由 @从安发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

jQuery30天热搜词更多>>