2016-12-12 4 views
0

Я пытаюсь реализовать функцию пользовательского поиска для jqgrid, в которой он может искать ячейки таблицы с содержимым html. Пожалуйста, обратитесь ниже примерjqgrid пользовательский поиск по элементам ячейки html

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

В скрипкой есть две колонки, которые имеют Div элементов внутри ячейки таблицы «клиент» и «Примечания». Я использую html-ячейки, потому что мне нравится, что ячейки имеют стили, а некоторые ячейки - гиперссылки с привязными тегами. В этом примере я не изменил все ячейки столбцов, чтобы иметь html-контент, но фактическая сетка, которую я использую, имеет все ячейки в тегах html div. Я смог реализовать пользовательскую функцию сортировки, возвращая значение innerText для ячеек. Теперь я пытаюсь реализовать аналогичные функции для поиска, где функция поиска может проверять наличие текстового содержимого ячейки в соответствии с данными.

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

Edit: Использование jqgrid 4.7.0

+1

Вводные данные, которые вы используете, содержат фрагменты HTML. Это очень плохой выбор. Лучше использовать ** чистые данные ** и использовать форматировщики jqGrid, пользовательские форматиры, 'callattr' и другие для создания тех же HTML-фрагментов * на основе входных данных *. Он позволяет реализовать любое поведение поиска или сортировки, которое вам нужно. Использование '$ (cell) [0] .innerText' будет работать, но оно грязно (можно повысить производительность за счет использования $ .jgrid.stripHtml (cell)' вместо '$ (cell) [0]. innerText'). Если вы измените формат входных данных, то проблема, которую вы пытаетесь решить, не будет существовать. – Oleg

+1

Пользовательский поиск не существует в jqGrid 4.7. Он реализован только в бесплатном jqGrid (см. [Wiki] (https://github.com/free-jqgrid/jqGrid/wiki/Custom-filtering-searching-Operation)). Бесплатный jqGrid позволяет вам определить обратный вызов 'filter' внутри' customSortOperations'. Обратный вызов 'filter' получает поисковые шаблоны и данные из ячейки, и вы можете сами определить *, как сравнивать * данные. – Oleg

+0

Спасибо, Олег за ваши содержательные комментарии. Я попробую бесплатный jqgrid для реализации пользовательского поиска. Ваши ответы на другие вопросы jqgrid очень помогли мне в разработке сетки, некоторые из ваших ответов были идеальным решением проблем, которые у меня были. Попробуете свои предложения и сообщите об итогах. Благодарю. – hitech0101

ответ

1

Основываясь на материалах Олега я был в состоянии создать скрипку с решением для моей проблемы. Это требует улучшений для расширенного поиска, а также для лучшей производительности, но теперь это работает.

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

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

       } 
      } 
     },  

Edit: Обновлен скрипку ссылка & код, чтобы отразить усовершенствования Олега.

+1

Мне нравится, что я могу вам помочь. Я предлагаю вам использовать '$ .jgrid.stripHtml (searchText)' вместо '$ (searchText) [0] .innerText', что происходит очень медленно. Более того, вы никогда не должны заполнять сетку, вызывая 'addRowData' в цикле, потому что это самый медленный способ заполнить сетку. Вы должны просто использовать параметр data: mydata' jqGrid. См. Https://jsfiddle.net/OlegKi/ukyde000/11/ – Oleg

+0

Спасибо, Олег. Приносим извинения за то, что вы не включили его в мое решение в соответствии с вашими предыдущими комментариями. Я обновил решение, чтобы отразить изменения. – hitech0101

+0

Добро пожаловать! – Oleg