多维数据如何显示？

eye215

数据json格式：
{"rows":[{"id":"1","name":"\u5929\u6c14","imgs":[{"img_id":"1","path":"http:\/\/www.a.com\/01.jpg"},{"img_id":"2","path":"http:\/\/www.a.com\/02.jpg"}],"comments":[{"comment_id":"2","username":"\u5927\u997c\u597d\u5403","content":"\u6211\u4eec\u8fd9\u91cc\u4e5f\u4e0b\u96e8\u4e86"},{"comment_id":"5","username":"\u773c\u775b\u5168\u5728\u770b","content":"\u767d\u7d20\u8d1e\u6765\u627e\u8bb8\u4ed9\u4e86\u4e48"}]},{"id":"1","name":"\u81ea\u7136","imgs":[{"img_id":"4","path":"http:\/\/www.a.com\/04.jpg"},{"img_id":"6","path":"http:\/\/www.a.com\/06.jpg"}],"comments":[{"comment_id":"8","username":"\u591a\u591a\u7684\u4e16\u754c","content":"\u8fd9\u5730\u65b9\u6211\u60f3\u53bb\u5f88\u4e45\u4e86"},{"comment_id":"11","username":"\u6211\u7684\u7f8e\u4e0d\u80dc\u6536","content":"\u6211\u7684\u5bb6\u4e61\uff0c\u6211\u9a84\u50b2"}]}]}
数据视图格式：

1. {
   
2.     "rows": [
   
3.         {
   
4.             "id": "1",
   
5.             "name": "天气",
   
6.             "imgs": [
   
7.                 {
   
8.                     "img_id": "1",
   
9.                     "path": "http://www.a.com/01.jpg"
   
10.                 },
    
11.                 {
    
12.                     "img_id": "2",
    
13.                     "path": "http://www.a.com/02.jpg"
    
14.                 }
    
15.             ],
    
16.             "comments": [
    
17.                 {
    
18.                     "comment_id": "2",
    
19.                     "username": "大饼好吃",
    
20.                     "content": "我们这里也下雨了"
    
21.                 },
    
22.                 {
    
23.                     "comment_id": "5",
    
24.                     "username": "眼睛全在看",
    
25.                     "content": "白素贞来找许仙了么"
    
26.                 }
    
27.             ]
    
28.         },
    
29.         {
    
30.             "id": "1",
    
31.             "name": "自然",
    
32.             "imgs": [
    
33.                 {
    
34.                     "img_id": "4",
    
35.                     "path": "http://www.a.com/04.jpg"
    
36.                 },
    
37.                 {
    
38.                     "img_id": "6",
    
39.                     "path": "http://www.a.com/06.jpg"
    
40.                 }
    
41.             ],
    
42.             "comments": [
    
43.                 {
    
44.                     "comment_id": "8",
    
45.                     "username": "多多的世界",
    
46.                     "content": "这地方我想去很久了"
    
47.                 },
    
48.                 {
    
49.                     "comment_id": "11",
    
50.                     "username": "我的美不胜收",
    
51.                     "content": "我的家乡，我骄傲"
    
52.                 }
    
53.             ]
    
54.         }
    
55.     ]
    
56. }
    
57. 
    

复制代码

这样格式的数据怎么写法呢？谁能给我个例子或者思路

liangyongfei

http://docs.wex5.com/wex5-ui-question-list-2032/

数据加载到data组件中！要求数据格式必须是符合我们的规范！
你的数据结构不符合规范！所以肯定不能直接加进去！

1.将你的数据格式进行一层的转换！变成符合我们data加载要求的数据！
2.我看你的数据中imgs  和 comments 都是一个数组！里面有多条数据！这样的话！建议数据分割下，重新组装，放置在不同data组件中！意思就是data组件设置主从关联，然后显示数据
http://docs.wex5.com/wex5-ui-question-list-2072

eye215

liangyongfei 发表于 2017-3-6 15:15
http://docs.wex5.com/wex5-ui-question-list-2032/

