使用 jquery 模板按列显示网格

发布于 2025-01-06 19:26:36 字数 1340 浏览 0 评论 0原文

我有 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 模板的使用感到困惑,以便在上面的外观中轻松显示按列的数据。

I have data in json row wise for plans..
like

[{"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}]

I want to display above data column wise as below format

Packages        PayG       Standard .......

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

I have json but confused about jquery template usage to display column wise data easily in above look.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

寻找我们的幸福 2025-01-13 19:26:36

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

这种转变虽然有点乏味,但并不是火箭科学。

您还可以查看“星星”示例。它为每个评级附加一个字符串。它在这里应用的方式是您可以拥有一组字符串 - 在本例中为 9。一个用于标题,然后另外 8 个用于每个数据行。在每个循环中,将 {{:PackageName}} 附加到标头字符串,并将类似的(例如){{:SetupFee}} 附加到 setup_fee 字符串。完成字符串处理后,用字符串包裹 tr 字符串。用“tr”包裹每个 td 字符串,然后用“tbody”包裹所有字符串。最后将两者包在一张桌子上。

One choice would be to just transform the javascript object before dropping into the template. It appears that you know how many rows the table will have. In your sample, it has 8 rows since each entry has 9 attribute but you are going to pull out one for the top column name.

That kind of transform, while a little tedious, isn't rocket science.

You could also look at the "stars" example. It appends a string for each rating. The way that it applies here is you can have a set of string -- 9 in this example. One for the header one and then 8 more for each of the data rows. In the each loop, append a {{:PackageName}} to the header string and a similar (for example) {{:SetupFee}} to the setup_fee string. Once you are done with the strings, wrap the tr string with a string. wrap each td string with a "tr" and then wrap all those with a "tbody". Finaly wrap the two in a table.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文