Jqgrid-表未显示响应行为
Jqgrid - Table not displaying responsive behavior
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-*
来隐藏/显示页面上的某些元素(请参阅文档)。属性classes
、labelClasses
或colModel
可以在免费的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)上。
相关文章:
- 将高图饼图中的文本居中显示为响应
- 显示IIS上javascript文件(SOAP请求)的XML响应
- Jqgrid-表未显示响应行为
- Servlet对浏览器上显示的纯文本Javascript的响应
- 在SPRING中从ajax调用响应时显示不可接受错误
- 尊重“; 〃;从HTML显示中的API响应返回的换行符(和特殊字符)
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- Jquery 自动完成插件未显示成功响应
- 如何从服务器响应中显示phonegap中的图像
- 在表中显示ajax响应不起作用
- 如何在剑道网格中显示JSON响应
- isHidden函数要求我在应用响应显示时单击两次
- 根据json响应显示表
- 数据表响应-显示和隐藏列
- 如何在Angularjs中将json响应显示为代码而不是字符串
- 在XPages的父文档上将响应显示为嵌入视图
- FileStream响应显示的是拉丁字符
- 使用ajax响应显示多个图像
- 来自Servlet页面的响应显示在新页面中
- 根据用户响应显示另一个警报:OK或Cancel