기본 제공 검색 / 필터 상자를 사용하지 않고 jqGrid 데이터를 필터링하는 방법

기본 제공 검색 / 필터 상자를 사용하지 않고 jqGrid 데이터를 필터링하는 방법

---

사용자가 기본 검색 상자를 사용하지 않고도 그리드 데이터를 필터링 할 수 있기를 바랍니다.

날짜 (시작 및 종료)에 대한 두 개의 입력 필드를 만들었으며 이제 그리드에이를 필터로 채택한 다음 새 데이터를 요청하도록 지시해야합니다.

그리드 데이터에 대한 서버 요청을 위조하고 (그리드 우회) 그리드의 데이터를 응답 데이터로 설정하는 것은 작동하지 않습니다. 사용자가 결과를 다시 정렬하거나 페이지를 변경하려고하면 그리드가 새 데이터를 요청하기 때문입니다. 빈 필터를 사용하여 서버에서.

이것을 달성하기 위해 그리드 API를 찾을 수없는 것 같습니다. 누구든지 아이디어가 있습니까? 감사.

---

당신 문제는 매우 쉽게 관련하여 해결 될 수있는 postData기능을 포함하여 매개 변수 trigger('reloadGrid'). 나는 아이디어를 더 자세히 설명하려고 노력합니다.

우리가 사용하자 mtype: "GET". 인터페이스를 표시 한 후 표준 검색 / 필터 상자가 수행하는 유일한 작업은 URL에 몇 가지 추가 매개 변수를 추가하고 서버로 전송하고 그리드 데이터를 다시로드하는 것입니다. 검색 / 필터링을위한 자체 인터페이스가있는 경우 (예 : 일부 선택 컨트롤 또는 확인란) URL을 직접 추가하고 trigger('reloadGrid'). 그리드의 정보를 재설정하려면 원하는 방식을 선택할 수 있습니다. 예를 들어, "필터링 없음"과 같은 옵션이있는 선택 컨트롤에 포함 할 수 있습니다.

더 정확하게 말하면 코드는 드롭 다운 목록을 변경할 때 asp.net mvc에서 jqgrid를 다시로드하는 방법에 대한 답변의 코드와 같아야합니다 .

var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});

사용자가 선택 상자에서 선택한 옵션 id=StateId을 id=CityId(마우스 또는 키보드로) 또는 다른 선택 상자로 변경 하면 함수 myReload가 호출되어 jqGrid에서 데이터를 강제로 다시로드합니다. 해당 중에 $.ajax있는 jqGrid 우리를 위해 할 요청을,의 값 postData매개 변수로 전달됩니다 $.ajax으로 data매개 변수입니다. 의 속성 중 일부 data가 함수 인 경우이 함수는에서 호출됩니다 $.ajax. 따라서 선택 상자의 실제 데이터가로드되고 모든 데이터가 서버로 전송되는 데이터에 추가됩니다. 서버 부분에서이 매개 변수 읽기만 구현하면됩니다.

So the data from the postData parameter will be appended to the url (symbols '?' and '&' will be added automatically and all special symbols like blanks will be also encoded as usual). The advantages of the usage of postData is:

1. usage of functions inside postData parameter allows you to load actual values from all used controls to the moment of reloading;
2. Your code stay have very clear structure.
3. All works fine not only with HTTP GET requests, but with HTTP POST also;

If you use some "no filtering" or "all" entries in the select box StateId, you can modify the function which calculate the value of StateId parameter which should appended to the server url from

StateId: function() { return jQuery("#StateId option:selected").val(); }

to something like following:

StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}

On the server side you should makes no filtering for StateId if you receive an empty value as a parameter.

Optionally you can use myGrid.setCaption('A text'); to change a grid title. This allow user to see more clear, that the data in grid are filtered with some criteria.

---

I had the same requirements, and (with Oleg's help) came up with this:

Basically, the user starts typing in the "Employee name" textbox, and immediately the results get shown in the jqGrid.

Details of how I implemented this are here:

jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

Note that I specifically load all of the JSON data for my jqGrid in advance, and that for large data sets, there is a delay when running this code on an iPhone/Android device as you type each character.

But, for desktop web apps, it's a great solution, and makes jqGrid much friendler for the user.

---

By using ReloadGrid() and jquery functions you can make your own custom filtering functions.

참고URL : https://stackoverflow.com/questions/2928371/how-to-filter-the-jqgrid-data-not-using-the-built-in-search-filter-box