Question

我正面临搜索功能的问题。我正在搜索数据，同时键入任何值＆amp; debug在下面的行中给出了错误：

＆＃13;

if (column.searchable && column.visible &&
                    column.converter.to(row[column.id]).search(searchPattern) > -1)

＆＃13;

＆＃13; 我的实施：

＆＃13;

$(document).ready(function()
{
sendRESTQuery(asmx());
});
function asmx() { 
var url = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl;  
    var asmx =  url + "/_vti_bin/listdata.svc/AD?$select=Column1,Column2,Column5,Column7,Column9";   //?$select=Column1,Column2,Column3,Column4
   
    return asmx;
}
function testBtn() {
sendRESTQuery(asmx());
}
var baseUrl = asmx();

function sendRESTQuery(baseUrl) { 
   
    $.ajax({        
        contentType: 'application/json;odata=verbose',       
        url: baseUrl,
         headers: { 
            'X-RequestDigest': $('#__REQUESTDIGEST').val(), 
            "Accept": "application/json; odata=verbose" 
        }, 
        post: function () {alert('true')},       
        complete: function (result) {                
            var response = JSON.parse(result.responseText); 
            if (response.error) {
            } 
            else { 
               bgDetails = response.d; 
                onSuccess(bgDetails.results);                 
            } 
        }         
 
    });       
}

function onSuccess(bgDetails) {
		
      $("#grid-data").bootgrid().bootgrid("append", bgDetails);  
      $("#grid-data").bootgrid("sort", { Column2 : "asc"}).bootgrid("search", $('.search-field').val());

      
      }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.js"></script>

＆＃13;

<table id="grid-data" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-keep-selection="true">
<thead>
<tr>
<th data-column-id="Column1" data-type="numeric" data-identifier="true" data-visible="false" >Employee ID</th>
<th data-column-id="Column2">Full Name</th>
<th data-column-id="Column5">Department</th>
<th data-column-id="Column7" >Work Phone</th>
<th data-column-id="Column9">Email</th>
</tr>
</thead>
</table>

Answer 1

当您使用包含可搜索列的append值的json的null时，这是bootgrid中的一个已知错误。

您必须确保在任何可搜索列的行中都没有空值。一种方法：

function onSuccess(bgDetails) {

    // iterate every row, and every property with null, and set an empty string...
    for (var i = 0; i < array.length; i++) {
        var row = array[i];
        for (var prop in row) {
            if (row.hasOwnProperty(prop) && row[prop] === null) {
                row[prop] = "";
            }
        }
    }

    $("#grid-data").bootgrid().bootgrid("append", bgDetails);  
    $("#grid-data").bootgrid("sort", { Column2 : "asc"}).bootgrid("search", $('.search-field').val());

  }

另一个选择是使用他们的ajax而不是append使用这样的内容：

$("#grid-data").bootgrid({
    ajax: true,
    ajaxSettings: {        
        contentType: 'application/json;odata=verbose',
        headers: { 
            'X-RequestDigest': $('#__REQUESTDIGEST').val(), 
            "Accept": "application/json; odata=verbose" 
        }
    },
    url: baseUrl
});


$("#grid-data").bootgrid("sort", { Column2 : "asc"})
               .bootgrid("search", $('.search-field').val());

...但您可能需要更改服务器api响应以适应他们期望的json，这是这样的（参见their examples）：

{
  "current": 1,
  "rowCount": 10,
  "rows": [
    {
      "id": 19,
      "sender": "123@test.de",
      "received": "2014-05-30T22:15:00"
    },
    {
      "id": 14,
      "sender": "123@test.de",
      "received": "2014-05-30T20:15:00"
    },
    ...
  ],
  "total": 1123
}

将ajax数据绑定到Bootgrid不显示结果

1 个答案: