dhtmlxgrid: как данные сохраняются в этой сетке

Question

Вот фрагмент кода из файла примера 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>

Если я редактирую данные в сетке. Я хотел бы иметь возможность сохранить его в файл. Как я могу это сделать? Это не делается автоматически.

Answer 1

Можно получить csv или XML текущих данных dhtmlxgrid и иметь сценарии для сохранения обновлений в базе данных или в файле xml. Метод dhtmlxgrid для загрузки CSV в сетку: .loadCSVString(). Способ загрузки XML-файла: .loadXML(). Метод для создания строки CSV с текущим содержимым сетки: .serializeToCSV(). Метод создания xml с текущим содержимым сетки: .serialize().

Вот пример использования сетки. Данные, которые будут отображаться и редактироваться в сетке, хранятся в файле XML. Обновления / изменения, сделанные в сетке, также должны храниться в этом файле XML. Поскольку мой XML-файл имеет определение, отличное от XML, которое использует dhdmlxgrid, я извлекаю данные из XML в виде строки CSV, загружаю строку в сетку, а затем извлекаю обновления в виде строки CSV для сохранения обратно в XML. Код для этого проще, чем переключаться между двумя форматами XML.

HTML

Один div определен как элемент сетки. Кнопки Сохранить и Отмена также определены.

<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);             
               }
            }
        }); 
    }