单击Ajax可排序表的行时如何打开“信息窗口”

Question

我在这里问过类似但不相同的问题 （并且已经回答了）。 现在，我有一些后续问题，我认为最好再问一遍（我已经阅读了规则，希望我不要破坏任何规则。但是，请允许我提醒我）。

我正在从MySQL表中加载多个城市的ID，名称和位置，然后将其填充到HTML表中。 还有一个带有指向这些城市的标记的Google地图。

我希望当用户单击HTML行（tr标记）之一时在城市标记上弹出一个信息窗口。 我正在使用没有任何jQuery的PHP，Javascript和XML。 我已经做到了这一点。

现在，我正在尝试使HTML表可排序。 因此，当用户单击th时，数据将根据被单击的th进行排序（但是，对于此示例，只能按ID进行排序）。

问题是，至少对它排序一次之后，单击tr时，信息窗口将不再弹出。

我的HTML：

<?php
   $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
   $arrCities = mysql_query ($query);
?>

<div id="gmap" style="width: 550px; height: 450px"></div>

<table id="tblData">
   <tr>
       <th>/* when the th clicked it'll call js function */
             <a href="javascript:GetData('sort.php?by=id&val=<? echo $val; ?>', 'tblData');">ID</a>
       </th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

我的PHP，用于创建XML以填充标记（my-xml-generator.php）：

<?php
    $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
    $arrCities = mysql_query ($query);

    $dom = new DOMDocument('1.0', 'utf-8');
    $node = $dom->createElement ('markers');
    $parNode = $dom->appendChild ($node);

    header('Content-type: text/xml');

    while ($row = mysql_fetch_assoc($arrCities))
    {
            $node = $dom->createElement ('marker');
            $newNode = $parNode->appendChild ($node);
            $newNode->setAttribute ('id', $row['id']);
            $newNode->setAttribute ('name', $row['name']);
            $newNode->setAttribute ('lat', $row['lat']);
            $newNode->setAttribute ('lng', $row['lng']);
    }

    echo $dom->saveXML();
?>

我的Google Maps Javascript：

    var gmap = new google.maps.Map (mapDiv, options);

    var arrMarkers = []; 
    var infoWindow = new google.maps.InfoWindow;

    // add markers to the map
    DownloadUrl ("my-xml-generator.php", function(data)
    {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName ("marker");

        for (var i = 0; i < markers.length; i++)
        {
            var id = markers[i].getAttribute("id");

            var lat = parseFloat (markers[i].getAttribute("lat"));
            var lng = parseFloat (markers[i].getAttribute("lng"));
            var pos = new google.maps.LatLng (lat, lng);


            var markerOptions =
            {
                position    : pos,
                map         : gmap,
                draggable   : false
            };

            // add the marker
            var marker = new google.maps.Marker (markerOptions);
            arrMarkers.push(marker);

            // assign onclick event for each tr
            // this is the part that I have to somehow re-run after the sorting is done
            var tr = document.getElementById(id);
            google.maps.event.addDomListener (tr, "click",
                (function(i) {
                    var row = i;
                    return function() {
                        RowClick (row);
                    }
                })(i)
            );


            // add info window
            var html = '<div>' + id + '</div>';

            BindInfoWindow (marker, gmap, infoWindow, html);
        }
    });


    function BindInfoWindow (marker, map, infoWindow, html)
    {
        google.maps.event.addListener (marker, "click", function()
        {
            infoWindow.setContent (html);
            infoWindow.open (map, marker);
        });
    }


    function RowClick (i)
    {
        google.maps.event.trigger (arrMarkers[i], "click");
    }


    function DownloadUrl (url, callback)
    {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function()
        {
            if (xhr.readyState == 4)
            {
                xhr.onreadystatechange = DoNothing;
                callback(xhr, xhr.status);
            }
        };

        xhr.open ('GET', url, true);
        xhr.send (null);
    }

    function DoNothing() {}

我的GetData（）函数（简单和常用）：

function GetData (dataSource, divID)
{
    var xhr = new XMLHttpRequest();

    xhr.open ("GET", dataSource);

    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === 4)
        {               
                var targetDiv = document.getElementById (divID);
                targetDiv.innerHTML = xhr.responseText;
        }
    }

    xhr.send (null);
}

我的sort.php（我的排序方式是再次运行查询以检索所需的排序结果并将tr行输出到表的innerHTML中）：

<?php
   $by = $_GET['by'];
   $val = $_GET['val'];

   $query = "SELECT id, name, lat, lng FROM city ORDER BY $by $val";
   $arrCities = mysql_query ($query);

   // set the new order value
   $val == 'ASC' ? 'DESC' : 'ASC';
?>

   <tr>
       <th>
             <a href="javascript:GetData('sort.php?by=id&val=<? echo $val; ?>', 'tblData');">ID</a>
       </th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

单击tr后，将正确弹出该tr中包含的城市的信息窗口。 而且排序也可以

但是，将其排序一次之后，tr的单击事件显然消失了。 排序后如何重新分配？

Answer 1

1. 存储标记的ID。
2. 封装负责将标记绑定到行的JS。
3. 在DownloadUrl回调和GetData函数中调用封装的JS。

店铺编号

将arrMarkers设为对象： var arrMarkers = {};

封装绑定

function BindMarkerRows() {

    for(var id in arrMarkers) {
        var tr = document.getElementById(id);

        google.maps.event.addDomListener (tr, "click",
            (function(marker) {
                return function() {
                    google.maps.event.trigger (marker, "click");
                }
            })(arrMarkers[id])
        );
    }
}

更新下载地址

DownloadUrl ("my-xml-generator.php", function(data) {

    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName ("marker");

    for (var i = 0; i < markers.length; i++) {

        var id = markers[i].getAttribute("id");

        var lat = parseFloat (markers[i].getAttribute("lat"));
        var lng = parseFloat (markers[i].getAttribute("lng"));
        var pos = new google.maps.LatLng (lat, lng);


        var markerOptions =
        {
            position    : pos,
            map         : gmap,
            draggable   : false
        };

        // add the marker
        var marker = new google.maps.Marker (markerOptions);
        arrMarkers[id] = marker; //Here we access the object as an associative array
    }

    BindMarkerRows();
}

更新GetData

function GetData (dataSource, divID)
{
    var xhr = new XMLHttpRequest();

    xhr.open ("GET", dataSource);

    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === 4)
        {
            var status = xhr.status;

            if ((status >= 200 && status < 300) || status === 304)
            {
                var targetDiv = document.getElementById (divID);
                targetDiv.innerHTML = xhr.responseText;
                BindMarkerRows();
            }
        }
    }

    xhr.send (null);
}