一般来说,采用bootstrap table,添加和修改数据都是通过弹出模态框来实现的,
但是现在遇见了一个点击行来实现编辑和新增的需求
html代码:
<div class="panel-body" style="padding-bottom: 0px;">
<div id="toolbar" style="margin-left: 15px;">
<button id="button" class="btn btn-default">insertRow</button>//插入一行
<button id="getTableData" class="btn btn-default">getTableData</button>//获取全部数据
</div>
<table id="getzxsjsz" data-mobile-responsive="false"></table>//表格展示
</div>
js代码:
var name = '';// 登陆用户姓名
window.onload = PageReady;
function PageReady() {
// 1.初始化Table
var oTable = new TableInit();
oTable.Init();//定义
let $table = $('#getzxsjsz');
let $button = $('#button');
let $getTableData = $('#getTableData');$button.click(function() {
$('#getzxsjsz').bootstrapTable('insertRow', {
index: 0,
row: {
zxlx: '',
sbsj: '',
xbsj: '',
wxkssj: '',
wxjssj: '',
cz:''
}
});
});
$getTableData.click(function() {
alert(JSON.stringify($table.bootstrapTable('getData')));
});}
// 查询作息时间
var TableInit = function() {
var oTableInit = new Object();
// 初始化Table
oTableInit.Init = function() {
getCqlData();
};// 得到查询的参数
oTableInit.queryParams = function(params) {
var temp = { // 这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit : params.limit, // 页面大小
offset : params.offset, // 页码
};
return temp;
};
return oTableInit;
};// 获取数据
function getCqlData(){
$('#getzxsjsz')
.bootstrapTable(
{
url : '../ajaxjsp/zxsjsz_json.jsp?type=getzxsjsz', // 请求后台的URL(*)
toolbar : '#toolbar', // 工具按钮用哪个容器
striped : true, // 是否显示行间隔色
cache : false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination : true, // 是否显示分页(*)
sortable : false, // 是否启用排序
sortOrder : "asc", // 排序方式
// queryParams : oTableInit.queryParams,// 传递参数(*)
sidePagination : "client", // 分页方式:client客户端分页,server服务端分页(*)
pageNumber : 1, // 初始化加载第一页,默认第一页
pageSize : 10, // 每页的记录行数(*)
pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数(*)
search : false, // 是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch : true,
showExport: true, // 是否显示导出
// exportTypes:['excel','xlsx'], //导出类型
exportOptions : {
fileName : document.title
},
exportDataType: "all", // basic', 'all',
// 'selected'.
showColumns : true, // 是否显示所有的列
showRefresh : true, // 是否显示刷新按钮
minimumCountColumns : 2, // 最少允许的列数
clickToSelect : false, // 是否启用点击选中行
height : '', // 行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId : "", // 每一行的唯一标识,一般为主键列
showToggle : true, // 是否显示详细视图和列表视图的切换按钮
cardView : false, // 是否显示详细视图
detailView : false, // 是否显示父子表
//fixedColumns : true,
//fixedNumber : 1,//固定列数
columns : [/*{
field : 'zxlx',
title : '作息类型',
align: 'center',
width: 180
}, */{
field : 'sbsj',
title : '上班时间',
align: 'center'
}, {
field : 'xbsj',
title : '下班时间',
align: 'center'
}, {
field : 'wxkssj',
title : '午休开始时间',
align: 'center'
}, {
field : 'wxjssj',
title : '午休结束时间',
align: 'center'
}] ,//双击单元格修改数据
onClickCell: function(field, value, row, $element) {
$element.attr('contenteditable', true);
$element.blur(function() {
let index = $element.parent().data('index');
let tdValue = $element.html();
// alert(row.zxlx);
saveData(index, field, tdValue , row.zxlx);
})
}
});
}//保存数据
function saveData(index, field, value, zxlx) {
//刷新页面数据
$('#getzxsjsz').bootstrapTable('updateCell', {
index: index, //行索引
field: field, //列名
value: value //cell值
});
var allTableData = $('#getzxsjsz').bootstrapTable('getData');
//后台处理
loginData({
type : "UpdateZxsj",
zxlx : encodeURI(zxlx),
field : encodeURI(field),
value : encodeURI(value),
callback : "backfillData"
}, false, "/zxsjsz_json.jsp");
}function backfillData(data){
if(data>0){ //表示修改成功
Search(); //刷新列表
}
}// 查询
function Search() {
var param = {
url : '../ajaxjsp/zxsjsz_json.jsp?type=getzxsjsz'
}
$('#getzxsjsz').bootstrapTable('refresh',param);
}
相关架包:
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="../bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<link href="../bootstrap-table/bootstrap-table-fixed-columns.css" rel="stylesheet" />
<script src="../bootstrap-table/jquery-1.10.2.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap-table/bootstrap-table.js"></script>
<script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="../bootstrap-table/bootstrap-table-fixed-columns.js"></script>
<script src="../bootstrap-table/bootstrap-table-export.min.js"></script>
<script src="../bootstrap-table/tableExport.min.js"></script>