使用 jquery 模板明智地显示网格列答案

【问题标题】：Displaying grid column wise using jquery templates使用 jquery 模板明智地显示网格列
【发布时间】：2012-03-10 12:16:38
【问题描述】：

我有数据在 json 行明智的计划.. 喜欢

[{"CostPerSearch":2.39,"PackageId":9,"PackageName":"PAYG","PackPlanId":1,"PackTypeId":2,"SearchPerMonth":0,"SetupFee":349.00,"SubscriptionFee":0.00,"ValidityMonth":null},{"CostPerSearch":1.99,"PackageId":10,"PackageName":"Standard","PackPlanId":1,"PackTypeId":2,"SearchPerMonth":275,"SetupFee":349.00,"SubscriptionFee":499.00,"ValidityMonth":null},{"CostPerSearch":1.79,"PackageId":11,"PackageName":"Premium","PackPlanId":1,"PackTypeId":2,"SearchPerMonth":600,"SetupFee":349.00,"SubscriptionFee":999.00,"ValidityMonth":null},{"CostPerSearch":1.59,"PackageId":12,"PackageName":"Silver","PackPlanId":1,"PackTypeId":2,"SearchPerMonth":1500,"SetupFee":349.00,"SubscriptionFee":1999.00,"ValidityMonth":null},{"CostPerSearch":1.39,"PackageId":13,"PackageName":"Gold","PackPlanId":1,"PackTypeId":2,"SearchPerMonth":3800,"SetupFee":349.00,"SubscriptionFee":4999.00,"ValidityMonth":null},{"CostPerSearch":0.00,"PackageId":14,"PackageName":"Platinum","PackPlanId":1,"PackTypeId":2,"SearchPerMonth":0,"SetupFee":349.00,"SubscriptionFee":9999.00,"ValidityMonth":null}]

我想在数据列上方显示如下格式

Packages        PayG       Standard .......

Setupfee         349         349
Monthlyfee       0           499
......

我有 json，但对 jquery 模板的使用感到困惑，以便在上面的外观中轻松显示列数据。

【问题讨论】：

你可以使用jqGrid
有没有使用jquery模板的示例？因为我有数据行并希望按列显示。
如果您想水平重复数据，您可以将所有 HTML 生成为 div 集合，并应用 CSS 格式将它们横向堆叠，如 'float: left' 。请注意，只有当父容器有足够的空间时，'float: left'才会强制你所有的内容向左。否则，您必须使父容器水平滚动以显示所有内容。

标签： jquery jquery-ui jquery-plugins jquery-templates jsrender

【解决方案1】：

一种选择是在放入模板之前转换 javascript 对象。看来您知道该表将有多少行。在您的示例中，它有 8 行，因为每个条目都有 9 个属性，但您将提取一个作为顶部列名称。

这种转换虽然有点乏味，但不是火箭科学。

您还可以查看“星星”示例。它为每个评级附加一个字符串。它在这里应用的方式是你可以有一组字符串——在这个例子中是 9。一个用于标题，然后每个数据行再增加 8 个。在每个循环中，将 {{:PackageName}} 附加到标头字符串，并将类似的（例如）{{:SetupFee}} 附加到 setup_fee 字符串。一旦你完成了字符串，用一个字符串包裹 tr 字符串。用“tr”包装每个 td 字符串，然后用“tbody”包装所有这些字符串。最后将两者包装在一个表格中。

【讨论】：