html 셀 요소에 대한 jqgrid 사용자 정의 검색

HTML 컨텐트가있는 표 셀을 검색 할 수있는 jqgrid에 대한 사용자 정의 검색 기능을 구현하려고합니다. 테이블 셀 '클라이언트'와 '노트'내부 DIV 요소가 두 개의 열이있는 바이올린에서 예를html 셀 요소에 대한 jqgrid 사용자 정의 검색

https://jsfiddle.net/ukyde000/1/

아래를 참조하십시오. 스타일을 가지고있는 셀을 좋아하고 일부 셀은 앵커 태그가있는 하이퍼 링크이기 때문에 html 셀을 사용하고 있습니다. 이 예제에서는 모든 열 셀을 HTML 컨텐트로 변경하지는 않았지만 실제로 사용하는 표는 html div 태그의 모든 셀을 사용합니다. 셀의 innerText 값을 반환하여 사용자 지정 정렬 함수를 구현할 수있었습니다. 나는 이제 검색 기능이 셀의 텍스트 내용을 검사하여 데이터를 일치시킬 수있는 유사한 기능을 구현하려고 시도하고있다.

<td><div><span>text/number/date</span></div></td> 
sorttype: funtion(cell) { return $(cell)[0].innerText;}

편집 : 난 내 문제에 대한 해결책으로 바이올린을 만들 수 있었다 올렉의 입력을 바탕으로

출처

2016-12-12 hitech0101

사용하는 입력 데이터에 HTML 조각이 들어 있습니다. 그것은 아주 나쁜 선택입니다. ** pure 데이터 **를 더 잘 사용하고 jqGrid 포맷터, 사용자 정의 포맷터, callattr 및 기타를 사용하여 입력 데이터 *를 기반으로 동일한 HTML 프래그먼트 *를 만들어야합니다. 필요한 검색 또는 정렬 동작을 구현할 수 있습니다. '$ (cell) [0] .innerText'의 사용은 효과가 있지만 더러운 방법입니다. ($ (cell) [0] 대신'$ .jgrid.stripHtml (cell)'을 사용하여 성능을 향상시킬 수 있습니다. innerText'). 입력 데이터의 형식을 변경하면 해결하려는 문제가 존재하지 않습니다. – Oleg

jqGrid에 사용자 정의 검색이 없습니다. 4.7. 무료 jqGrid에서만 구현됩니다 ([wiki] (https://github.com/free-jqgrid/jqGrid/wiki/Custom-filtering-searching-Operation) 참조). Free jqGrid를 사용하면'customSortOperations' 내부에'filter' 콜백을 정의 할 수 있습니다. 'filter' 콜백은 검색 패턴과 셀의 데이터를 얻고 데이터를 비교하는 방법을 정의 할 수 있습니다. – Oleg

Oleg에게 유익한 의견을 보내 주셔서 감사합니다. 나는 사용자 정의 검색을 구현하기 위해 무료 jqgrid를 시도 할 것이다. 다른 jqgrid 질문에 대한 귀하의 답변은 그리드 개발에 많은 도움을 주었으며 일부 답변은 내가 가진 문제에 대한 완벽한 해결책이었습니다. 제안을 시도하고 그 결과를보고 할 것입니다. 감사. – hitech0101

있는 jqGrid 4.7.0 사용. 고급 검색 및 성능 향상을 위해 개선해야하지만 지금은 효과가 있습니다.

customSortOperations: { 
    nIn: { 
      operand: "nIN", 
      text: "equals", 
      filter: function (options) { 
        var searchKey = options.searchValue; 
        var searchCol = options.cmName; 
        var searchText = options.item[searchCol]; 
        searchText = $.jgrid.stripHtml(searchText); 
        if (searchKey === searchText){ 
         return true; 
        } 

       } 
      } 
     },

편집

https://jsfiddle.net/OlegKi/ukyde000/11/

: 업데이트 바이올린 링크 & 코드는 올렉의 개선을 반영합니다.

출처

2016-12-14 15:39:13 hitech0101

나는 내가 너를 도울 수있는 것을 좋아한다. '$ (searchText) [0] .innerText' 대신'$ .jgrid.stripHtml (searchText)'만 사용하는 것이 좋습니다. 게다가 그리드를 채우는 가장 느린 방법이기 때문에 루프에서'addRowData'를 호출하여 그리드를 채우지 않아야합니다. jqGrid의'data : mydata' 매개 변수를 사용해야합니다. https://jsfiddle.net/OlegKi/ukyde000/11/ – Oleg

감사합니다. 올렉. 나는 귀하의 이전 의견에 따라 내 솔루션에 포함되지 않은 것에 대해 사과드립니다. 변경 사항을 반영하도록 솔루션을 업데이트했습니다. – hitech0101

당신은 환영합니다! – Oleg

html 셀 요소에 대한 jqgrid 사용자 정의 검색

답변

관련 문제