2016-05-14 6 views
0

これは私のコードなので問題があります。カスタムダイアログからDataGridで選択した行をどのように編集できますか?

require([ 
 
"dijit/layout/BorderContainer", 
 
"dijit/layout/ContentPane", 
 
"dojo/data/ItemFileWriteStore", 
 
"dojox/grid/DataGrid" 
 
], function(BorderContainer, ContentPane, ItemFileWriteStore, DataGrid) { 
 

 

 
    var data_list = [{ 
 
    id: '01', 
 
    Name: 'Niko', 
 
    Phone: '010101', 
 
    Birthday: '01.01.91' 
 
    }, { 
 
    id: '02', 
 
    Name: 'Sasha', 
 
    Phone: '020202', 
 
    Birthday: '01.01.92' 
 
    }, { 
 
    id: '03', 
 
    Name: 'Pavel', 
 
    Phone: '030303', 
 
    Birthday: '01.01.93' 
 
    }, { 
 
    id: '04', 
 
    Name: 'Alex', 
 
    Phone: '040404', 
 
    Birthday: '01.01.94' 
 
    }]; 
 

 
    var store = new ItemFileWriteStore({ 
 
    data: { 
 
     idetifier: 'id', 
 
     items: data_list 
 
    } 
 
    }); 
 

 
    var layout = [{ 
 
    name: 'Name', 
 
    field: 'Name', 
 
    'width': '90%' 
 
    }]; 
 

 
    var grid = new DataGrid({ 
 
    id: 'grid', 
 
    store: store, 
 
    structure: layout, 
 
    onClick: function(item) { 
 
     var itemData = this.getItem(item.rowIndex); 
 
     dojo.byId("itemInfo").innerHTML = "<table><tr><td>Name:</td><td>" + itemData.Name + "</td></tr><tr><td>Phone:</td><td>" + itemData.Phone + "</td></tr><tr><td>Birthday:</td><td>" + itemData.Birthday + "</td></tr></table>"; 
 
    } 
 
    }, dojo.byId("myDataGrid")); 
 

 
    grid.startup(); 
 

 
});
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#DashboardContainer { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#Content, #Info, #itemInfo { 
 
    height: 100%; 
 
    width: 50%; 
 
}
<!DOCTYPE html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    
 
    <script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script> 
 
    
 
    
 
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css"> 
 
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css"> 
 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css"> 
 
\t <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css"> 
 

 
    <script > 
 
     var djConfig = {  \t 
 
      parseOnLoad: true 
 
     } 
 
    </script>  
 
     
 
    </head> 
 

 

 
<body class="claro" style="font-family: Verdana; font-size: 11px;"> 
 
    <div dojoType="dijit.layout.BorderContainer" id="DashboardContainer" design="headline" splitters="false"> 
 
    
 
    <div dojoType="dijit.layout.ContentPane" id="Content" region="center"> 
 
     <div dojoType="dojox.grid.DataGrid" id="myDataGrid"></div> 
 
    </div> 
 

 
    <div dojoType="dijit.layout.ContentPane" id="Info" region="right"> 
 
     <div id="itemInfo"> 
 
     <p>Hello</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

私は、単純なデータグリッドを持っています。しかし、私はポップアップダイアログボックスでどのように編集するのか分かりません。私を助けてください。スニペット内のグリッドの例 グリッドからダイアログへのデータの取得方法がわかりません。それを編集+保存します。

+0

。 –

+0

コメントの代わりに質問にこのデータグリッドの例を追加する必要があります –

+0

お願いします! –

答えて

関連する問題