2011-09-21 17 views
5

में JSON ऑब्जेक्ट प्रदर्शित करें IUI डेटाटेबल का उपयोग करके निम्न JSON ऑब्जेक्ट को प्रदर्शित करने का प्रयास कर रहा हूं। मैं वाईयूआई डेटाटेबल में सफलतापूर्वक अंतिम नाम, फर्स्टनाम, स्टार्टडेट, कर्मचारीकोड, कर्मचारी स्टेटस दिखाने में सक्षम था। लेकिन मैं आंतरिक वस्तु में मूल्य नहीं दिखा सका। कॉलमसेट में मैंने user.userId को आजमाया और इसे डेटाटेबल में {value} के रूप में प्रदर्शित किया गया है।YUI डेटाटेबल

<script type="text/javascript"> 
YUI().use("jsonp", 'sortable', 'json-parse', 'datatable', "datatable-sort", "io", "node", function(Y) { 
var nestedCols = [ 
    {key : "employeeCode",label : "Employee Code", sortable:true}, 
    {key : "firstName", label : "First Name",sortable: true}, 
    {key : "lastName", label : "Last Name", sortable:true}, 
    {key : "user.userId", label : "Email Id"}, 
    ]; 
Y.io('/Employee/AjaxList', { 
on : { 
success : function(tx, r) { 
var data = Y.JSON.parse(r.responseText); 
var table = new Y.DataTable.Base({ 
     columnset : nestedCols, 
     recordset : data, 
     }).plug(Y.Plugin.DataTableSort); 
     table.render("#empTable"); 
} 
} 
}); 
}); 
</script> 

क्या इस कोड स्निपेट साथ कुछ गड़बड़ है:

[  
{ 
      "lastName": "MyLastName", 
      "firstName": "MyFirstName", 
      "startDate": "11-11-11", 
      "employeeCode": "124", 
      "employeeStatus": "Permanent", 
      "user": { 
       "key": { 
        "name": null, 
        "parent": { 
         "name": null, 
         "parent": null, 
         "id": 855, 
         "namespace": "", 
         "complete": true, 
         "kind": "Employee" 
        }, 
        "id": 856, 
        "namespace": "", 
        "complete": true, 
        "kind": "Users" 
       }, 
       "salt": null, 
       "userId": "[email protected]", 
       "status": true, 
}, 
{ 
... 
} 
] 

यहाँ जावास्क्रिप्ट कोड है? मैं DataTable में user.userId का मान कैसे दिखा सकता हूं?

नोट: JSON जैक्सन का उपयोग कर उत्पन्न होता है और आवेदन GAE/जम्मू में विकसित की है


अद्यतन:

मैं डेटास्रोत @Luke द्वारा सुझाव निम्नलिखित इस्तेमाल किया। इस बार मुझे केवल हेडर के साथ एक खाली डेटाटेबल मिला। कोड स्निपेट यहाँ है।

YUI().use("datasource-get", "datatable-base", "datatable-datasource","datasource-arrayschema", function (Y) { 

var url = "/Employee/AjaxList?"; 
var dataSource, table; 

dataSource = new Y.DataSource.Get({ source: url }); 

dataSource.plug(Y.Plugin.DataSourceArraySchema, { 
     schema: { 
       resultFields: ["firstName", "lastName"] 
       } 
     }); 

var cols = ["firstName", "lastName"]; 

table = new Y.DataTable.Base({ 
       columnset: cols, 
}); 

table.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource }); 

table.render("#empTable"); 

table.datasource.load(); 
}); 

उत्तर

1

साथ Y.DataSource.Get की जगह सक्षम होना चाहिए: http://yuilibrary.com/forum/viewtopic.php?f=92&t=8685

YUI().use("datasource-io", "datasource-jsonschema", "datatable-base", "datatable-datasource", "datatable-scroll", 
      function (Y) { 
    var cols = [  
      { key: "name", label: 'Name' }, 
      { key: "email", label: "Email" }, 
      { key: "user.username", label: 'Username' }, 
      { key: "user.password", label: 'Password' }, 
     ]; 
    car url = "/Employee/AjaxList"; 
    var ds = new Y.DataSource.IO({ 
     source:url 
    }); 
    ds.plug(Y.Plugin.DataSourceJSONSchema, { 
      schema: { 
       resultFields: [ 'name', 'email', 'user.username', 'user.password' ], 
      } 
     }); 
    var dt = new Y.DataTable.Base({ 
     columnset:cols }) 
     .plug(Y.Plugin.DataTableDataSource, {datasource:ds}); 
    dt.render("#dtable"); 
    dt.datasource.load(); 
}); 

आशा इस मदद करता है, जो किसी और DataTable & डेटा स्रोत से जूझ रहा है:

यहाँ कोड है जो मेरे लिए काम किया है।

1

आप डेटा स्रोत-jsonschema उपयोग करने के लिए नेस्टेड मानों को पार्स आउट की आवश्यकता होगी। इस उदाहरण देखें: http://yuilibrary.com/yui/docs/datatable/datatable-dsget.html

आप मैं मंच में मेरी पोस्ट निम्नलिखित YUI मंच से समाधान मिल गया उन चरणों का पालन करने के लिए, Y.DataSource.IO

+0

मैंने डेटास्रोत का उपयोग करने का प्रयास किया, लेकिन अब ऐसा लगता है कि यूयूआई सर्वर को गलत अनुरोध भेज रहा है। यहां फ़ायरबग कंसोल से प्राप्त यूआरएल है: http: // localhost: 8080/exampleApp/कर्मचारी/अजाक्स लिस्टंडिफाइन और कॉलबैक = YUI.Env.DataSource.callbacks.yui_3_4_0_1_1316763699238_127 सही यूआरएल http: // localhost: 8080/exampleApp/कर्मचारी/अजाक्सलिस्ट – libregeek

+0

उपरोक्त टिप्पणी को अनदेखा करें, मैंने इस मुद्दे को '?' जोड़कर हल किया स्रोत यूआरएल के अंत में। लेकिन अभी भी डेटा डेटाटेबल में puplated नहीं है। मैं फ़ायरबग कंसोल में JSON डेटा देख सकता हूं। – libregeek

+0

मैंने डेटासोर्स-एरेसेकेमा का उपयोग कर स्क्रिप्ट के साथ प्रश्न अपडेट किया है। मेरा मानना ​​है कि मुझे जो प्रतिक्रिया मिल रही है वह एक सरणी है और मैं डेटासोर्स-जेन्सॉन्मा के लिए परिणाम लिस्टलोकेटर की पहचान नहीं कर सका – libregeek