dhtmlxgrid：如何保存在電網

這裏的數據是從dhtmlxgrid樣本文件代碼摘錄：dhtmlxgrid：如何保存在電網

<p> You are allowed to clear data and structure of grid and then load new data from XML file.</p> 

    <a href="#" onclick="savegrid();">Save Grid</a> 
    <div id="gridbox" style="width:600px; height:270px; background-color:white;"></div> 
    <a href='#alfa' onClick="ser()">Reload grid with another structure</a> 
<br> 
<script> 
    mygrid = new dhtmlXGridObject('gridbox'); 
    mygrid.setImagePath("../../codebase/imgs/"); 
    mygrid.loadXML("../common/grid500.xml"); 


    function ser(){ 
     mygrid.clearAll(true); 
     mygrid.loadXML("../common/gridH3.xml"); 
    } 

    function savegrid(){ 
     // want to save the grid here 
    } 
</script>

如果我在網格中編輯數據。我希望能夠將其保存到文件中。我怎麼做？這不是自動完成的。

來源

2011-11-16 user823527

可以獲取csv或dhtmlxgrid當前數據的XML，並具有將更新保存到數據庫或xml文件的腳本。將csv加載到網格中的dhtmlxgrid方法是.loadCSVString()。加載xml文件的方法是.loadXML()。用當前網格內容創建csv字符串的方法是.serializeToCSV()。用當前網格內容創建xml的方法是.serialize()。

以下是網格的示例使用。要在網格中顯示和編輯的數據存儲在XML文件中。在網格中進行的更新/編輯也必須存儲在該XML文件中。由於我的XML文件的定義與dhdmlxgrid使用的XML不同，因此我從XML中將數據提取爲csv字符串，將該字符串裝入網格，然後將更新提取爲csv字符串以保存回XML。這樣做的代碼比在兩種xml格式之間切換更簡單。

HTML

一個格被定義爲網格元件。保存和取消按鈕也被定義。

<div id="links_grid" style="width: 100%; height: 189px; margin-bottom: 4px; border: 1px solid silver;"> 
</div> 
<button onclick="save_node_xml(\''+card_id+'\')">Save</button>&nbsp; 
<button onclick="cancel_node_grid(\''+card_id+'\')">Cancel</button>

網格初始化

在這種javascxript網格對象被創建並填充有數據。

 // Retrieve grid data from XML as CSV data (dhtmlx has other ways to link to data sources) 

     grid_csv = $.ajax({ 
      url: "get_node_urls.php", 
      type: "POST", 
      data: { nodeid: card_id }, 
      cache: false, 
      async: false, 
      success: function (response) { 
       if (response != '') 
       { 
        /* alert(response); */ 
       } 
      } 
     }).responseText; 

     // Create grid and load data 

     card_links_grid = new dhtmlXGridObject('links_grid'); 
     card_links_grid.setImagePath("dhtmlxGrid_dnld/codebase/imgs/"); 
     card_links_grid.setHeader("ID,Title,URL"); 
     card_links_grid.setInitWidths("50,120,190"); 
     card_links_grid.setColAlign("right,left,left"); 
     card_links_grid.setColTypes("ed,ed,ed"); 
     card_links_grid.setColSorting("str,str,str"); 
     card_links_grid.enableDragAndDrop(true); 
     card_links_grid.init(); 
     card_links_grid.setColumnHidden(0,true); 
     card_links_grid.setSkin("dhx_skyblue"); 
     card_links_grid.bF(false); 
     card_links_grid.loadCSVString(grid_csv); // Load csv generated from XML data 
     // Fix formatting, apply here styles to override what is hardcoded in the grid code 
     $('table.hdr td',$('#links_grid')).css('padding','0'); 
     $('table.hdr td',$('#links_grid')).css('height','16'); 
     $('table.hdr td div.hdrcell',$('#links_grid')).css('margin','0'); 
     $('table.hdr td div.hdrcell',$('#links_grid')).css('height','16');

保存數據

在這個腳本網格內容進行檢索並保存到XML。

// Get grid data as CSV 
    grid_csv = card_links_grid.serializeToCSV(); 

    // Make array from CSV 
    var links_array = CSVToArray(grid_csv); // special function to make array from csv 

    // Send data to XML 
    for (var i=0; i<links_array.length; i++) { 
     var link = links_array[i]; 
     var link_ix = link[0]; 
     var link_id = link[1]; 
     var link_title = link[2]; 
     var link_url = link[3]; 

     // Add updated links to XML 
     $.ajax({ 
      url: "add_url.php", 
      type: "POST", 
      data: { nodeid: card_id, linkid: link_id, linktitle: link_title, linkurl: link_url }, 
      cache: false, 
      async: false, 
      success: function (response) { 
       if (response != '') 
       { 
        // alert(response);    
       } 
      } 
     }); 
    }

來源

2011-11-25 01:37:45 user823527

dhtmlxgrid：如何保存在電網

回答

相關問題