格式化操作列
/**
* 操作列格式化函数
*/
function operateFormatter(value, row, index) {
if (row.is_enable == '是') {
return ''+
'<div class="btn-group">' +
'<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 class="btn-group">' +
'<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'); // 打开修改模态对话框
}
