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

可以获取dhtmlxgrid当前数据的csv或XML，并具有将更新保存到数据库或xml文件的脚本。将csv加载到网格中的dhtmlxgrid方法是.loadCSVString()。加载xml文件的方法是.loadXML()。使用当前网格内容创建csv字符串的方法是.serializeToCSV()。使用当前网格内容创建xml的方法是.serialize()。

以下是网格的示例用法。要在网格中显示和编辑的数据存储在XML文件中。网格中的更新/编辑也必须存储在该XML文件中。由于我的XML文件具有与dhdmlxgrid使用的XML不同的定义，因此我将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);             
               }
            }
        }); 
    }

dhtmlxgrid：如何在该网格中保存数据

1 个答案: