jqGrid логическая фильтрация или фильтрация раскрывающегося списка для столбцов

Question

Я использую jqGrid для отображения табличных данных на моем первом ASP.NET MVC 3 и считаю его действительно полезным, особенно для фильтрации данных. Для строкового типа я использую фильтрацию столбцов с помощью «contains», и это прекрасно работает при отбраковке строк. Для данных даты я использую средство выбора даты. Отлично.

Теперь у меня есть несколько столбцов (например, «Содержит гайки»), которые по сути являются логическими значениями. Я хочу предоставить способ отфильтровать их. Прямо сейчас они отображаются как «true» и «false» и используют ту же фильтрацию на основе строк, что и мои столбцы строкового типа. Это немного неуклюже. Я думаю, что вместо этого я бы хотел выбрать одно из трех значений (true / false / both) с помощью раскрывающегося механизма.

В моем текущем colModel есть запись для моего «логического» поля:

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

, который работает только тогда, когда пользователь вводит «false» или «true» - опять же, неуклюжий.

Для некоторых других столбцов я хотел использовать выпадающие списки для перечислений, например, у меня есть столбец «Конусы», так как строк довольно много, и я разбиваю результаты по страницам - использование автоматической полноты фильтрации текста является хитом или упустить для пользователя, чтобы найти все возможные значения. Надеюсь, что это имеет смысл.

Итак, я попробовал вот что - я создал действие контроллера, которое выглядит так:

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, я использую «1» и «0» вместо "true" и "false". Далее я использую следующие настройки столбца

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

Таким образом, для поиска пользователь должен выбрать «Да» или «Нет» в поле выбора. Поскольку у меня много таких столбцов, я определил объект templateCeckbox в одном файле JavaScript, который я включаю на каждой странице проекта:

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"'; }
},

(подробности о шаблонах столбцов см. В ответе ). Я нахожу также практичным, если всплывающая подсказка показывается, если навести указатель мыши на текст рядом с заголовком столбца. Поэтому я использую атрибут cellattr. В случае наличия множества столбцов с флажками это немного улучшает удобство использования.

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

Теперь о построении селекторов для столбца «Конусы». Если у вас есть действие AvailableCones, которое предоставляет список возможных опций, таких как массив (список) строк, вы должны использовать dataUrl: '/ IceCream / AvailableConeTypes' вместо value: createSearchSelection(url) в качестве searchoptions. Вы хорошо добавляете только функцию buildSelect, которую я описал в части «ОБНОВЛЕНО» ответа .

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

, где

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

В этой строке кода показан раскрывающийся список True, False для столбца со значениями true, false:

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

Надеюсь, это поможет!