- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将 jqgrid 与子网格一起使用。我创建了一个 jqgrid 表。但是,我想在 subgrid 中显示描述和符号。
我还包含了 JSOn 数据和我的代码片段以及 fiddle demo here
我可以在没有嵌套 JSON 数据的情况下使用 jqgrid 从以下 JSON 数据创建子网格吗?有什么例子或者demo可以引用吗?
$(document).ready(function() {
var jsonData = {
"Name": "Julie Brown",
"Account": "C0010",
"LoanApproved": "12/5/2015",
"LastActivity": "4/1/2016",
"PledgedPortfolio": "4012214.00875",
"MaxApprovedLoanAmt": "2050877.824375",
"LoanBalance": "1849000",
"AvailableCredit": "201877.824375",
"Aging": "3",
"Brokerage": "My Broker",
"Contact": "Robert L. Johnson",
"ContactPhone": "(212) 902-3614",
"RiskCategory": "Yellow",
"rows": [{
"ClientID": "C0010",
"Symbol": "WEC",
"Description": "Western Electric Co",
"ShareQuantity": "20638",
"SharePrice": "21.12",
"TotalValue": "435874.56",
"LTVCategory": "Equities",
"LTVRatio": "50%",
"MaxLoanAmt": "217937.28"
}, {
"ClientID": "C0010",
"Symbol": "BBB",
"Description": "Bins Breakers and Boxes",
"ShareQuantity": "9623",
"SharePrice": "74.29125",
"TotalValue": "714904.69875",
"LTVCategory": "Equities",
"LTVRatio": "50%",
"MaxLoanAmt": "357452.349375"
}, {
"ClientID": "C0010",
"Symbol": "GPSC",
"Description": "Great Plains Small Cap Stock",
"ShareQuantity": "49612",
"SharePrice": "14.24",
"TotalValue": "706474.88",
"LTVCategory": "Mutual Funds - Small Cap",
"LTVRatio": "40%",
"MaxLoanAmt": "282589.952"
}]
},
mmddyyyy = "";
/*********************************************************************/
$("#output").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
width: 65
}, {
name: 'Description',
width: 165
}, {
name: 'ShareQuantity',
align: 'right',
width: 85,
classes: "hidden-xs", labelClasses: "hidden-xs",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
classes: "hidden-xs", labelClasses: "hidden-xs",
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',
classes: "hidden-xs", labelClasses: "hidden-xs",
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
},
autowidth: true,
height: 'auto',
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
});
}
});
$("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
$(window).on("resize", function () {
var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
$("#output").jqGrid("setGridWidth", newWidth, true);
});
});
最佳答案
如果我正确理解了您的要求,那就相对容易了。如果您想在子网格中显示"Symbol"
和"Description"
,那么您希望从主网格中删除相应的列。您使用 loadonce: true
选项用服务器返回的数据填充本地 data
。该项目表示输入数据的每一行,将填充列和 additionalProperties
选项中的属性。因此你应该添加
additionalProperties: ["Symbol", "Description"]
从列中删除 "Symbol"
和 "Description"
之后。
现在您应该添加 subGrid: true
选项来创建带有“+”符号的“subrgid”列,这允许打开网格。打开 jqGrid 时,为 subrgid 创建 div,回调 subGridRowExpanded
负责用数据填充网格。可以在 div 内部创建子网格,但可以以任何形式放置任何 HTML 片段。例如
subGridRowExpanded: function (subgridDivId, rowid) {
var item = $(this).jqGrid("getLocalRow", rowid);
$("#" + $.jgrid.jqID(subgridDivId)).html("Symbol: <em>" + item.Symbol +
"</em><br/>Description: <em>" + item.Description + "</em>");
}
生成的演示 https://jsfiddle.net/OlegKi/615qovew/75/显示如下图所示的数据
您完全可以自由设计“子网格”-div 中显示的信息。
关于javascript - jqgrid subgrids 如何在子网格中显示json值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39534967/
我的 jqgrid 中有一个状态栏。 如果状态为事件,我希望同一行中的另一个单元格为绿色。如果状态为“未激活”,我希望单元格为红色。 如何做到这一点? 截至目前,我已经在“图像”行上创建了一个自定义格
我正在使用 jqgrid 显示服务器中存在的数据如何在鼠标悬停工具提示上显示数据描述。 这是在 jqgrid 上显示工具提示的最佳方式? 最佳答案 鼠标悬停时 jqGrid 中显示的工具提示只不过是相
我有一个 asp.net 项目,它使用 jqgrid 作为 javascript 网格。如何找出正在使用的 jqgrid 版本? 最佳答案 如果您需要以编程方式查询版本,您可以使用: $.jgrid.
有没有办法以编程方式(在 Javascript 中,而不是服务器端)过滤当前显示在 jqGrid 中的数据?所有搜索示例似乎都依赖于使用 jqGrid 自己的搜索 UI,这对我不起作用。例如,我希望能
有没有一种方法可以切换网格的multiselect选项? 如果在创建网格时multiselect不是multiselect,则更改网格的TRUE参数并要求重新加载具有禁用或不创建标题列时将标题留在后面
我在jqGrid中使用列重新排序功能 $grid = jQuery("#list").jqGrid({ sortable:true, ... }); 重新排列列后是否会触发事件?如果有
我正在构建我的第一个ASP.NET MVC 3应用程序并使用jqGrid。我的其中一个列“Flavor Created”是日期列,我想使用DatePicker过滤该列上的网格。当前发生的情况是:用户单
我试图基于选定的行启用导航。因此,用户从jQgrid中选择一行,然后按show(有一个显示网格的按钮,我看到了edit,add等),它需要根据url转到新页面(该行的一部分) )。 $(documen
有没有办法设置 jqgrid 列的固定宽度(最大和最小)? 我已经在 colmodel 中设置了宽度属性,但是如果我调整网格的大小,列正在调整。 最佳答案 不能定义列的最大和最小宽度,但可以使其具有固
我被困在这里-生产前要做的最后一件事。 来自oracle的日期采用以下格式:“ 8/14/2012 10:46:48 AM” 我在jqgrid上使用以下内容: { name: 'CreationDat
我是 jqGrid 的新手,谁能解释一下 jqgrid colModel 中 Index 属性的用途 最佳答案 如果您使用datatype: "json" 或datatype: "xml" 没有额外使
我正在学习 jqGrid,希望最终能将它连接到 Redis 数据库。作为第一步,我正在处理本地数据。这是我必须使用可排序行(在网格中拖放行)。网格出现并且看起来不错,列甚至可以排序,但我无法选择一行并
我想每 5 分钟重新加载一次 jqgrid(给定间隔时间),是否有任何选项/事件。如何做到这一点? 最佳答案 您可以使用setInterval JavaScript函数进行自动刷新 var grid
我正在学习 jqGrid,希望最终能将它连接到 Redis 数据库。作为第一步,我正在处理本地数据。这是我必须使用可排序行(在网格中拖放行)。网格出现并且看起来不错,列甚至可以排序,但我无法选择一行并
大家好,我正在使用 JQ Grid,我得到的日期格式是 2012-09-16T00:00:00,就像这样。我希望日期格式采用 2012-09-16 方式。我试图改变它,但它不起作用。请查看我的代码并告
当我搜索 JQGrid 使用的图标时,我找到了包含所有图标的单个 PNG 文件。我想知道它如何使用图像的一部分作为 JQGrid 中使用的按钮的图标。 最佳答案 jqGrid 使用来自 jQuery
我使用 loadonce 预先获取所有数据,然后在本地进行排序和过滤。 我的列值之一是一个对象数组。在 colModel 选项中,我使用了如下所示的格式化程序函数: function my_forma
我想要在 jqGrid 中右键单击列标题时的列名称。任何代码将不胜感激。 最佳答案 可以绑定(bind)contextmenu事件到所有列标题。每个标题都是 元素等它的 DOM 支持 cellInde
我想计算总计 无需在 calctotal.php 中执行即可即时完成。从本质上讲,这是一个计算列。我想使用一些事件,如 afterInsertRow ,但即使没有事件,它也会将列数据移动一格,因为 X
我有一些数据想在 jqqgrid 中显示。除了添加、编辑和删除之外,还可以对选定记录执行其他操作。我喜欢在该记录的行中有一个用于该操作的按钮/链接的流程。有没有办法在 jqgrid 中添加未绑定(bi
我是一名优秀的程序员,十分优秀!