Интеграция jqGrid с jQuery UI. Решения

Цикл статей «Документация jqGrid на русском».

Следующая статья — «».
Предыдущая статья — «Интеграция jqGrid с jQuery UI».

В этой статье описаны различные методы интеграции jqGrid с jQuery UI.

Содержание

Сортируемые колонки

Column Chooser

Сортируемые строки

Таблица с изменяющимся размером

Перетаскивание строк между таблицами

Сортируемые колонки

Этот метод встроен в jqGrid, поэтому здесь не нужно делать что-либо специального. Этот метод позволяет менять порядок колонок с помощью мышки. Включается установкой свойства sortable в true. Пример:

<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',
    sortable: true
  }); 
}); 
</script>

jQuery(document).ready(function(){

jQuery("#list").jqGrid({

url:'example.php',

datatype: 'xml',

mtype: 'GET',

colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],

colModel :[

{name:'invid', index:'invid', width:55},

{name:'invdate', index:'invdate', width:90},

{name:'amount', index:'amount', width:80, align:'right'},

{name:'tax', index:'tax', width:80, align:'right'},

{name:'total', index:'total', width:80, align:'right'},

{name:'note', index:'note', width:150, sortable:false}

pager: '#pager',

rowNum:10,

rowList:[10,20,30],

sortname: 'invid',

sortorder: 'desc',

viewrecords: true,

caption: 'My first grid',

sortable: true

});

</script>

Используемые виджеты jQuery UI и другие плагины:

jQuery UI core
jQuery UI sortable widget

Column Chooser

С помощью этого метода можно менять порядок колонок, скрывать и отображать колонки в таблице.

Синтаксис вызова:

jQuery("#list").columnChooser(options);

1	jQuery("#list").columnChooser(options);

Или с помощью нового API:

jQuery("#list").jqGrid('columnChooser', options);

1	jQuery("#list").jqGrid('columnChooser', options);

Где options — это объект со свойствами, перечисленными ниже.

Для того чтобы использовать этот метод, плагин jQuery multiselect должен быть загружен перед таблицей.

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

Свойства

Свойство: title
Тип: string
Заголовок диалогового окна.
По умолчанию: Смотрите $.jgrid.col.title в языковом файле.

Свойство: width
Тип: number
Устанавливает ширину диалогового окна в пикселях.
По умолчанию: 420

Свойство: height
Тип: number
Устанавливает высоту диалогового окна в пикселях.
По умолчанию: 240

Свойство: classname
Тип: string
Класс, который будет добавлен к селектору, где строятся элементы выбора.
По умолчанию: null

Свойство: done
Тип: function
Функция, которая будет вызываться при нажатии кнопки Ок. В текущей реализации вызывается метод remapColumns, для того чтобы поменять порядок колонок.
По умолчанию:

Свойство: msel
Тип: смешанный
msel — это либо имя класса UI widget-а, который расширяет multiselect, либо функция, которая поддерживает создание объекта multiselect (без аргументов, либо с переданным объектом) и его уничтожение (при передаче строки "destroy").
По умолчанию: "multiselect"

Свойство: dlog
Тип: смешанный
Это либо имя класса ui widget-а, который ведёт себя как диалог, или функция, которая поддерживает создание диалога (при передаче dlog_opts) и уничтожение диалога (при передаче строки "destroy").
По умолчанию: dialog

Свойство: dlog_opts
Тип: смешанный
Это либо объект для передачи в dlog, либо функция, которая создаёт этот объект свойств. По умолчанию создаёт подходящий объект со свойствами для ui.dialog.
По умолчанию:

Свойство: cleanup
Тип: function
Функция для очистки диалогового окна и выбора. Также вызывает функцию done без изменений. (чтобы указать, что columnChooser был прерван).
По умолчанию:

Функция done, указанная выше, имеет следующее объявление в коде jqGrid:

opts = $.extend({
...
"done" : function(perm) { if (perm) self.jqGrid("remapColumns", perm, true) },
...
});

opts = $.extend({

...

"done" : function(perm) { if (perm) self.jqGrid("remapColumns", perm, true) },

...

});

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

jQuery("#list").jqGrid('columnChooser', {
   done : function (perm) {
      if (perm) {
          // Нажата кнопка "OK"
          this.jqGrid("remapColumns", perm, true);
          // Ширина таблицы, вероятно, поменялась, 
          // поэтому мы можем получить новую ширину
          // и выровнять ширину других элементов на странице.
          //var gwdth = this.jqGrid("getGridParam","width");
          //this.jqGrid("setGridWidth",gwdth);
      } else {
          // Здесь можно выполнить некоторые действия при клике
          // на кнопку "Cancel".
      }
   }
});

jQuery("#list").jqGrid('columnChooser', {

done : function (perm) {

if (perm) {

// Нажата кнопка "OK"

this.jqGrid("remapColumns", perm, true);

// Ширина таблицы, вероятно, поменялась,

// поэтому мы можем получить новую ширину

// и выровнять ширину других элементов на странице.

//var gwdth = this.jqGrid("getGridParam","width");

//this.jqGrid("setGridWidth",gwdth);

} else {

// Здесь можно выполнить некоторые действия при клике

// на кнопку "Cancel".

}

});

Используемые виджеты jQuery UI и другие плагины

jQuery UI core
jQuery UI sortable widget.
jQuery UI dialog
jQuery multiselect plugin

Плагин jQuery multiselect может быть скачан здесь. Также плагин включён в каталог plugins сборки jqGrid.

Сортируемые строки

Этот метод позволяет менять порядок (сортировать) строк с помощью мышки.

Синтаксис вызова:

jQuery("#list").sortableRows(options);

1	jQuery("#list").sortableRows(options);

Или с помощью нового API:

jQuery("#list").jqGrid('sortableRows', options);

1	jQuery("#list").jqGrid('sortableRows', options);

где options — это объект со свойствами, перечисленными ниже.

Этот метод полностью совместим с виджетом jQuery UI sortable. Это означает, что мы может указывать любое свойство или событие, доступное в виджете. Список свойств и событий здесь.

Используемые виджеты jQuery UI и другие плагины

jQuery UI core
jQuery UI sortable widget.

Известные проблемы

На текущий момент этот метод не работает в FireFox 3.0.x, Chrome и Safari из-за небольшой проблемы в виджете sortable, которая, мы надеемся, будет поправлена в будущих реализациях jQuery UI.
Метод не работает при включённом treeGrid, то есть вы не можете использовать его для смены порядка строк дерева.

Таблица с изменяющимся размером

Этот метод позволяет менять ширину и высоту таблицы с помощью мышки.

Синтаксис вызова:

jQuery("#list").gridResize(options);

1	jQuery("#list").gridResize(options);

Или с помощью нового API:

jQuery("#list").jqGrid('gridResize', options);

1	jQuery("#list").jqGrid('gridResize', options);

где options — это объект со свойствами, перечисленными ниже.

Метод полностью совместим с виджетом jQuery UI resizable. Это означает, что вы можете указать любое свойство и событие, поддерживаемое этим виджетом. Список свойств и событий здесь.

Используемые виджеты jQuery UI и другие плагины

jQuery UI core
jQuery UI resizable widget.

Известные проблемы

При использовании кнопки скрытия таблицы (в заголовке таблицы), содержимое, созданное виджетом resizable не скрывается, и в результате после скрытия таблицы появляется граница таблицы.

Перетаскивание строк между таблицами

Этот метод позволяет перемещать строки между двумя и более таблицами с помощью мышки.

Синтаксис вызова:

jQuery("#list").gridDnD(options);

1	jQuery("#list").gridDnD(options);

Или с помощью нового API:

jQuery("#list").jqGrid('gridDnD', options);

1	jQuery("#list").jqGrid('gridDnD', options);

где options — это объект со свойствами, перечисленными ниже.

Свойство: connectWith
Тип: string
Определяет целевую таблицу, в которую строки должны перетаскиваться. Это строковое свойство. В случае нескольких таблиц идентификаторы должны быть разделены запятыми: "#grid1, #grid2"
По умолчанию: пустая строка

Свойство: onstart
Тип: function
Это свойство возникает при начале перетаскивания строки из исходной таблицы (к которой применён этот метод). В эту функцию передаётся event handler и подготовленный объект ui. Смотрите подробнее jQuery UI draggable events.
По умолчанию: null

Свойство: onstop
Тип: function
Это событие возникает при окончании перетаскивания. В обработчик этого события передаётся event handler и подготовленный объект ui. Смотрите подробнее jQuery UI draggable events.
По умолчанию: null

Свойство: beforedrop
Тип: function
Это событие возникает перед сбрасыванием строки в таблицу, указанную в connectWith. В обработчик этого события передаётся event handler, подготовленный объект ui, данные, которые будут вставлены в таблицу ключ-значение, исходная таблица и целевая таблица.
Если обработчик события возвращает объект (пары «ключ:значение»), то этот объект вставляется в целевую таблицу.
По умолчанию: null

Свойство: ondrop
Тип: function
Это событие возникает после сбрасывания строки в таблицу, указанную в connectWith. В обработчик этого события передаётся event handler, подготовленный объект ui, данные, которые вставлены в таблицу в виде пар ключ-значение. Смотрите подробнее jQuery UI droppable events.
По умолчанию: null

Свойство: drop_opts
Тип: object
Предопределённые свойства, которые могут быть применены к таблице, указанной в connectWith. Вы можете также указать любое свойство или событие (кроме события drop, которое заменено на ondrop, описанное выше). Смотрите подробнее jQuery UI droppable.
По умолчанию: { activeClass : "ui-state-active",hoverClass : "ui-state-hover"}

Свойство: drag_opts
Тип: object
Предопределённые свойства, которые могут быть применены к исходной таблице (к которой применён метод). Вы также можете указать любое свойство и событие (кроме событий start и stop, которые заменены на onstart и onstop, описанные выше). Смотрите подробнее jQuery UI draggable.
По умолчанию: { revert: "invalid",helper: "clone",cursor: "move",appendTo : "#jqgrid_dnd",zIndex: 5000}

Свойство: dropbyname
Тип: boolean
Если установлено в true, то это означает, что только поля, имеющие одинаковые имена будут добавлены в целевую таблицу. Используется метод addRowData для вставки новой строки, что означает, что если некоторые поля с именем "a" в исходной таблице скрыты, то они могут появиться в целевой таблице. Значение по умолчанию false означает, что данные будут добавляться, отсчитывая от первой колонки в исходной таблице.
По умолчанию: false

Свойство: droppos
Тип: string
Определяет позицию добавления новой строки. Может быть "first", что означает первую строку таблицы, или "last", что означает последнюю строку целевой таблицы.
По умолчанию: "first"

Свойство: autoid
Тип: boolean
Это свойство определяет генерацию id для новой строки. Если это свойство равно true, то генерируется id, который начинается строкой, установленной в autoidprefix (смотрите ниже) и с последующим случайным числом. Если это свойство равно false, то id может быть либо следующим количеством строк, либо значением, определённым в свойстве key в colModel.
Если параметр определён как функция, то это функция должна вернуть значение, которые ведёт себя как id целевой таблицы. В функцию передаётся массив данных, который будет вставлен в строку целевой таблицы.
По умолчанию: true

Свойство: autoidprefix
Тип: string
Это свойство имеет смысл только в случае, когда свойство autoid установлено в true, и определяет префикс генерируемых id.
По умолчанию: "dnd_"

Свойство: dragcopy
Тип: boolean
Копирует исходную строку в целевую вместо перемещения (только для GridDnD).
По умолчанию: false

Используемые виджеты jQuery UI и другие плагины

jQuery UI core
jQuery UI draggable widget.
jQuery UI droppable widget.

Известные проблемы

Метод не работает в Safari и Chrome из-за бага в виджете draggable. Эффект в том, что весь текст выделяется под перемещаемой строкой.

Пример

В этом примеры будет создано три таблицы с идентификаторами: grid1, grid2 and grid3. Строки из grid1 можно будет перемещать в grid2 и grid3, и строки из grid2 можно будет перемещать только в grid1.

     // Создание grid1
    jQuery("#grid1").jqGrid({
        datatype: "local",
        height: 100,
        colNames: ['Id1', 'Name1', 'Values1'],
        colModel: [
           {name: 'id1', index: 'id',width: 100}, 
           {name: 'name1',index: 'name',width: 100},
           {name: 'values1',index: 'values',width: 200}
        ],
        caption: 'Grid 1',
        pager: '#pgrid1'
    });
     
    // Создание grid2
    jQuery("#grid2").jqGrid({
        datatype: "local",
        height: 100,
        colNames: ['Id2', 'Name2', 'Values2'],
        colModel: [
           {name: 'id2',index: 'id',width: 100},
           {name: 'name2',index: 'name',width: 100},
           {name: 'values2',index: 'values',width: 200}
        ],
        caption: 'Grid 2',
        pager: '#pgrid2'
    });
    // Создание grid3
    jQuery("#grid3").jqGrid({
        datatype: "local",
        height: 'auto',
        colNames: ['Id3', 'Name3', 'Values3'],
        colModel: [
           {name: 'id3',index: 'id',width: 100},
           {name: 'name3',index: 'name', width: 100},
           {name: 'values3',index: 'values',width: 200}
        ],
        caption: 'Grid 3',
        pager: '#pgrid3'
    });
     
    // Данные для grid1
    var mydata1 = [
        {id1:"1",name1:"test1",values1:'One'},
        {id1:"2",name1:"test2",values1:'Two'},
        {id1:"3",name1:"test3",values1:'Three'}
    ];
    // Данные для grid2
    var mydata2 = [
        {id2:"11",name2:"test11",values2:'One1'},
        {id2:"21",name2:"test21",values2:'Two1'},
        {id2:"31",name2:"test31",values2:'Three1'}
    ];
    // Данные для grid3
    var mydata3 = [
        {id3:"12",name3:"test12",values3:'One2'},
        {id3:"22",name3:"test22",values3:'Two2'},
        {id3:"32",name3:"test32",values3:'Three2'}
    ];
    // Добавление данных
    for (var i = 0; i <= mydata1.length; i++) {
        jQuery("#grid1").jqGrid('addRowData',i + 1, mydata1[i]);
        jQuery("#grid2").jqGrid('addRowData',i + 1, mydata2[i]);
        jQuery("#grid3").jqGrid('addRowData',i + 1, mydata3[i]);
    }
    // Соединяем grid1 с grid2 и grid3
    jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});
    // Соединяем grid2 с grid1
    jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});

