jqGrid - 搜索本地数组数据

jqGrid - searching on local Array data

本文关键字：数组 数据 搜索 jqGrid      更新时间：2023-09-26
在

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

我

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

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

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

网格加载、

显示、页面和排序完美

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

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

我错过了什么？

几个月后，但刚刚看到杰夫的评论，建议我添加一个答案，而不仅仅是对我的错误的评论。来了...

问题在于用户错误，或者更确切地说，是用户解释。

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

相关文章：