2

在 jqGrid 中对本地数据进行工具栏搜索时出现问题。

我在这里找到了早期版本的修复程序，但我理解自 V3.7 以来内置的文档的方式（我使用的是 4.4）。

如果您对字段名称感到好奇，它是羊驼农场畜群管理系统的 Web 界面

为什么在 jquery 中使用 ajax 而不仅仅是将 XML 拉入 jqGrid？XML（不在我的控制范围内）的格式不正确 - 每次我在 jqGrid 中尝试它时，它都失败了，因此 XML -> DOM -> 对象转换。

Grid 完美地加载、显示、分页和排序

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />

<script src="jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
#list td {
font-size: .6em;
}

.ui-pg-input{
    height: initial !important;
}
</style> 
<script type="text/javascript">
pacaURL = "/alpaca/proxy.php?url=localhost:9002/rest/alpaca";
$(function(){ 
var pData = new Array();
$.ajax({
    url:pacaURL, 
    success:function(data){
        pacaData = $.parseXML(data);
        console.log(pacaData);

        $(pacaData).find("AlpacaListing").each(function(){
            pData.push({
                Name: $(this).find("Name").text(),
                Age: FormatDate($(this).find("DOB").text()),
                Colour: $(this).find("Colour").text(),
                IAR: $(this).find("IAR").text(),
                Sex: $(this).find("Sex").text(),
                Sire: $(this).find("SireName").text(),
                Dam: $(this).find("DamName").text()
            });
        });
        console.log(pData);
        makeGrid(pData);
    },
    complete:function(data){
        console.log("COMPLETE");
    }
});


}); 

function makeGrid(pData) {
$("#list").jqGrid({
    datatype:'local',
    data: pData,
    colNames:['Name','Age(M)', 'Colour','IAR','Sex','Sire', 'Dam'],
    colModel :[ 
    {name:'Name', index:'Name', width:180}, 
    {name:'Age', index:'Age', width:90, align:'right', sorttype:'int'}, 
    {name:'Colour', index:'Colour', width:150}, 
    {name:'IAR', index:'IAR', width:70, align:'right', sorttype:'int'}, 
    {name:'Sex', index:'Sex', width:70}, 
    {name:'Sire', index:'Sire', width:180},
    {name:'Dam', index:'Dam', width:180}
    ],
    pager: '#pager',
    rowNum:20,
    rowList:[10,20,30],
    loadonce: true,
    sortname: 'Name',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'The Herd'
}); 

$('#list').jqGrid('filterToolbar', { stringResult:true, searchOnEnter: false });
}

function FormatDate(sqlDate){
b=new Date(sqlDate);
d= new Date(new Date() - b);

return (d.getYear() - 70) * 12 + d.getMonth();
}
</script>

</head>
<body>
<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 
</body>
</html>

一旦我开始在其中一个搜索框中输入任何内容，所有内容都会空白。

我错过了什么？

4

1 回答 1

0

Several months later, but just seen the comment from Jeff suggesting that I add an answer rather than just a comment about my error. Here goes...

The problem was one of user-error or, rather, user interpretation.

The code was working perfectly, just not the way that I was expecting it to. The default behavior for search in jqgrid is to treat the entered search term as case sensitive and to do a simple left-to-right comparison

于 2012-12-10T23:00:31.433 回答