如何在单击 Ajax 可排序表的行时打开信息窗口
How to open Info Window when clicking a row of an Ajax sortable table
我在这里问过类似但不相同的东西(并且已经回答了)。现在我有一些后续问题,我认为最好重新问(我已经阅读了规则,我希望我不会违反任何规则。但是,如果我这样做,请提醒我)。
我正在从MySQL表中加载几个城市的ID,名称和位置,然后将其填充到HTML表中。还有一个谷歌地图,上面有指向这些城市的标记。
我希望当用户单击 HTML 行之一(tr 标记)时,在城市标记上弹出一个信息窗口。我正在使用PHP,Javascript和XML,没有任何jQuery。我已经做到了这一点。
现在我正在尝试使 HTML 表可排序。因此,当用户单击 th 时,数据将根据单击的 th 进行排序(但是对于此示例,它只能按 ID 排序)。
问题是在至少排序一次后,单击tr时信息窗口将不再弹出。
我的网页:
<?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();
?>
我的谷歌地图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);
}
我的排序.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 的点击事件显然消失了。排序后如何再次重新分配?
- 存储标记的 ID。
- 封装负责将标记绑定到行的 JS。
- 在
DownloadUrl
回调和GetData
函数中调用封装的 JS。
商店标识
使 arrMarker 成为对象: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();
}
更新获取数据
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);
}
相关文章:
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- 谷歌地图点击潜水触发信息窗口
- 将FlowPlayer嵌入谷歌地图信息窗口
- 当我浏览回页面时,谷歌地图信息窗口不会弹出
- 谷歌地图信息窗口Z索引
- 如何隐藏标记簇内标记的信息窗口
- 谷歌地图信息窗口为每个标记显示相同的内容
- 更改内容信息窗口映射v3
- Cartodb信息窗口未在地图上显示变量
- 为位于路线上的谷歌地图标记(起点和终点)设置一个信息窗口
- 信息窗口谷歌地图点击事件给出错误
- Javascript谷歌地图每个信息窗口
- 更新打开的谷歌地图信息窗口
- 如何在显示多个标记时单击另一个标记时关闭信息窗口
- 禁用角度地图中标记和信息窗口的ng点击
- 在谷歌地图的信息窗口内点击按钮
- 谷歌地图API-信息窗口显示谷歌位置API信息
- 谷歌地图API-获取信息窗口打开时,点击一个圆圈
- Google 地图信息窗口仅显示首次点击时的信息
- 如何在谷歌地图中设置多个信息窗口,但使用这种特定的JavaScript方法