Пытаясь сделать AJAX-вызов, отобразите данные JSON с помощью jqgrid.
У меня есть следующие json-данные после ajax-вызова к struts2 action-class:
{"jsonData":[{"age":1,"name":"Aifa"},{"age":2,"name":"Afraa"},{"age":27,"name":"Zafar"}],"searchId":0,"searchName":""}
function setAjaxOutput() {
if(httpObject.readyState == 4) {
document.getElementById('intValueDiv').innerHTML = httpObject.responseText;
var jsonString = httpObject.responseText;
alert(jsonString);
var jsonString2 = JSON.parse(jsonString);
alert(jsonString2.jsonData[2].name);
}
}
Данные JSON будут в httpObject.responseText.
Теперь, используя jqgrid, похоже, что приведенный выше код не требуется, но я пока не могу понять, как выполнить вызов ajax с использованием jqgrid, получить данные json и отобразить в таблице.
Я пытаюсь отобразить, только jsonData-массив, возвращенный из action-class, в grid-формате, используя jqgrid. Код ниже.
[{"age":1,"name":"A"},{"age":2,"name":"Ab"},{"age":3,"name":"abc"}]
Я могу позвонить click(), но хотел бы позвонить, 'jQuery("#list2").jqGrid(),
Не могли бы вы сообщить мне, как я могу внести изменения, чтобы я мог:
1) отправить запрос ajax с:
url: 'callAJax.action? start = 1 & t =' + Math.random () + 'testFlag = 1'
Should single quotes be replaced with double quotes? Please let me know.
Кроме того, как я могу найти, divId1 или divId2, щелкают ниже.
var $target = $(event.target);
if( $target.is("div") ) { // div is tag, how to check for id.
testFlag=1/2;
}
2) И, когда данные json отображаются в сетке, я хотел бы добавить кнопку для каждой строки, которую я бы хотел щелкнуть, чтобы прочитать данные строки и выполнить Ajax-вызов для URL-адреса класса действия.
Пожалуйста, дайте мне знать, как этого можно достичь.
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX JSP PAGE</title>
<link rel="stylesheet" href="styles/jqx.base.css"
type="text/css" />
<link rel="stylesheet" href="styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxbuttons.js"></script>
<script type="text/javascript" src="jqxscrollbar.js"></script>
<script type="text/javascript" src="jqxmenu.js"></script>
<script type="text/javascript" src="jqxgrid.js"></script>
<script type="text/javascript" src="jqxdata.js"></script>
<script type="text/javascript">
var start = 0;
var idAndName = "";
var rowId = 0;
var searchId = 0;
var searchName = "";
$(document)
.ready(function () {
alert("document loaded.");
$("#editgrid")
.jqGrid({
url: 'callAJax.action?t=1',
datatype: "json",
myType: 'GET',
colNames: ['name', 'age'],
colModel: [
{
name: 'name',
index: 'name',
width: 80,
editable: true,
editoptions: {
size: 10
}
},
{
name: 'age',
index: 'age',
width: 90,
editable: true,
editoptions: {
size: 25
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pagered',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
caption: "Editing Example",
editurl: "index.jsp"
});
$("#bedata")
.click(function (event) {
alert("Inside click function.");
jQuery("#editgrid")
.jqGrid('getGridParam', 'selrow');
});
});
</script>
</head>
<body>
<center>
<h1>
Use Ajax in Struts2
</h1>
<br/>
<br/>
<table id="editgrid"></table>
<div id="pagered"></div>
<input type="button" id="bedata" value="Edit Selected" />
</center>
<br/>
</body>
</html>
Что происходит, когда я бегу?
Ответ:
Когда я удаляю $("#editgrid")..jqGrid({}) полностью, я вижу, сообщение "документ загружен".
Когда я нажимаю кнопку, я вижу сообщение "Функция внутреннего щелчка".
Но когда я добавляю частично или полностью, $("#editgrid")..jqGrid({}) Блок, я вижу только "документ загружен", но при нажатии кнопки сообщение "Функция внутреннего щелчка" не появляется.
Пожалуйста, дайте мне знать, если вы хотите получить больше информации. Как всегда, спасибо!