温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在bootstrap中利用bootstrapTable隐藏列

发布时间:2021-04-15 17:58:04 阅读:268 作者:Leah 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

怎么在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,不允许对静态文件访问
        cachefalse,
        stripedtrue, // 隔行加亮
        paginationtrue, // 开启分页功能
        pageSize20, // 设置默认分页为 20
        pageNumber1,
        pageList: [102550100200], // 自定义分页列表
        //contentType"application/x-www-form-urlencoded",//如果想用request.form 方式,设置 contentType"application/x-www-form-urlencoded",
        searchfalse,//开启搜索功能
        sidePagination'server',//设置为服务器端分页
        queryParams: queryParams,//参数
        showColumnstrue, // 开启自定义列显示功能
        showRefreshfalse, // 开启刷新功能
        minimumCountColumns2,// 设置最少显示列个数
        clickToSelecttrue,
        smartDisplaytrue,
        clickToSelecttrue, // 单击行即可以选中
        sortName'OrderRealItemsId', // 设置默认排序为 name
        sortOrder'desc', // 设置排序为反序 desc
        smartDisplaytrue, // 智能显示 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  src="' + ServiceJsonServiceClient_CommonLib + value + '" />';
            }
            else
              return '<img  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 != nullreturn 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>
  <!--订单中商品列表 模块 开始-->

看完上述内容,你们掌握怎么在bootstrap中利用bootstrapTable隐藏列的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×