JqGrid Част II Основни характеристики, jQuery

css, html, php, javascript, jQuery, ajax ... - решения, примери, рецепти

Така че в предишната статия (jqGrid Част I: Запознаване) подготвихме платформа за експерименти и извършихме „тестово изпълнение“ на приставката, с най-„основните“ параметри. Според която таблицата изисква данни от сървъра в XML маркиране, докато ние имаме възможността да сортираме данните в колони.

В тази статия ще продължим да експериментираме и ще тестваме някои по-прекрасни характеристики на jqGrid, ето плана за действие:

I. Други начини за зареждане на данни1) Зареждане на данни като JSON обект

Така че на практика зареждането на такива данни изисква следната конфигурация на приставката:

Маркирах всички промени с отстъпи (редове 4, 19-21). Както можете да видите в списъка, параметърът тип данни: присвоена стойност "Json", което казва на приставката, че се очаква отговор от сървъра под формата на JSON обект. След това добавих още три свойства към конфигурацията на таблицата надпис, редица номера, rownumWidth. Какво определят те?

  • надпис - ако това свойство не е празно, тогава таблицата има заглавие с текста, присвоен на това свойство.
  • редица номера - ако това свойство е "true", тогава първата колона на таблицата ще бъде колоната с номерата на записите по ред.
    • rownumWidth - това свойство зависи от многобройните номера. И определя ширината на колоната с номериране.

Разбрахме параметрите на клиентската страна, сега нека преминем към сървърната страна. Тук изброявам само последните редове код, всъщност това е моментът на формиране и извеждане на отговора на сървъра.

Пример 1 - използване на масив

Пример 2 - използване на обект

И двата подхода правят едно и също нещо, но избраният от вас подход зависи от вашите предпочитания и ниво на умения.

2) Зареждане на данни като масив

Сега нека разгледаме пример за това как можете да създадете jqGrid, като използвате масив като източник на данни. Както можете да си представите, за този пример няма да имате нужда от сървърен скрипт, а клиентският скрипт ще изглежда нещо подобно.

Както можете да видите, в този пример няма нищо „военно“, всичко е изключително просто. Като тип данни: посочете „Местно“. Освен това, по някакъв начин (в този пример, чрез просто присвояване) създаваме масив от обекти (всеки ред от данни е обект) и добавяме данни с помощта на метода addRowData в цикъла (за (var i = 0; i

Тук трябва да се отклоните малко и да насочите вниманието си към малък нюанс, може би разработчиците не са довършили нещо или не са искали да го довършат, но когато използват методите navSeparatorAdd и navButtonAdd низът на селектора трябва да бъде предаден като първи параметър, но не и променливата, съдържаща последния.

Параметри на разделителя по подразбиране:

Където

  • сепклас: Е клас в CSS ui.jqgrid.css, който определя стила на разделителя. Може да се използва, ако искате да промените външния вид на сепаратора.
  • sepcontent: - съдържание, което може да се постави в сепаратора.

Бутонът се вмъква с помощта на метода navButtonAdd
Където

  • надпис: - надпис върху бутона
  • заглавие: - атрибут на бутон, използван като подсказка
  • бутон: - име на клас икона от jQuery UI CSS Framework
  • onClickButton: - функцията, която ще се изпълни при щракване върху бутона
  • позиция: („Първо“ или „Последно“) - добавете бутон преди или след стандартните бутони
  • курсор: - CSS свойство, което определя външния вид на курсора при задържане на курсора на мишката над елемент
  • документ за самоличност: - използвайки това свойство, можете да зададете стойност за атрибута id на контейнера (TD е обикновена клетка на таблица), в която се намира бутонът.