Dojo 中的 DataGrid，带有来自 servlet 的 json 数据

Posted 2023-02-22

【中文标题】Dojo 中的 DataGrid，带有来自 servlet 的 json 数据

【英文标题】：DataGrid in Dojo , with json data from a servlet

【发布时间】：2011-01-26 06:40:49

【问题描述】：

我是第一次使用 JSON... 并想用我的 JSON 数据填充我的数据网格， 这是我的 JSON 数据：

  "head": 
    "vars": [ "s" , "fname" , "lname" ]
   ,
  "results": 
    "bindings": [
      
        "s":  "type": "uri" , "value": "http://tn.gov.in/Person/41"  ,
        "fname":  "type": "literal" , "value": "  ,
        "lname":  "type": "literal" ,n" 
       ,
      
        "s":  "type": "uri" , "value": "http://tn.gov.in/Person/37"  ,
        "fname":  "type": "literal" , "value": "sh"  ,
        "lname":  "type": "literal" , "value": "Vvan" 
       ,
      
        "s":  "type": "uri" , "value": "http://tn.gov.in/Person/39"  ,
        "fname":  "type": "literal" , "value": "Vavan "  ,
        "lname":  "type": "literal" , "value": "Sran" 
      
    ]
  

我想在数据网格中显示fname和lname应该怎么做呢？ 任何人都可以提供适用于上述 JSON 的示例代码吗？我尝试了很多例子，我得到一个空白网格

【参考方案1】：

加载调用出错，这是一个异步调用，然后当您尝试构建网格时，您没有数据并且无法根据需要构建存储。您可以在加载函数中包含所有内容，如下所示：

var items,store;
    var ss = dojo.xhrGet(
        url: "http://localhost:8477/E-Governance/listPerson", 
        handleAs: "json", 
        preventCache: true,
        load: function(data)
            items = dojo.map(data.results.bindings, function(binding) 
                return 
                    fname : binding.fname.value, 
                    lname : binding.lname.value
                ;                    
            );
            store =  new dojo.data.ItemFileReadStore(           
                data : 
                    items : items
                
            );             
            console.log(items[0].fname+' '+items[0].lname);  
            _createGrid(sore);

        
    );

    console.log('3-4');

【参考方案2】：

这里的关键是你需要先转换你的数据，然后才能在dojo网格中使用它。

可以在here 找到现场演示。

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");

dojo.addOnLoad(function() 
    var data =  "head":  "vars": [ "s" , "fname" , "lname" ]  , "results":  "bindings": [  "s":  "type": "uri" , "value": "http://tn.gov.in/Person/41"  , "fname":  "type": "literal" , "value": "Gayathri"  , "lname":  "type": "literal" , "value": "Vasudevan"   ,  "s":  "type": "uri" , "value": "http://tn.gov.in/Person/37"  , "fname":  "type": "literal" , "value": "Magesh"  , "lname":  "type": "literal" , "value": "Vasudevan"   ,  "s":  "type": "uri" , "value": "http://tn.gov.in/Person/39"  , "fname":  "type": "literal" , "value": "Vasudevan "  , "lname":  "type": "literal" , "value": "Srinivasan"   ]  ;

    var items = dojo.map(data.results.bindings, function(binding) 
        return fname : binding.fname.value, lname : binding.lname.value;
    );

    var store =  new dojo.data.ItemFileReadStore(
        data : 
          items : items
        
    );

    _createGrid(store);

    function _createGrid(store) 
        var layout = _getGridLayout(),
            node = dojo.create("div", , dojo.byId("grid"), "only");
        var grid = new dojox.grid.DataGrid(
            store : store,
            structure : layout,
            rowsPerPage: 10
        , node);
        grid.update();
        grid.startup();
        return grid;
   

   function _getGridLayout() 
      return [[
           field : "fname", name : "First Name", width : "50%",
           field : "lname", name : "Last Name", width : "50%" 
      ]];
   
);