0

在网格中，我有一个国家下拉列表和一个省/州下拉列表。当用户选择“国家/地区”下拉列表时，我需要获取列表以在其行中加载当前所选国家/地区的省/州。

我使用 dataUrl 从服务器（使用 MVC 3、.Net）获取我的列表。我在网格的列中编写了代码来定义 dataInit 编辑选项来更改 dataUrl 以包含我当前的国家 ID。但是，似乎在 dataInit 事件发生之前调用了 dataUrl。

更复杂的是，我创建了一个基本网格视图，它在整个应用程序中重复使用。这是必需的，因为我们在应用程序中有 30-60 个不同的网格。因此，每个网格的用户只定义列、它们的类型、编辑类型、格式等。基本网格视图只是动态生成 jqgrid（它使用 Vs.Net 的 MVC 3 框架中的 RAZOR 视图引擎编写）。

在我定义为具有依赖列的选择类型的每一列的剃须刀代码（basegrid）中，我为 dataInit 函数生成代码以获取该值并更新列定义的 dataUrl。

我的结论：

看来我的省/州列的 dataInit 方法是在调用 dataUrl 之后调用的（即在我调用服务器获取列表之后）。如果这是 dataInit 的正常行为，我需要一个不同的列事件方法。

要求：

1）我不能使用标准网格“BeforeEditCell”事件，因为我可能有多个选择，这可能取决于其他列。同样，我的 basegrid 的用户将在运行时确定依赖关系。（剃刀代码遍历每一列并生成网格语法）。

2) 我希望在调用 url 进行加载之前修改 dataUrl。我不想执行加载列表的调用

3) 我想避免将列表加载到 javascript 数组中。所以必须使用dataUrl。

这是声明的内容的片段。我删除了其他列，因为它们遵循更简单的设置，但在脚本中类似。

jQuery("#gridList").jqGrid({
    url: '/Home/HonourAwardGridData',
    datatype: "json",
    colNames: [
    'Country',
    'Province / State',
        ],
    colModel: [
{
name: 'Country',
index: 'Country',
width: 90,
sortable: true,
editable: true,
editrules: {
        edithidden: false,
required: false    },
        hidden: false,
                    edittype: 'select',
                    editoptions: {
                    dataEvents: [
                                 { type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
                                ],
                    dataUrl: '/Common/GetCountryValues?pageId=HonourAward',
                    buildSelect: BuildLookupEntitySelect
                    },
},
{
name: 'ProvinceState',
index: 'ProvinceState',
width: 90,
sortable: true,
editable: true,
editrules: {
        edithidden: false,
required: false    },
        hidden: false,
                    edittype: 'select',
                    editoptions: {
                    dataEvents: [
                                 { type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
                                ],
                    dataUrl: '/Common/GetProvinceValues?pageId=HonourAward&countryId={0}',
                        dataInit: function(elem) {
                                      var myGrid = $('#gridList');
                                      var selRowId = mygrid.jqGrid('getGridParam', 'selrow');
                                      var depColName = 'Country';
                                      var depColValue = mygrid.jqGrid('getCell', selRowId, depColName);
                                      var newDataUrl = '/Common/GetProvinceValues?pageId=HonourAward&countryId={0}';
                                      newDataUrl = newDataUrl.replace("{0}", depColValue);

                                      $("#grid").jqGrid('setColProp', depColName, {dataUrl: newDataUrl}); 
                                  },
                    buildSelect: BuildLookupEntitySelect
                    },
}
    ],
    rowNum: 200,
        cellEdit: true,
        cellSubmit: 'remote',
        cellurl: '/Home/EditHonourAwardGridData',
    multiselect: true,
    grouping: false,
    jsonReader: {
        root: "rows", //array containing actual data
        page: "page", //current page
        total: "total", //total pages for the query
        records: "records", //total number of records
        repeatitems: false,
        id: 'RecordId' //index of the column with the PK in it
    },
    toppager: true,
    shrinkToFit: false,
    rownumbers: false,
    autowidth: true,
    height: 'auto',
    autoencode: true,
    altRows : true,
    pager: '#gridPager',
    viewrecords: true,
    sortable: false, 
    afterEditCell: function (id, name, val, IRow, ICol) { 
            saveRow = IRow; 
            saveCol = ICol; 
        }
});
jQuery("#gridList").jqGrid('navGrid', '#gridPager', { search: false,
                                                      edit: true,
                                                      add: false,
                                                      del: false,
                                                      editfunc: function(id) { 
                                                            var row = jQuery("#gridList").jqGrid('getRowData', id);
                                                            var dialogTitle = 'Honours and Career Awards' + ' - ' + row['Name'];
                                                            LoadReportUpdateView('HonourAwardUpdate', dialogTitle, row.RecordId);
                                                      },
                                                      addfunc: function() { 
                                                            LoadReportAddView('HonourAwardAdd', 'Honours and Career Awards' + ' - Add New');
                                                      }
                                                    })
                          .navButtonAdd('#gridPager', {
                              caption: "Columns",
                              onClickButton: function () {
                                  ChooseColumns("#gridList", 'HonourAward', 'Select columns for Honours and Career Awards grid');
                              },
                              position: "last"
                          });
});

提前感谢您提供的任何帮助或指导。

4

1 回答 1

0

看了jqGrid代码，当使用dataUrl填充选择列时，代码总是会先调用url进行加载。如果成功，则绑定其事件。如果已定义，则调用 dataInit 然后绑定所有声明的“dataEvents”。因此，在调用 dataUrl 之前不可能更改它。

如果 jqGrid 在调用 url 之前执行 'dataInit' 会很好，但这可能会导致编辑敲大字。

我的解决方法是一个两步过程。

1) 声明的初始 dataUrl 被定义为调用参数值为 -1 的服务器（我们很快返回一个空选择。

2）在dataInit方法中，我手动调用带有动态值（国家的当前值）的'修改'url，然后调用buildSelect定义的方法将json结果转换为选择列表。（注意：当你看到'@'它的 C# 代码注入的 RAZOR 语法时）

var myGrid = $('#gridList');
var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
var depColName = '@column.PrimaryDependentColumnName';
var depColValue = myGrid.jqGrid('getCell', selRowId, depColName);
var newDataUrl = '@html.Raw(@column.SelectLoaderUrl)';
newDataUrl = newDataUrl.replace("-1", depColValue);

$.get(newDataUrl, function(data) {
    var values = BuildLookupEntitySelectJSON(data);
    var htmlValue = $(values).html();
    $(elem).empty();
    $(elem).append(htmlValue);
});

我希望在调用之前使用“preloadUrl”事件来更改 Url，因为它会使事情变得更容易和更高效。

再见！

吉姆

于 2012-10-06T00:57:51.870 回答