jqGrid 열에 대한 부울 또는 열거 형 드롭 다운 필터링

Question

저는 첫 번째 ASP.NET MVC 3에서 표 형식의 데이터를 표시하고 특히 데이터를 필터링하는 데 유용하다는 것을 알기 위해 jqGrid를 사용하고 있습니다. 문자열 형식의 경우 "contains"와 함께 열 필터링을 사용하면 문자열을 제거하는 데 매우 효과적입니다. 날짜 데이터는 날짜 선택 도구를 사용합니다. 큰.

이제 본질적으로 부울 값인 몇 개의 열 (예 : '견과 포함')이 있습니다. 나는 이것을 필터링하는 방법을 제공하고자한다. 지금은 "true"및 "false"로 표시되며 문자열 유형 열과 동일한 문자열 기반 필터링을 사용합니다. 그것은 다소 clunky하다. 대신 드롭 다운 메커니즘을 통해 세 가지 값 (true/false/both) 중 하나를 선택하는 방법이 필요하다고 생각합니다. 에만 작동

{ name: 'ContainsNuts', 
    index: 'ContainsNuts', 
    align: 'left', 
    searchoptions: { sopt: ['eq, 'ne']} 
} 

때 '거짓'또는 '사실'에 사용자 유형 - 다시, 투박한 :

나의 현재 colModel은 나의 '부울'필드 같은 항목이 있습니다.

몇 가지 다른 열에 대해서는 열 개수가 많고 결과를 페이지로 표시하기 때문에 'Cones'열이있는 것과 같이 열거 형에 드롭 다운을 사용하고 싶습니다. 자동 완성 텍스트 필터링을 사용하는 것이 조금입니다 hit-or-miss를 사용하여 가능한 모든 값을 찾습니다. 희망은 그 말이 맞습니다.

그래서 내가 해봤 것은 이것이다 - 나는 같은 보이는 컨트롤러 액션 생성 :

public JsonResult AvailableCones() 
{ 
    var context = new IceCreamEntities(); 
    var query = context.Cones.AsQueryable().Distinct(); 
    List<string> all = query.Select(m => m.Name).ToList(); 
    return Json(all, JsonRequestBehavior.AllowGet); 
} 

을 그리고 필터링 대화 상자에서 드롭 다운 선택을 만들려면이 [아마 복잡한 방법] 같은 것을했다 준비가 내 문서에 콘을 위해 :

... 

createSearchSelection = function (someValues) { 
    var outputValues = ""; 
    if (someValues && someValues.length) { 
     for (var i = 0, j = someValues.length; i < j; ++i) { 
     var entry = someValues[i]; 
     if (outputValues.length > 0) { 
      outputValues += ";"; 
     } 
     outputValues += entry + ":" + entry; 
     } 
    } 
    return outputValues; 
} 

setTheSearchSelections = function (colName, url){ 
    $('#icecreamgrid').jqGrid('setColProp', colName, 
     { 
     stype: 'select', 
     searchoptions: { 
      value: createSearchSelection(url), 
      sopt: ['eq'] 
     } 
     }); 
} 

gotData = function(data) { 
    setTheSearchSelections('ConeType', data); 
} 

var url = "/IceCream/AvailableConeTypes"; 
$.get(url, null, gotData); 

결과는 내가 검색 대화 상자에서 ConeType 열의 드롭 다운을 얻고 올바른 행이 컬럼에 표시한다는 것입니다. 큰. 꽤 효과적입니다.

그러나 어떻게 해야할지 모르겠지만 필터 대화 상자에 표시된 것과 같이 내 열 헤더 필터에 드롭 다운 표시가 나타납니다. 어떻게하면 이런 일이 일어나게 할 수 있습니까? 둘째, 부울 값에 대한 작업을 어떻게 만들 수 있습니까?

Answer 1

질문의 첫 번째 부분은 불리언 값을 표시하고 필터링하는 것입니다. 이러한 값을 표시하려면 확인란을 사용하십시오. 귀하의 경우에 차이가 나는 일반적으로 많은 열이 있습니다. JSON 데이터의 크기를 줄이기 위해 "true" 및 "false" 대신 "1"과 "0"을 사용합니다. 다음으로 선택 상자에 "아니오"를 "예"를 선택하거나 다음 열이 사용자 검색을위한 그래서

formatter: 'checkbox', align: 'center', width: 20, 
edittype: 'checkbox', editoptions: { value: "1:0" }, 
stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: "1:Yes;0:No" 

을 초기 설정 한 사용합니다. 나는 그런 열을 많이 가지고 있기 때문에 나는이 프로젝트의 모든 페이지에 포함 자바 스크립트 파일 하나에 templateCeckbox 객체를 정의 :

my.templateCeckbox = { 
    formatter: 'checkbox', align: 'center', width: 20, 
    edittype: 'checkbox', editoptions: { value: "1:0" }, 
    stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: "1:Ja;0:Nein" } 
}; 

는 그런 전형적인 열 정의가

{ 
    name: 'IsInBasis', index: 'InBasis', template: my.templateCeckbox, 
    cellattr: function() { return ' title="TS-Basis"'; } 
}, 

이다 (자세한 내용은 the answer 참조 열 템플릿에 대해). 또한 하나의 체크 박스를 가리키면 열 머리글에 가까운 텍스트가 표시된다는 툴팁이 표시되는 경우 실용적입니다. 그래서 cellattr 속성을 사용합니다. 체크 박스가있는 열이 많은 경우 유용성이 약간 향상됩니다.

chechboxes를 사용하여 많은 열을 표시하려면 개인별로 세로 열 머리글을 사용하십시오. the old answer을 읽어 보는 것이 좋습니다. 외부 체크 박스 패널과 관련하여 데이터의 빠른 필터링을 구현하는 방법을 설명하기 때문에 추가로 흥미로울 수 있습니다.

이제 '원뿔'열의 선택 물 건물에 대해 설명합니다. 문자열의 배열 (목록)과 같은 가능한 옵션 목록을 제공하는 AvailableCones 작업이있는 경우 searchoptions으로 value: createSearchSelection(url) 대신 dataUrl:'/IceCream/AvailableConeTypes'을 사용해야합니다. 당신은 the answer의 "UPDATED"부분에서 설명한 buildSelect 기능 만 추가하면됩니다. 도움이

{ 
name: 'SReqdFlag', index: 'SReqdFlag', editable: true, edittype: 'select', editoptions: { value: '"":Select;true:True;false:False' } 
} 

희망 :이 코드 줄은 참, 거짓 값이 컬럼의 참, 거짓 드롭 다운리스트를 보여줍니다

my.buildSelect = function(data) { 
    var response = jQuery.parseJSON(data.responseText), 
     s = '<select>', i, l, ri; 

    if (response && response.length) { 
     for (i=0, l=response.length; i<l; i += 1) { 
      ri = response[i]; 
      s += '<option value="' + ri + '">' + ri + '</option>'; 
     } 
    } 
    return s + '</select>'; 
}; 

Answer 2

{ 
    name: 'ConeType', width: 117, index: 'ConeType', editable: true, align: 'center', 
    edittype: 'select', stype: 'select', 
    editoptions: { 
     dataUrl: urlBase + '/AvailableConeTypes', 
     buildSelect: my.buildSelect 
    }, 
    searchoptions: { 
     dataUrl: urlBase + '/AvailableConeTypes', 
     buildSelect: my.buildSelect 
    } 
} 

!