数据加载到data组件中！要求数据格式必须是符合我们的 ...

就是说，多维数据都要重组为一维数组，
然后每个一维数据都要请求一个数据。
比如上面的数据格式，就是请求三次。
是这样理解吗？

liangyongfei

eye215 发表于 2017-3-6 16:10
就是说，多维数据都要重组为一维数组，
然后每个一维数据都要请求一个数据。
比如上面的数据格式，就是请 ...

也可以一次请求下来！然后再js中 重新构造数据的结构！构造完后，数据分别加载到对应的data组件

eye215

没注意到  foreach绑定，用  foreach绑定 解决了

liangyongfei

eye215 发表于 2017-3-17 22:36
没注意到  foreach绑定，用  foreach绑定 解决了

欢迎分享一下代码？？foreach 如何绑定的？？数据可以是怎样的？

eye215

1. data部分：
   
2.           <div component="$UI/system/components/justep/data/data" autoLoad="true" idColumn="id" onCustomRefresh="getJsonData" xid="jsonData">
   
3.                   <column name="id" type="Integer" xid="json_id"></column>
   
4.                   <column name="name" type="String" xid="json_name"></column>
   
5.                   <column name="imgs" type="String" xid="json_imgs"></column>
   
6.                   <column name="comments" type="String" xid="json_comments"></column>
   
7.           </div>

复制代码

1. JS部分：
   
2. var dataJson = {"rows":[{"id":"1","name":"\u5929\u6c14","imgs":[{"img_id":"1","path":"http:\/\/www.a.com\/01.jpg"},{"img_id":"2","path":"http:\/\/www.a.com\/02.jpg"}],"comments":[{"comment_id":"2","username":"\u5927\u997c\u597d\u5403","content":"\u6211\u4eec\u8fd9\u91cc\u4e5f\u4e0b\u96e8\u4e86"},{"comment_id":"5","username":"\u773c\u775b\u5168\u5728\u770b","content":"\u767d\u7d20\u8d1e\u6765\u627e\u8bb8\u4ed9\u4e86\u4e48"}]},{"id":"1","name":"\u81ea\u7136","imgs":[{"img_id":"4","path":"http:\/\/www.a.com\/04.jpg"},{"img_id":"6","path":"http:\/\/www.a.com\/06.jpg"}],"comments":[{"comment_id":"8","username":"\u591a\u591a\u7684\u4e16\u754c","content":"\u8fd9\u5730\u65b9\u6211\u60f3\u53bb\u5f88\u4e45\u4e86"},{"comment_id":"11","username":"\u6211\u7684\u7f8e\u4e0d\u80dc\u6536","content":"\u6211\u7684\u5bb6\u4e61\uff0c\u6211\u9a84\u50b2"}]}]};
   
3. 
   
4. Model.prototype.getJsonData = function(event) {
   
5. var data = event.source;
   
6. data.loadData(dataJson.rows);
   
7. }

复制代码

1. imgs部分：
   
2.             <div component="$UI/system/components/justep/row/row" class="x-row" xid="row1"
   
3.              bind-foreach="{data:jsonData.ref('imgs'),as:'imgsData'}">
   
4.                     <div class="x-col"><img bind-attr="{src:imgsData.path,alt:imgsData.id}" align="middle"/></div>
   
5.             </div>

复制代码

1. comments部分：
   
2. <div bind-foreach="{data:jsonData.ref('comments'),as:'commentsData'}">
   
3. <p><span bind-text="commentsData.username"></span>说</p>
   
4. <p bind-text="commentsData.content"></p>
   
5. </div>

复制代码

1. 
   

复制代码

liangyongfei

eye215 发表于 2017-3-22 00:22

如果是加载到ｄａｔａ组件中的数据！那直接使用ｌｉｓｔ循环绑定显示就行呀！
/UI2/system/components/justep/list/demo/news.w
你这种做法倒是没见过！

eye215

用一个data就解决了，可以少写不少代码
如果在如果是list 里包含list的data数据，foreach绑定 就很实用，还有with绑定