#jquery #html #datagrid
#jquery #HTML #datagrid
Вопрос:
У меня есть HTML-файл в моем локальном каталоге C: **, и я хочу предоставить ссылку на моей HTML-странице с именем ** status, которая при нажатии отображает содержимое HTML-файла (имеющего таблицу сетки данных) на HTML-странице.
Может кто-нибудь подсказать мне, как я могу этого добиться?
P.S: Ниже приведен код для HTML-файла, имеющего datagrid, и я хочу отобразить его на простой HTML-странице при нажатии на ссылку с именем Status .
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server status</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="tt" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr>
<th field="name1" width="80">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Australia</td>
</tr>
<tr>
<td>Canada</td>
</tr>
<tr>
<td>USA</td>
</tr>
<tr>
<td>UK</td>
</tr>
</tbody>
</table>
</body>
</html>
Проблемный код
<html>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.click').on("click", function(e){
e.preventDefault(); // cancel the default a tag event.
$.get( "datagrid.html", function( data ) {
$(".result").html( data );
});
});
});
</script>
<body style="background-color:gray;">
<div id="wrapper">
<div id="tabContainer">
<div id="tabs">
<ul>
<li id="tabHeader_1">Status</li>
</ul>
</div>
<div id="tabscontent">
<div class="tabpage" id="tabpage_1">
<marquee behavior="scroll" bgcolor="yellow" loop="-1" width="35%"><i><font color="Red"><strong>One server is down...</strong></font></i></marquee>
<a href="http://localhost:8080/monitor/datagrid.html" class="click"><font color="Black">click me</font></a>
<div class="result"></div>
</body>
</html>
Комментарии:
1. Вы могли бы использовать
get()
метод jQuery — api.jquery.com/jquery.get а затем добавьте этот HTML-код на страницу.2. Я совершенно новичок в концепциях Jquery, можете ли вы привести какой-нибудь пример или пример кода для моего приведенного выше кода?
Ответ №1:
Что-то вроде этого:
HTML:
<a href="#" class="click">click me </a>
<div class="result"></div>
jQuery
<script>
$(document).ready(function() {
$('.click').on("click", function(e){
e.preventDefault(); // cancel the default a tag event.
$.get( "my-file.html", function( data ) {
$(".result").html( data );
});
});
});
</script>
Объяснение :
У нас есть ссылка, к которой привязано событие click, а затем по щелчку мы отправим Ajax-запрос к нашему .html
файлу, а затем добавим data
возвращенное в results
div,
ПРИМЕЧАНИЕ: Чтобы это сработало, вам нужно запустить это через веб-сервер (например, WAMP), а не через file://
протокол.
Комментарии:
1. Я попытался использовать localhost:8080/monitor/datagrid.html в ссылке <a href = » localhost:8080/monitor/datagrid.html «класс»нажмите»>, но у меня это не сработало. Я делаю что-то не так, размещая свой HTML-файл datagrid на сервере приложений apache tomcat?
2. @ScriptLearner Можете ли вы обновить свой пост с помощью последнего кода, который вы используете — спасибо.
3. Я добавил раздел кода, в котором я использую предложенный сценарий в разделе: Проблемный код в моей исходной ветке сообщений
4. Версия jQuery, которую вы используете, была выпущена в 2008 году, возможно, вы захотите попробовать последнюю версию 😉