Web-插件 表格插件bootstrap-table使用示例
说明
bootstrap-table是bootstrap的一个表格插件，本文将介绍bootstrap-table的一些使用示例。
示例列表
刷新表格
$("#table").bootstrapTable('refresh');
表格传参
$('#excuteDoctorAdviceList').bootstrapTable('refresh',{
query:{
patientName:patientName
}
});
自定义单元格
{
field: 'user_name',</code>
title: '操作',
align: 'center',
formatter: operateFormatter //自定义方法，添加操作按钮
}
function operateFormatter(value, row, index){
var str="";
if(row.status==6){
var str= "<a href='javascript:rejectdoctorDetail("+row.doctor_advice_detail_id+")'>驳回<a/>";
}else{
var str="<span style='color:red'>已驳回</span>";
}
return str;
}
获取选中id
function getSelections(){
var selectDetail =$('#excuteDoctorAdviceList').bootstrapTable("getSelections");
if(""==selectDetail){
alertStr("请至少选择一条医嘱");
return false;
}
var selectArray= new Array();
$.each(selectDetail, function(index, val) {
/* iterate through array or object */
selectArray.push(val.doctor_advice_id);
});
return selectArray.join(",");
}
添加自增id列
{
title: "序号",
formatter: function(value, row, index) {
return index + 1;
},
rowspan: 1,
align: 'center',
width: '50px'
},
单元格单击事件
1.指定某一列单元格加载单击事件
onClickCell: function(field, value, row, $element) {
if(field=="drug_num"){
$element.html("<input style='width:40px' type='test' ></input>"); //单击后变为input框
$element.find('input').focus().select(); //焦点选中
$element.find('input').keyup(function(event){ //回车事件
if(event.keyCode ==13){
$element.html($(this).val());
index = $element.parent().data('index');
tdValue =$(this).val();
editData(index, field, tdValue); //单元格赋值
}
});
}
},
2.更新单元格
function editData(index, field, value){ //更新单元格的值
$("#ArbetTable").bootstrapTable('updateCell', {
index: index, //行索引
field: field, //列名
value: value //cell值
})
}
删除单元行（普通删除id会错乱）
1.定义删除事件
},{
field: 'operate',
title: '操作',
align: 'center',
formatter: removeDrug, //自定义方法，添加操作按钮
events: operateEvents, //定义删除事件
},
2.自定义方法
function removeDrug(value, row, index){
return "<button type='button' class='btn btn-default btn-sm tableDelete' style='padding-top:0px;padding-bottom:0px;'><span class='glyphicon glyphicon-minus' style='margin-right: 0px;' ></span></button>";
}
3.自定义事件
window.operateEvents = {
'click .tableDelete': function (e, value, row, index) {
rowDelete(row.drug_id);
}
}
4.删除本行
function rowDelete(drug_id){
$("#ArbetTable").bootstrapTable('remove', {
field: 'drug_id',
values: [drug_id]
});
}
bootstrap-table记忆翻页
1.定义复选框，从全局数组中记忆取回
{
checkbox:true,
field: 'id',
formatter : function(i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
if ($.inArray(row.drug_id,
overAllIds) != -1) {// 因为 判断数组里有没有这个 id
return {
checked : true
// 存在则选中
}
}
}
},
2.定义全局数组
var overAllIds = new Array(); //全局数组
var overName=new Array("已选择药品:");
3.定义checkbox点击、取消事件
$('#drugTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e, rows) {
var datas = $.isArray(rows) ? rows : [ rows ]; // 点击时获取选中的行或取消选中的行
examine(e.type, datas); // 保存到全局 Array() 里
});
4.选中方法处理
function examine(type, datas) {
if (type.indexOf('uncheck') == -1) {
$.each(datas,
function(i, v) {
// 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加
overAllIds.indexOf(v.drug_id) == -1 ? overAllIds
.push(v.drug_id) : -1;
overName.push(v.drug_name+" ");
});
} else {
$.each(datas, function(i, v) {
overAllIds.splice(overAllIds.indexOf(v.drug_id), 1); //删除取消选中行
overName.splice(overName.indexOf(v.drug_name+" "), 1); //删除取消选中行
});
}
drugs=overName.join("");
$("#is_drug").html(drugs);
}
bootstrap-table 父子关联表
$(function() {
var oTableInit = new Object();
var oInit = new Object();
$('#excuteDoctorAdviceList').bootstrapTable({
url: 'URL', //请求后台的URL（*）
method: 'post', //请求方式（*）
detailView: true, //父子表
dataType: "json",
contentType: "application/x-www-form-urlencoded",
striped:true,//隔行变色
cache:false, //是否使用缓存
showColumns:false,// 列
pagination: true, //分页
paginationLoop:false,
buttonsAlign: "right", //按钮对齐方式
sidePagination: "server", //服务端处理分页
pageNumber:1,
pageSize:20,
pageList:[15, 20, 30],
undefinedText:'--',
queryParamsType:'',
height:$(window).height() - 80,
columns: [{
rowspan: 1,
align: 'center',
field:"id",
checkbox:true
},
{
field: 'doctor_advice_id',
visible:false
},{
field: 'patient_id',
visible:false
},{
field: 'patient_name',
title: '姓名',
align: 'center',
},
],
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp = {
pageSize: params.pageSize, //页面大小
pageNumber: params.pageNumber, //页码
sort: params.jssj, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return temp;
},
onExpandRow: function(index, row, $detail) {
oTableInit.InitSubTable(index, row, $detail);
}
});
oTableInit.InitSubTable = function(index, row, $detail) {
var doctorAdviceId = row.doctor_advice_id;
var cur_table = $detail.html('<table id="detail"></table>').find('table');
$(cur_table).bootstrapTable({
url: "子链接url", //请求后台的URL（*）
method: 'post',
dataType: "json",
contentType: "application/x-www-form-urlencoded",
clickToSelect: true,
queryParams : {doctorAdviceId:doctorAdviceId},
columns: [{
title: "序号",
formatter: function(value, row, index) {
return index + 1;
},
rowspan: 1,
align: 'center',
width: '50px'
},{
field: 'type',
title: '类型',
align: 'center',
}, {
field: 'classPrimaryName',
title: '名称',
align: 'center',
formatter: lookTreatFormatter,
}, {
field: 'dosage',
title: '初始数量',
align: 'center',
}, {
field: 'dosage',
title: '初始数量',
align: 'center',
}, {
field: 'src_unit_name',
title: '单位',
align: 'center',
},{
field: 'min_dosage',
title: '计量',
align: 'center',
},{
field: 'user_name',
title: '操作',
align: 'center',
formatter: operateFormatter //自定义方法，添加操作按钮
}
],
//无线循环取子表，直到子表里面没有记录
onExpandRow: function(index, row, $Subdetail) {
oInit.InitSubTable(index, row, $Subdetail);
},
});
return oTableInit;
};
});
结尾
你是我的半截的诗，不许别人更改一个字--《半截的诗》