2008-12-17 145 views
1

我正在使用jqGrid,其中我從這裏下載了http://www.trirand.com/blog。我一個接一個地跟着教程來測試網格。現在我做的改變是網格獲取數據的頁面在asp.net而不是php。無法在jqGrid中加載XML數據

的問題是,在網格加載細並且存在與我生成的XML數據,但由於某種原因未啓用裝載在網格本身(即IM留下了一個空的網格的響應。

的代碼我用是

<link rel="stylesheet" type="text/css" media="screen" href="js/themes/basic/grid.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/jqModal.css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.js" type="text/javascript"></script> 
<script src="js/js/jqModal.js" type="text/javascript"></script> 
<script src="js/js/jqDnR.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({ 
    url:'nrGetjqgridXML.aspx', 
    datatype: "xml",  
    colNames:['Dummy ID','Dummy String','Dummy Int','Dummy Char','Dummy Bool','Dummy Date','Dummy Float'],colModel :[{name:'dummyID', index:'dummyID' , width:100, sortable:true},{name:'dummyString', index:'dummyString' , width:100, sortable:true},{name:'dummyInt', index:'dummyInt' , width:100, sortable:true},{name:'dummyChar', index:'dummyChar' , width:100, sortable:true},{name:'dummyBool', index:'dummyBool' , width:100, sortable:true},{name:'dummyDate', index:'dummyDate' , width:100, sortable:true},{name:'dummyFloat', index:'dummyFloat' , width:100, sortable:true}],      
    rowNum: 10, 
    rowList:[10,20,30], 
    imgpath: 'js/themes/basic/images', 
    pager: jQuery('#pager'), 
    sortname: 'dummyid', 
    viewrecords: true, 
    sortorder: "desc",  
    caption: 'Test Grid' 
    }).navGrid('#pager', {edit:false , add:false, del:false}); 
}); 
</script> 

,這是nrGetjqgridXML的響應:

