require模块化开发形式下, 引入bootstrapTable edit插件,实现在行内修改
涉及到修改模式为 从后台获取联系人列表进行修改
首先,先来看require 引入bootstrap edit插件
- main.js
require.config({
baseUrl: '/static/js', // 基本路径
paths: { // 每个路径地址
'jquery': 'lib/jquery-3.1.0.min',
'bootstrap': 'lib/bootstrap.min',
'bootstrapTable': 'plugins/bootstrap-table.min',
'bootstrapTableZn': 'plugins/bootstrap-table-zh-CN.min',
'bootstrapValidate': 'plugins/bootstrapValidator.min',
'bootstrapSelect': 'plugins/bootstrap-select',
'bootstrapEdit': 'plugins/bootstrap-editable.min',
'bootstrapTableEdit': 'plugins/bootstrap-table-editable',
'myTable': 'src/common/dataTable',
'myPublic': 'src/common/public',
'toast': 'plugins/jquery.toast',
'showDialog': 'plugins/showDialog'
},
shim: { // 第三方库
bootstrap: {
deps: ['jquery'], // 依赖
exports: 'bootstrap' // 输出的变量
},
bootstrapTable: {
deps: ['jquery'],
exports: 'bootstrapTable'
},
bootstrapTableZn: {
deps: ['jquery','bootstrapTable'],
exports: 'bootstrapTableZn'
},
bootstrapValidate: {
deps: ['jquery'],
exports: 'bootstrapValidate'
},
bootstrapSelect: {
deps: ['jquery'],
exports: 'bootstrapSelect'
},
bootstrapEdit: {
deps: ['jquery'],
exports: 'bootstrapEdit'
},
bootstrapTableEdit: {
deps: ['jquery','bootstrapTable'],
exports: 'bootstrapTableEdit'
},
toast: {
deps: ['jquery'],
exports: 'toast'
},
showDialog:{
deps: ['jquery'],
exports: 'showDialog'
}
}
});
这里注意,bootstrapTableEdit 插件的依赖(deps)必须要填写上bootstrapTable,否则就会没效果
- a.js (例子)
require(['jquery','bootstrap', 'bootstrapTable','bootstrapTableZn','bootstrapEdit','bootstrapTableEdit','bootstrapValidate','bootstrapSelect','myPublic','myTable'],function ($,bs,bsT,bsTZn,bsE,bsTE,bsV,bsS,myPublic,myTable) {
//这里写回调函数。
});
在需要引入表格和表格行内修改的插件的js中这样子引入插件、设置参数以及写回调函数
- 回调函数中,加载表格数据时列参数(修改参数editable)
{
field: 'service_name',
title: '服务名称',
align: 'center',
valign: 'middle',
editable: {
type: 'text',
title: '服务名称',
validate: function (v) {
if (!v) return '服务名称不能为空';
}
}
},
修改的数据是下拉框
{ field: 'command_name', title: 'command', align: 'center', valign: 'middle', editable: { type: 'select', title: 'command', source: nagios.service.commandNameList } },
这里source是select数据,一般项目中select数据都是后台数据,因为此页面中很多处用到多次这个列表,所以在页面加载时从后台获取到值,存入对象中。这里还有个点,就是bootstrap-select数据从后台渲染。代码如下:
getSelectListData: function (url, container) {
var valueArr = [];
$.ajax({
type: 'get',
url: url,
dataType: 'json',
data: {},
async: false,
success: function (res) {
if (res.status == 'ok') {
var data = res.data;
var str = '';
for (var i = 0; i < res.data.length; i++) {
valueArr.push({value: data[i], text: data[i]});
str += '<option value="' + data[i] + '">' + data[i] + '</option>'
}
container.html(str);
container.selectpicker('refresh');
} else {
myPublic.notice('提示', 'warning', res.describe);
}
},
error: function () {
myPublic.notice('提示', 'error', '请求超时,请稍后重试')
},
});
return valueArr;
},
ajax获取到,渲染到dom中后,要刷新select,也就是container.selectpicker('refresh');
(refresh方法更新UI以匹配新状态。对于删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。),否则dom中没有数据。
接下来触发 保存修改后的数据 事件,这里封装函数
function editSave(row) { delete row.id; $.ajax({ type: "post", url: url, data: row, dataType: 'JSON', success: function (res) { }, error: function () { } }) }
bootstrap-table 配置
onEditableSave
$(tableId).bootstrapTable({
method: 'get',
url: url,
undefinedText: '-', // 当数据为 undefined 时显示的字符
cache: false,
pagination: true, //设置为 true 会在表格底部显示分页条
pageList: [10, 15, 20, 25], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
//搜索
search: search,
searchAlign: searchAlign || 'left',
// 列
columns: columns,
onEditableSave: function (field, row, oldValue, $el) {
editFn(row);
},
striped: true,
});
因为我这里bootstrap table 渲染数据方法是复用的,看着可能不太清晰,调用上面的editSave()
方法,传入row
参数,如果后台不需要某个字段,delete
掉就可以了。
如果有哪些地方大神们觉得需要修改,请评论留言哦~