bootstrap——bootstrapTable实现隐藏列的示例
更新时间:2017年01月14日 16:11:25 作者:秋风过、枯叶落
本篇文章主要介绍了bootstrapTable实现隐藏列的示例,具有一定的参考价值,有兴趣的可以了解一下。
最近在学习bootstrap,正好今天看到了bootstrapTable隐藏列,留着以后参考。
主要代码:
<script type="text/javascript"> $(function () { LoadingDataListOrderRealItems(); $('#tableOrderRealItems').bootstrapTable('showColumn', 'ShopName'); $('#tableOrderRealItems').bootstrapTable('hideColumn', 'GoodsId'); }); </script>
全部代码:
<!--订单中商品列表 模块 开始--> <script type="text/javascript"> function LoadingDataListOrderRealItems() { $('#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 '<img style="width:150px;height:100px" src="' + ServiceJsonServiceClient_CommonLib + value + '" />'; } else return '<img style="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参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = decodeURI(window.location.search).substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } //设置传入参数 function queryParams(params) { var OrderId = GetQueryString("OrderId"); var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 OrderId: OrderId }; return temp; } </script> <script type="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> <!--订单中商品列表 模块 开始-->
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
axios请求设置responseType为'blob'或'arraybuffer&apo
这篇文章主要给大家介绍了关于axios请求设置responseType为'blob'或'arraybuffer'下载时如何正确处理返回值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01JavaScript中的object转换成number或string规则介绍
这篇文章主要介绍了JavaScript中的object转换成number或string规则介绍,本文讲解了object自动转换成string的规则、object自动转换成number的规则等内容,需要的朋友可以参考下2014-12-12JavaScript高级程序设计 阅读笔记(十五) 浏览器中的JavaScript
Window对象对操作浏览器窗口非常有用,开发者可以移动或调整浏览器窗口的大小2012-08-08
最新评论