我正在使用jqGrid,我从这里下载了http://www.trirand.com/blog。我一个字一个地跟着教程来测试网格。现在我做的改变是网格获取数据的页面是在asp.net而不是php。
问题是网格加载很好并且我生成的xml数据有响应但是由于某种原因没有加载到网格本身(即我留下了一个空白网格。
我使用的代码是
<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
答案 0 :(得分:1)
你添加了:
<script src="grid/js/jqDnR.js" type="text/javascript">
</script>
此外,您的XML缺少结束
</rows>
标签。试试吧!
答案 1 :(得分:1)
您需要使用XML Reader:
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();
});
}
答案 2 :(得分:0)
我已经尝试过您的代码了。它有效,我发现的唯一问题是你的XML有一个错误:
第一行必须是
<?xml version='1.0' encoding = 'utf-8'?>
而不是
<xml version='1.0' encoding = 'utf-8'?>
答案 3 :(得分: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>");
...
答案 4 :(得分:0)
你添加了吗?
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
答案 5 :(得分:0)
添加
response.setContentType("text/xml;charset=utf-8");
它解决了在servlet响应之后更新网格的IE问题
谢谢
答案 6 :(得分:0)
我遇到了同样的问题。最终通过反复试验,我通过添加:
来实现它mtype: 'GET'
作为网格选项。 IE,来自你的例子,
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'nrGetjqgridXML.aspx',
datatype: "xml",
mtype: 'GET',
...