关联数据库,在之前已经提过,不重复了。其实原理上还是一样的,传递参数到servlet,然后执行数据库查询操作,然后将数据集整理成json,返回到表格中并显示。
需要关注的几个重点内容为:
1、在表格中实现内容的链接,使点击后能传递参数至servlet。
2、实现点击表格中的某一处,实现弹框,并且将表格中该行内容显示到弹框中。
一、表格中实现链接
重点关注bootstrap-table中的formatter: operateFormatter,这一参数设置,指定了该单元格内的内容通过operateFormatter函数实现。
var TableInit=function(){
var oTableInit = new Object();
oTableInit.Init=function(){
$('#reportTable').bootstrapTable({
method: 'get',
url: "<c:url value='/IP_IndexServlet?act="+state+"&&mIP="+mIP+"&&start="+StartSearch+"&&end="+EndSearch+"'/>", //获取数据的Servlet地址
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
};
return param;
},
cache: false,
//height: 750,
striped: true,
pagination: true,
silent: true, //以静默方式刷新数据
toolbar:"#toolbar",
locale:"zh-US", //表格汉化
sidePagination: "client",
pageSize: 10,
pageNumber:1,
pageList: [10, 14,15, 16, 18,20],
search: true,
showColumns: true,
showRefresh: true,
showExport: true,
exportDataType: 'all',
clickToSelect: true,
exportTypes:[ 'excel','xlsx','doc','csv', 'txt', 'sql' ],
exportOptions:{
//ignoreColumn: [12,14], //忽略某一列的索引
fileName: '数据导出', //文件名称设置
worksheetName: 'Sheet1', //表格工作区名称
tableName: 'IP数据表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
},
columns : [{
field : '序号',
title : '序号'
}, {
field : '类型',
title : '类型'
}, {
field : '品牌',
title : '品牌'
}, {
field : '操作系统',
title : '操作系统'
}, {
field : 'IP地址',
title : 'IP地址'
}, {
field : 'MAC地址',
title : 'MAC地址'
}, {
field : '责任单位',
title : '责任单位'
}, {
field : '责任人',
title : '责任人'
}, {
field : '用户名',
title : '用户名'
}, {
field : '密码',
title : '密码'
}, {
field : '接入地点',
title : '接入地点'
}, {
field : '最后修改时间',
title : '最后修改时间'
}, {
field : '是否分配',
title : '是否分配'
}, {
field : '备注',
title : '用途'
},{
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,//给按钮注册事件,
formatter: operateFormatter
}],
responseHandler: function (res) {
return{ //return bootstrap-table能处理的数据格式
"total":res.total,
"rows":res.rows
}
},
});
//隐藏正在加载
//$('#reportTable').bootstrapTable('hideLoading');
};
oTableInit.destroy=function(){
$("#reportTable").bootstrapTable('destroy');
}
return oTableInit;
}
var oTable = new TableInit();
oTable.destroy();
oTable.Init();
//单元格中的内容,显示其中有两个链接,一个id是edit,一个id是del,点击del时,会跳转到servlet,并携带相应参数,在servlet中实现指定主键值的数据的删除操作。
function operateFormatter(value, row, index) {
return [
"<a id='edit' class='fa fa-edit' href='#'></a>",
"<a id='del' style='margin-left: 20px' class='fa fa-close ' href='IP_IndexServlet?act=del&&userid="+row.主键值+"' οnclick='javascript:return p_del()'></a>"
].join('');
}
servlet中的内容我不加赘述,在前面已经提到过,至于数据库的查询内容,不是重点,也不多说。
二、点击弹框,并自动填充内容
关注bootstrap-table中的events: operateEvents,参数,指定了一些点击按钮时的函数动作。
window.operateEvents = {
//点击id为edit的链接时,执行该函数,将表格行中指定的列名的内容,填充到弹出框中指定id的内容中去。
'click #edit': function (e, value, row, index) {
$("#userid").attr("value",row.序号);
$("#LX").attr("value",row.类型);
$("#PP").attr("value",row.品牌);
$("#CZXT").attr("value",row.操作系统);
$("#mIP").attr("value",row.IP地址);
$("#MACDZ").attr("value",row.MAC地址);
$("#ZRDW").attr("value",row.责任单位);
$("#ZRR").attr("value",row.责任人);
$("#YHM").attr("value",row.用户名);
$("#MM").attr("value",row.密码);
$("#JRDD").attr("value",row.接入地点);
$("#ZHXGSJ").attr("value",row.最后修改时间);
$("#SFFP").val(row.是否分配);
$("#BZ").attr("value",row.备注);
$('#mod_IP_Info').modal('show');
}
};