bootstrap——bootstrapTable实现隐藏列的示例
最近在学习bootstrap，正好今天看到了bootstrapTable隐藏列，留着以后参考。
主要代码：
<scripttype="text/javascript">
$(function(){
LoadingDataListOrderRealItems();
$('#tableOrderRealItems').bootstrapTable('showColumn','ShopName');
$('#tableOrderRealItems').bootstrapTable('hideColumn','GoodsId');
});
</script>
全部代码：
<!--订单中商品列表模块开始-->
<scripttype="text/javascript">
functionLoadingDataListOrderRealItems(){
$('#tableOrderRealItems').bootstrapTable({
url:'/Handler/Handler_Orders/AllOrder_Real_Virtuall_Handler.ashx?func=Get_Orders_Real_SelectGoodsListByOrderId',
method:'get',//默认是post,不允许对静态文件访问
cache:false,
striped:true,//隔行加亮
pagination:true,//开启分页功能
pageSize:20,//设置默认分页为20
pageNumber:1,
pageList:[10,25,50,100,200],//自定义分页列表
//contentType:"application/x-www-form-urlencoded",//如果想用request.form方式，设置contentType:"application/x-www-form-urlencoded",
search:false,//开启搜索功能
sidePagination:'server',//设置为服务器端分页
queryParams:queryParams,//参数
showColumns:true,//开启自定义列显示功能
showRefresh:false,//开启刷新功能
minimumCountColumns:2,//设置最少显示列个数
clickToSelect:true,
smartDisplay:true,
clickToSelect:true,//单击行即可以选中
sortName:'OrderRealItemsId',//设置默认排序为name
sortOrder:'desc',//设置排序为反序desc
smartDisplay:true,//智能显示pagination和cardview等
dataType:"json",
columns:[{
field:'OrderId',
title:'#',
align:'center',
},{
field:'OrderItemId',
title:'OrderItemId',
align:'left',
},{
field:'GoodsId',
title:'GoodsId',
align:'left',
},{
field:'OrderCode',
title:'订单编号',
align:'left',
},{
field:'GoodsName',
title:'商品名称',
align:'left',
},{
field:'GoodsMainPic',
title:'图片',
align:'left',
formatter:function(value,row,index){
if(value!=""){
return'<imgstyle="width:150px;height:100px"src="'+ServiceJsonServiceClient_CommonLib+value+'"/>';
}
else
return'<imgstyle="width:150px;height:100px"src="'+Client_NoPicture+'"/>';
}
},{
field:'Consignor',
title:'收货人',
align:'left',
},{
field:'ReceiveAddress',
title:'收货地址',
align:'left',
},{
field:'ReceiveTel',
title:'联系电话',
align:'left',
},{
field:'SellerName',
title:'卖家姓名',
align:'left',
},{
field:'ShopName',
title:'店铺名称',
align:'left',
},{
field:'ModelName',
title:'商品类型',
align:'left',
},{
field:'FinalPrice',
title:'最终价格',
align:'left',
},{
field:'GoodsCount',
title:'数量',
align:'left',
},{
field:'AppriseStatus',
title:'物流状态',
align:'left',
},{
title:'操作',
field:'Id11',
align:'center',
width:'100px',
formatter:function(value,row,index){
}
}]
});
}
//获取URL参数
functionGetQueryString(name){
varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象
varr=decodeURI(window.location.search).substr(1).match(reg);//匹配目标参数
if(r!=null)returnunescape(r[2]);returnnull;//返回参数值
}
//设置传入参数
functionqueryParams(params){
varOrderId=GetQueryString("OrderId");
vartemp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit:params.limit,//页面大小
offset:params.offset,//页码
OrderId:OrderId
};
returntemp;
}
</script>
<scripttype="text/javascript">
$(function(){
LoadingDataListOrderRealItems();
$('#tableOrderRealItems').bootstrapTable('showColumn','ShopName');
$('#tableOrderRealItems').bootstrapTable('hideColumn','GoodsId');
$('#tableOrderRealItems').bootstrapTable('hideColumn','OrderItemId');
$('#tableOrderRealItems').bootstrapTable('hideColumn','ShopName');
$('#tableOrderRealItems').bootstrapTable('hideColumn','SellerName');
});
</script>
<!--订单中商品列表模块开始-->
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。