jqGridのデータをDialogに表示する

概要

ボタンを押下することで、jqGridのデータを取得しDialogに表示します。
Dialogに表示したデータはjQuery UIのSelectableを適用します。
f:id:sh_yoshida:20130915110928p:plain

手順

1.Dialog用にdivタグを用意します。

divタグにIDを振ります。

<div id="documentDialog" title="Document"></div>

2.Dialogの初期設定を書きます。

初期状態では非表示に設定します。

$("#documentDialog").dialog({
    autoOpen: false,
    resizable: false,
    height: 'auto',
    width: 'auto',
    modal: true
});

3.SelectableのCSSを書きます。

#selectable .ui-selecting { 
  background: #8A2BE2; 
  color: #FFFFFF;   
} 

#selectable .ui-selected { 
    background: #FF00FF; 
    color: #FFFFFF; 
} 
	
#selectable { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
} 
	
#selectable li { 
	margin: 3px; 
	padding: 5px; 
}

4.jqGridに設置したオリジナルのボタンの処理でDialogを表示します。

$("#momoclo").jqGrid('navButtonAdd', "#pager", {
    caption: "",
    buttonicon: "ui-icon-document",
    title: "document",
    onClickButton: function () {
        $('#documentDialog')
            .empty()
            .append('<ul id="selectable" class="ui-selectable"></ul>');

        //jqGridより行IDを取得
        var ids = $('#momoclo').jqGrid('getDataIDs');

        var data;
        for (var i = 0; i < ids.length; i++) {
            //1行づつデータを取得
            data = $('#momoclo').jqGrid('getRowData', ids[i]);
            $('<li class="ui-widget-content">' + data.color + ':' + data.name + '</li>')
                .appendTo('#selectable');
        }
        $('#documentDialog').dialog('open');
        $('#selectable').selectable();
    }
});