jqGrid: исправлена строка

ProgramBox

jqGrid: исправлена строка

Post author:admin
Запись опубликована:30 мая, 2023
Post category:Вопросы по программированию

#javascript #jqgrid

Вопрос:

Возможно ли установить строку в фиксированную позицию? Например, теперь у нас есть общая строка, и мы всегда хотим, чтобы общая сумма была сверху, после сортировки и т.д.

Есть ли плагин для этого?

Мы попытались сделать это в onLoadComplete, перерисовав всю таблицу следующим образом:

 var rowIDs = $(this).getDataIDs();
var rowID, columnID;
$(this).clearGridData(); 
for (rowID in rowIDs) {
  for (columnID in data.rows[rowID]) {
    $(this).addRowData(rowIDs[rowID], data.rows[rowID], (data.rows[rowID][columnID].first ? 'first' : null));
    break; // Only do this for the first column
  }
}

но это плохо сказывается на производительности, у нас тысячи строк.

после комментария Олега:

Общая строка — это просто строка из нашего набора данных. Набор данных имеет следующий формат:

Столбцы: «Сеть», «Клики», «Просмотры»

 data = [
  {
    'Network': {value:'Google'}, 'Clicks': {value:38392882}, 'Views':{value:3939922}
  },
  {
    'Network': {value:'Sanoma'}, 'Clicks': {value:177883}, 'Views':{value:39293}
  },
  ...
  ,
  {
    'Network': {value:'Total'}, 'Clicks': {value:993832732223}, 'Views':{value:3932293939}, 'first': true
  },
  ...

]
}

Итак, мы устанавливаем в нашем потоке данных, какую строку мы хотим иметь сверху (‘first’: true).

При обработке мы используем это для установки в верхней части таблицы. Надеюсь, это более понятно 🙂

Заранее спасибо,

Вихревой

1. Я забыл упомянуть, что использование addRowData для каждой строки сетки действительно очень медленный метод. Я не понял из вашего вопроса, зачем вам это нужно делать. Вы можете задать новый вопрос, где вы публикуете больше кода и точно объясняете, зачем вам это нужно. Получаете ли вы данные с сервера в формате JSON? Почему jqGrid не может заполнить данные напрямую? Я уверен, что можно найти более эффективный метод заполнения сетки.

2. @oleg: да, мы заметили, что addRowData работает очень медленно, поэтому нам понадобилось другое решение. Я воспользовался вашим советом и отредактировал вопрос. Спасибо.

3. что для меня остается неясным, так это то, как данные из набора данных будут отправлены клиенту? Выполняете ли вы вызов ajax перед заполнением jqGrid? Почему вы размещаете данные в такой странной форме, как 'Network': {value:'Google'} вместо Network:'Google' ? Почему вы задаете first:true как часть данных? У вас есть более одного элемента, имеющего first:true ? В общем, вы можете легко создать jqGrid, используя gridview:true и localReader , который соответствует структуре ваших данных, и использовать data параметр jqGrid.

4. @oleg да, мы выполняем ajax-вызов (json-запрос), чтобы получить данные с сервера. Данные представлены в такой форме, поэтому мы можем выполнять некоторые действия для каждой ячейки данных: Network: {‘value’: 827387, benchmark: true, striong: (somecondition?true:false)}, которые анализируются форматерами.

5. «ячейка данных» мне мало что говорит, но если вы получаете данные по ajax, вы можете определить параметр JsonReader , который позволит jqGrid считывать данные JSON в форме, которую предоставляет сервер. Таким образом, вы можете напрямую использовать datatype:'json' jqGrid и определять сервер url , который предоставляет данные. Вы можете дополнительно использовать параметр ‘gridview: true’ в jqGrid, который дополнительно ускоряет заполнение сетки. Таким образом, данные будут заполнены в сетке сразу и все будет работать быстро.

Ответ №1:

Нижний колонтитул размещается в div с классом «ui-jqgrid-sdiv» и обычно размещается под div с классом «ui-jqgrid-bdiv», где размещается основная сетка, содержащая. Итак, чтобы переместить нижний колонтитул в начало страницы, вам нужно переместить div нижнего колонтитула. Дополнительно вы должны разместить нижнюю границу в том стиле, который вам нужен. Код мог быть следующим:

 $('div.ui-jqgrid-sdiv').css({
    "border-bottom-style":"solid",
    "border-bottom-color":"#a6c9e2",
    "border-bottom-width":"2px"
}).insertBefore($('div.ui-jqgrid-bdiv'));

в результате вы получите
введите описание изображения здесь

Смотрите демонстрацию в реальном времени здесь.

1. хороший вариант. У нас есть данные в виде объектов, а total — это просто строка из нашего набора данных, которая должна пройти множество форматирований, поэтому я не уверен, смогу ли я сделать то же самое, но я попытаюсь. Спасибо за ваш хороший вариант.

2. @eddy147: Добро пожаловать! Как я уже писал ранее, я вижу в вашем коде большой потенциал оптимизации. Вам нужно просто более точно объяснить, почему вам нужно добавлять строки с addRowData в цикле. Если у вас есть dataset на сервере, вы можете заполнить userdata ответ JSON с сервера и использовать userDataOnFooter:true в jqGrid, который поместит данные из userdata в сетку.