<xml version='1.0' encoding = 'utf-8'?> 
<rows> 
    <page>1</page> 
    <total>2</total> 
    <records>15</records > 
    <row id = '15'> 
     <cell>15</cell> 
     <cell><![CDATA[Test15]]></cell> 
     <cell>15</cell> 
     <cell><![CDATA[o]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>15/03/2005 00:00:00</cell> 
     <cell>15.15</cell> 
    </row> 
    <row id = '14'> 
     <cell>14</cell> 
     <cell><![CDATA[Test14]]></cell> 
     <cell>14</cell> 
     <cell><![CDATA[n]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>14/02/2004 00:00:00</cell> 
     <cell>14.14</cell> 
    </row><row id = '13'> 
     <cell>13</cell> 
     <cell><![CDATA[Test13]]></cell> 
     <cell>13</cell> 
     <cell><![CDATA[m]]></cell> 
     <cell><![CDATA[True]]></cell> 
     <cell>13/01/2003 00:00:00</cell> 
     <cell>13.13</cell> 
    </row> 
    <row id = '12'> 
     <cell>12</cell> 
     <cell><![CDATA[Test12]]></cell> 
     <cell>12</cell> 
     <cell><![CDATA[l]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>12/12/2002 00:00:00</cell> 
     <cell>12.12</cell> 
    </row><row id = '11'> 
     <cell>11</cell> 
     <cell><![CDATA[Test11]]></cell> 
     <cell>11</cell> 
     <cell><![CDATA[k]]></cell> 
     <cell><![CDATA[True]]></cell> 
     <cell>11/11/2001 00:00:00</cell> 
     <cell>11.11</cell> 
    </row> 
    <row id = '10'> 
     <cell>10</cell> 
     <cell><![CDATA[Test10]]></cell> 
     <cell>10</cell> 
     <cell><![CDATA[j]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>10/10/2000 00:00:00</cell> 
     <cell>10.1</cell>   
    </row> 
    <row id = '9'> 
     <cell>9</cell> 
     <cell><![CDATA[Test9]]></cell> 
     <cell>9</cell> 
     <cell><![CDATA[i]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>09/09/1999 00:00:00</cell> 
     <cell>9.9</cell> 
    </row> 
    <row id = '8'> 
     <cell>8</cell> 
     <cell><![CDATA[Test8]]></cell> 
     <cell>8</cell> 
     <cell><![CDATA[h]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>08/08/1998 00:00:00</cell> 
     <cell>8.8</cell> 
    </row> 
    <row id = '7'> 
     <cell>7</cell> 
     <cell><![CDATA[Test7]]></cell> 
     <cell>7</cell> 
     <cell><![CDATA[g]]></cell> 
     <cell><![CDATA[True]]></cell> 
     <cell>07/07/1997 00:00:00</cell> 
     <cell>7.7</cell> 
    </row> 
    <row id = '6'> 
     <cell>6</cell> 
     <cell><![CDATA[Test6]]></cell> 
     <cell>6</cell> 
     <cell><![CDATA[f]]></cell> 
     <cell><![CDATA[True]]></cell> 
     <cell>06/06/1996 00:00:00</cell> 
     <cell>6.6</cell> 
    </row> 
    <row id = '5'> 
     <cell>5</cell> 
     <cell><![CDATA[Test5]]></cell> 
     <cell>5</cell> 
     <cell><![CDATA[e]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>05/05/1995 00:00:00</cell> 
     <cell>5.5</cell> 
    </row> 
    <row id = '4'> 
     <cell>4</cell> 
     <cell><![CDATA[Test4]]></cell> 
     <cell>4</cell> 
     <cell><![CDATA[d]]></cell> 
     <cell><![CDATA[True]]></cell> 
     <cell>04/04/1994 00:00:00</cell> 
     <cell>4.4</cell> 
    </row> 
    <row id = '3'> 
     <cell>3</cell> 
     <cell><![CDATA[Test3]]></cell> 
     <cell>3</cell> 
     <cell><![CDATA[c]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>03/03/1993 00:00:00</cell> 
     <cell>3.3</cell> 
    </row> 
    <row id = '2'> 
     <cell>2</cell> 
     <cell><![CDATA[Test2]]></cell> 
     <cell>2</cell> 
     <cell><![CDATA[b]]></cell> 
     <cell><![CDATA[False]]></cell> 
     <cell>02/02/1992 00:00:00</cell> 
     <cell>2.2</cell> 
    </row> 
    <row id = '1'> 
     <cell>1</cell> 
     <cell><![CDATA[Test1]]></cell> 
     <cell>1</cell> 
     <cell><![CDATA[a]]></cell> 
     <cell><![CDATA[True]]></cell> 
     <cell>01/01/1991 00:00:00</cell> 
     <cell>1.1</cell> 
    </row> 
</rows> 

這是網格如何顯示出來: alt text http://img132.imageshack.us/img132/6671/testgridol7.jpg

回答

1

你有沒有補充說:

<script src="grid/js/jqDnR.js" type="text/javascript"> 
</script> 

此外,您的XML缺少收盤

</rows> 

標籤。試試看!

+0

感謝輸入,但標籤didnt顯示,因爲我忘記要突出它的代碼。至於包含jqDnR.js的腳本。 奇怪的是,網格顯示,但沒有數據(標題除外) – Drahcir 2008-12-18 12:20:21

0

我試過了你的代碼。它的工作原理,我已經找到了唯一的問題是,你的XML有一個錯誤:

第一行必須是

<?xml version='1.0' encoding = 'utf-8'?> 

,而不是

<xml version='1.0' encoding = 'utf-8'?> 
+0

試過但無濟於事 – Drahcir 2009-02-12 21:54:17

0

我在的Java/Struts的同樣的錯誤我解決這個問題,設置XML流,但

public class AtualizarListaAction extends Action { 

    @Override 
    public ActionForward execute(ActionMapping mapping, ActionForm form, 
     HttpServletRequest request, HttpServletResponse response) 
     throws Exception { 

     //use this 
     response.setContentType("text/xml;charset=utf-8"); 

     response.getWriter().println(" <rows>"); 
     response.getWriter().println(" <row id='1' >");    
     response.getWriter().println(" <cell>1</cell>");  
     ... 
0

您已經添加?

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
0

添加

response.setContentType("text/xml;charset=utf-8");

它在servlet響應之後更新電網解決IE問題

謝謝

+0

我使用Mvc框架,我添加了Response.ContentType =「text/xml; charset = utf -8「,它的工作! – 2010-07-14 14:44:33

0

我也陷入了同樣的問題。最終通過反覆試驗,我通過添加:

mtype: 'GET' 

作爲電網選項。即,從你的榜樣,

jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({ 
     url:'nrGetjqgridXML.aspx', 
     datatype: "xml", 
     mtype: 'GET', 
     ... 
+0

@rusinak:你如何爲XML分配xpath? – abi1964 2011-06-17 07:38:07

1

您需要使用XML閱讀器吧:

function fillGridOnEvent() { 
      $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>"); 
      jQuery("#list").jqGrid({ 
       url: "<URL from where u r getting xml>", 
       datatype: "xml",`enter code here` 
       height: 250, 
       colNames: ['ID', 'Name', 'Sales Rep', 'Market', 'Station', 'Advister', 'Agency'], 


       colModel: [{ name: 'id', xmlmap: 'id', width: 75 }, 
           { name: 'product_name', xmlmap: 'product_name', width: 190 }, 
           { name: 'salesrep_name', xmlmap: 'salesrep_name', width: 100 }, 
           { name: 'account', xmlmap: 'account', width: 180, align: "right" }, 
           { name: 'station', xmlmap: 'station', width: 180, align: "right" }, 
           { name: 'advertiser_name', xmlmap: 'advertiser_name', width: 180 }, 
           { name: 'agency_name', xmlmap: 'agency_name', width: 150, sortable: false}], 
       xmlReader: { 
        root: "orders", 
        row: "order", 
        page: "orders>page", 
        total: "orders>total", 
        records: "orders>records", 
        repeatitems: false 
       }, 
       multiselect: false, 
       paging: true, 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       pager: $("#page"), 
       loadonce: true, 
       caption: "Student Details" 
      }).navGrid('#page', { edit: false, add: false, del: false }); 

      jQuery().ready(function() { 
       //fillGrid(); 
      }); 
     }