// Создание grid1

jQuery("#grid1").jqGrid({

datatype: "local",

height: 100,

colNames: ['Id1', 'Name1', 'Values1'],

colModel: [

{name: 'id1', index: 'id',width: 100},

{name: 'name1',index: 'name',width: 100},

{name: 'values1',index: 'values',width: 200}

caption: 'Grid 1',

pager: '#pgrid1'

});

// Создание grid2

jQuery("#grid2").jqGrid({

datatype: "local",

height: 100,

colNames: ['Id2', 'Name2', 'Values2'],

colModel: [

{name: 'id2',index: 'id',width: 100},

{name: 'name2',index: 'name',width: 100},

{name: 'values2',index: 'values',width: 200}

caption: 'Grid 2',

pager: '#pgrid2'

});

// Создание grid3

jQuery("#grid3").jqGrid({

datatype: "local",

height: 'auto',

colNames: ['Id3', 'Name3', 'Values3'],

colModel: [

{name: 'id3',index: 'id',width: 100},

{name: 'name3',index: 'name', width: 100},

{name: 'values3',index: 'values',width: 200}

caption: 'Grid 3',

pager: '#pgrid3'

});

// Данные для grid1

var mydata1 = [

{id1:"1",name1:"test1",values1:'One'},

{id1:"2",name1:"test2",values1:'Two'},

{id1:"3",name1:"test3",values1:'Three'}

];

// Данные для grid2

var mydata2 = [

{id2:"11",name2:"test11",values2:'One1'},

{id2:"21",name2:"test21",values2:'Two1'},

{id2:"31",name2:"test31",values2:'Three1'}

];

// Данные для grid3

var mydata3 = [

{id3:"12",name3:"test12",values3:'One2'},

{id3:"22",name3:"test22",values3:'Two2'},

{id3:"32",name3:"test32",values3:'Three2'}

];

// Добавление данных

for (var i = 0; i <= mydata1.length; i++) {

jQuery("#grid1").jqGrid('addRowData',i + 1, mydata1[i]);

jQuery("#grid2").jqGrid('addRowData',i + 1, mydata2[i]);

jQuery("#grid3").jqGrid('addRowData',i + 1, mydata3[i]);

}

// Соединяем grid1 с grid2 и grid3

jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});

// Соединяем grid2 с grid1

jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});

Посмотреть результат работы этого примера

Цикл статей «Документация jqGrid на русском».

Следующая статья — «».
Предыдущая статья — «Интеграция jqGrid с jQuery UI».

Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Сортируемые колонки

Используемые виджеты jQuery UI и другие плагины:

Column Chooser

Свойства

Используемые виджеты jQuery UI и другие плагины

Сортируемые строки

Используемые виджеты jQuery UI и другие плагины

Известные проблемы

Таблица с изменяющимся размером

Используемые виджеты jQuery UI и другие плагины

Известные проблемы

Перетаскивание строк между таблицами

Используемые виджеты jQuery UI и другие плагины

Известные проблемы

Пример

Добавить комментарий Отменить ответ