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>
    <!--订单中商品列表 模块 开始-->
时间: 2024-10-12 11:03:42

bootstrap bootstrapTable 隐藏列的相关文章

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章. 一.起因回顾 最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定.也就是所谓的excel的冻结列功能.该如何实现呢?不用多说,当然是查文档,于是找到了这篇http:/

DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错的地方. 官方网站(中文):http://datatables.club/ 官方网站:https://www.datatables.net/  二.简单的例子 怎样简单地使用DataTables?使用下方简单的几行代码,一个方法初始化table. $(document).ready(function

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

12c 新特性-隐藏列

隐藏列 在11G中,Oracle就引入了不可见索引和虚拟字段的形式.12c继续发扬光大,引入了不可见字段. 之前的版本我们往往会创建视图来隐藏某些字段,12c中so easy. 在12c中,你可以创建通过invisible关键词来创建/修改某个字段为不可见.这一字段在查询中不会出现,除非指定这个字段.同样插入数据的时候也一样,默认是不向不可见字段插数据. 如: 1.创建一个新表,并指定sal为隐藏字段 SQL> create table test_a(name varchar2(50),age 

DataGridView隐藏列用CSS实现

隐藏DataGridView某一列,用CSS控制 CSS Code: .hidden{ display:none;} c# Code: <asp:BoundField DataField="id" HeaderText="id"> <ControlStyle CssClass="hidden" /> <ItemStyle CssClass="hidden" /> <HeaderStyl

NPOI 读取excel到DataTable 读取隐藏列 读取公式列

处理思路: 1.打开excel 用NPOI进行读取: 2.读取第一个Sheet: 读取过程中: a.先设置相应列 不隐藏 b.读取Cell时 先判断是否的包含公式 相应代码如下: public static DataTable ReadDataFromExcelByNPOI() { DataTable dt = new DataTable(); var filePathAndName = Path.Combine(Server.MapPath("~/Content/Excel"), &

如何在asp.net中获取GridView隐藏列的值?

在阅读本文之前,我获取gridview某行某列的值一般做法是这样的:row.Cells[3].Text.ToString().有点傻瓜呵呵 在Asp.net 2.0中增加了一个新的数据绑定控件:GridView,其目的用来取代Asp.net1.x中的DataGrid控件.获取GridView中的某列值的方法为   protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)    {        stri

Easyui datagrid 显示隐藏列

html: <div style="float: left; width: 1450px; height:auto;  "> <table id="List" class="easyui-datagrid" title="基站信息列表" width="1450px" style="height:580px;" data-options="rownumbers:

用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式修改提交对应的那一行的修改内容。

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 先给大家看看图片效果,大家不要直接复制代码,这样是运行不了的,因为你们数据库和我的不一样,但是你们可以自己读读这个代码,找找对自己有用的,当然我的方法也不是最好的希望大家可以给点意见,感激不尽. (1)点击修改图标 (2)填写修改内容 (3)点击确定修改 jquery与css代码: <style type="text