如何在自定义对话框中编辑数据网格中的选定行？

时间：2022-03-03 09:45:42

It's my code and I have a problem.

这是我的代码,我有一个问题。

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">
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">   

    <script >
        var djConfig = {    	  
            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>

I have a simple DataGrid. But I don't know how edit it in popup dialog box. Please help me. Example of grid in snippet. I don't know how get a data from grid to dialog. And edit it + save.

我有一个简单的DataGrid。但我不知道如何在弹出的对话框中编辑它。请帮我。代码段中的网格示例。我不知道如何从网格到对话获取数据。并编辑它+保存。

1 个解决方案

#1

0  

Read up on editing cells here https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#editing-cells
and here https://dojotoolkit.org/documentation/tutorials/1.10/working_grid/

阅读编辑单元格https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#editing-cells和https://dojotoolkit.org/documentation/tutorials/1.10/working_grid/

#1

0  

Read up on editing cells here https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#editing-cells
and here https://dojotoolkit.org/documentation/tutorials/1.10/working_grid/

阅读编辑单元格https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html#editing-cells和https://dojotoolkit.org/documentation/tutorials/1.10/working_grid/

标签：

相关文章