Question

在对struts2 action-class进行ajax调用后，我有以下json-data：

{"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，看起来，上面的代码不是必需的，但我还不知道如何使用jqgrid，recevie json数据进行ajax调用，并在表格中显示。

我尝试使用jqgrid以网格格式显示仅从动作类返回的jsonData-array。代码如下。

[{"age":1,"name":"A"},{"age":2,"name":"Ab"},{"age":3,"name":"abc"}]

我可以拨打click（），但想致电'jQuery("#list2").jqGrid()。

请你告诉我，我想如何做出改变，所以我可以：

1）发送ajax请求：

url：＆＃39; callAJax.action？start = 1＆amp; t =＆＃39; + Math.random（）+＆＃39; testFlag = 1＆＃39;

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调用行动级网址。

请告诉我，如何实现这一目标。

<%@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({})时，我会看到，消息＆＃39;已加载文件＆＃39;。

当我点击按钮时，我会看到消息＆＃39;内部点击功能＆＃39;。

但是，当我部分或完全添加$("#editgrid")..jqGrid({})块时，我只会看到已加载的文档＆＃39;，但是点击按钮，消息＆＃39;内部点击功能＆＃39;没有出现。

如果您想了解更多信息，请告诉我。一如既往，谢谢!!

尝试进行ajax调用，使用jqgrid显示Json数据

0 个答案: