使用 jquery 模板按列显示网格
我有 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
一种选择是在放入模板之前先转换 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.