Question

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

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

如果您对字段名称感到好奇，那么它就是羊驼农场羊群管理系统的网络界面

为什么jquery中的ajax而不仅仅是将XML拉入jqGrid？ XML（在我无法控制的范围内）形成不好 - 每当我在jqGrid中尝试它时，它都失败了，因此XML - ＆gt; DOM - ＆gt;对象转换。

网格加载，显示，页面和排序完美

<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>

当我开始在其中一个搜索框中输入任何内容时，所有内容都会消失。

我错过了什么？

Answer 1

几个月后，但刚刚看到Jeff的评论建议我添加一个答案，而不仅仅是对我的错误发表评论。这就是......

问题是用户错误或用户解释。

代码运行得很好，而不是我期望它的方式。 jqgrid中搜索的默认行为是将输入的搜索词视为区分大小写并进行简单的从左到右比较

jqGrid - 搜索本地数组数据

1 个答案: