在jqGrid中单击单元格打开模式对话框

时间:2012-10-31 10:58:12

标签: asp.net-mvc jqgrid modal-dialog

我是jqGrid的新手。能否请你帮我解决这个问题。

我想在jqGrid中双击一个单元格时打开一个新的模式对话框。 每个单元格将打开一个不同的模态对话框,这取决于列,行组合。所以这必须动态决定。

我正在使用asp.net mvc视图显示在对话框中。

添加我正在处理的代码:(尚未格式化)

     $.ajax(
                {
                    type: "GET",
                    url: "/Forecast/GetColumnsAndData/",
                    data: "",
                    dataType: "json",
                    success: function (result) {
                        colN = jQuery.parseJSON(result.colNames);
                        colM = jQuery.parseJSON(result.colModel);
                        jQuery("#rowed2").jqGrid({
                            url: '/Forecast/GridData/',
                            datatype: 'json',
                            mtype: 'GET',
                            colNames: colN,
                            colModel: colM,
                            rowNum: 10,
                            rowList: [10, 20, 30],
                            viewrecords: true,
                            onCellSelect: function (rowid, iCol, cellcontent) {
                                //Need to add the code for modal dialog and criteria check
                            },
                            gridComplete: function () {
                                var ids = jQuery("#rowed2").jqGrid('getDataIDs');
                                for (var i = 0; i < ids.length; i++) {
                                    var cl = ids[i];
                                    be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"editrows('" + cl + "');\"  />";
                                    se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('" + cl + "', '','/Forecast/GridDataSave/');\"  />";
                                    ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('" + cl + "');\" />";
                                    jQuery("#rowed2").jqGrid('setRowData', ids[i], { act: be + se + ce });
                                }
                            },

                            caption: "Forecast Details"
                        });
                        jQuery("#rowed2").jqGrid('navGrid', "#prowed2", { edit: true, add: false, del: false });
                        jQuery("#rowed2").jqGrid('setGroupHeaders', {
                            useColSpanStyle: true,
                            groupHeaders: [
                                { startColumnName: 'Hours1', numberOfColumns: 2, titleText: '<center>October</center>' },
                                { startColumnName: 'Hours2', numberOfColumns: 2, titleText: '<center>November</center>' }
                              ]
                        });
                    },
                    error: function (x, e) {
                        alert(x.readyState + " " + x.status + " " + e.msg);
                    }
                });

1 个答案:

答案 0 :(得分:1)

你可以在jqGrid中使用jqGrid event for double click

ondblClickRow: function (rowId, iRow, iCol, e) {
    //new modal based on above
}