最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
bootstrap――bootstrapTable实现隐藏列的示例
时间:2017-01-17 编辑:简简单单 来源:一聚教程网
最近在学习bootstrap,正好今天看到了bootstrapTable隐藏列,留着以后参考。
主要代码:
代码如下 | 复制代码 |
$(function() { LoadingDataListOrderRealItems(); $('#tableOrderRealItems').bootstrapTable('showColumn','ShopName'); $('#tableOrderRealItems').bootstrapTable('hideColumn','GoodsId'); });
|
全部代码:
代码如下 | 复制代码 |
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 !="") { } else } }, { 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; }
$(function() { LoadingDataListOrderRealItems(); $('#tableOrderRealItems').bootstrapTable('showColumn','ShopName'); $('#tableOrderRealItems').bootstrapTable('hideColumn','GoodsId'); $('#tableOrderRealItems').bootstrapTable('hideColumn','OrderItemId'); $('#tableOrderRealItems').bootstrapTable('hideColumn','ShopName'); $('#tableOrderRealItems').bootstrapTable('hideColumn','SellerName'); });
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31