Jqgrid-表未显示响应行为

Jqgrid - Table not displaying responsive behavior

本文关键字:响应 显示 Jqgrid-      更新时间:2023-09-26

Hi我有下面的代码,它使用jqgrid显示表格。但是,我注意到jqGrid中没有一个响应。

我如何使现有的jqGrid对平板电脑和智能手机做出响应

升级

我已经用以下更新了我的代码

 $(window).on("resize", function () {
    var newWidth = $("#loanGrid").closest(".ui-jqgrid").parent().width();
   $("#loanGrid").jqGrid("setGridWidth", newWidth, true);
});

责任感起作用,但并非完全起作用。

这是下面的代码,在这里摆弄HTML

<div class="container-fluid">
   <div class="row">
      <div class="col-md-11">
         <h3 class="subheader"> Sample Info </h4>
         <div class="redmond">
            <table id="output"></table>
         </div>
     </div>
  </div>     
</div>

jqGrid JavaScript

$("#output").jqGrid({
    url: jsonData,
    mtype: "GET",
    datatype: "json",
    /*  postData: {
          json: JSON.stringify(data)
      },
      */
    colModel: [
      /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
      {
        name: 'Symbol',
        label: 'Symbol',
        align: 'left',
        width: 65
      }, {
        name: 'Description',
        label: 'Description',
        align: 'left',
        width: 165
      }, {
        name: 'ShareQuantity',
        label: 'ShareQuantity',
        align: 'right',
        width: "85",
        formatter: 'currency',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'SharePrice',
        label: 'Share Price',
        align: 'right',
        width: 100,
        template: "number",
        formatoptions: {
          prefix: " $",
          decimalPlaces: 4
        }
      },
      /*{ label: 'Value1', 
                  name: 'Value1', 
                  width: 80, 
                  sorttype: 'number', 
                  formatter: 'number',
                  align: 'right'
              }, */
      {
        name: 'TotalValue',
        label: 'Total Value',
        width: 160,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }, {
        name: 'LTVRatio',
        label: 'LTV Ratio',
        width: 70,
        sorttype: 'number',
        align: "right",
        formatter: 'percentage',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'LTVCategory',
        label: 'LTV Category',
        width: 120,
        width: 165
      },
      {
        name: 'MaxLoanAmt',
        label: 'MaxLoanAmount',
        width: 165,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }
    ],
    additionalProperties: ["Num1"],
    /*beforeProcessing: function (data) {
        var item, i, n = data.length;
        for (i = 0; i < n; i++) {
            item = data[i];
            item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
            item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
            item.Value = parseFloat($.trim(item.Value).replace(",", ""));
            item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
            item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
        }
    }, */
    iconSet: "fontAwesome",
    loadonce: true,
    rownumbers: true,
    cmTemplate: {
      autoResizable: true,
      editable: true
    },
    autoResizing: {
      compact: true
    },
    forceClientSorting: true,
    sortname: "Symbol",
    footerrow: true,
    caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",

    loadComplete: function() {
      var $self = $(this),
        sum = $self.jqGrid("getCol", "Price", false, "sum"),
        sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
      //ltvratio =  $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
      $self.jqGrid("footerData", "set", {
        LTVCategory: "Max Approved Loan Amount:",
        Price: sum,
        MaxLoanAmt: sum1
      });
    }
  });
  //jQuery("#loanGrid").jqGrid('filterToolbar', { stringResult: true,  searchOnEnter: false, defaultSearch: "cn" });
});

根据窗口分辨率,您可以使用引导类.visible-*hidden-*来隐藏/显示页面上的某些元素(请参阅文档)。属性classeslabelClassescolModel可以在免费的jqGrid(从版本4.8开始,请参阅此处和此处)中使用,以将类分配给列。例如,演示https://jsfiddle.net/OlegKi/w7pxts0z/7/使用

classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm"

LTVCategory列中的及其性质

classes: "hidden-xs", labelClasses: "hidden-xs"

在CCD_ 7和CCD_。因此,列LTVCategory将隐藏在"特大型设备"(宽度<768px)和"小型设备"(宽<992px,但宽度>=768px)上。