jqGrid TreeGrid不向服务器发送其他数据

时间:2012-12-17 11:23:27

标签: jquery jqgrid treegrid

我有一个jqGrid Treegrid定义如下:

$('#MyGrid').jqGrid({
    colNames: ['Id','Nome','Nivel','Combo',''],
    colModel: [
        { hidden: true, name: 'Id' },
        { editable: true, name: 'Nome' },
        { hidden: true, name: 'Nivel' },
        { name: 'Combo', editable: true, edittype: 'select',
            editoptions: {
                buildSelect: createSelectList ,
                dataUrl: '/Home/GetCombo' // <-- to this controller, I want
                    // to send the id of the row edited to load custom items
                    // in select object
            }}, 
        { formatter: 'actions', formatoptions: { keys: true },
            resizable: false, search: false, sortable: false,
            width: 60, viewable: false, name: 'actions' }
    ],
    cellEdit: true,
    url: '...',
    datatype: 'json',
    editurl: '...',
    jsonReader: {
        repeatitems: false,
        id: 'Id',
        subgrid: { repeatitems: false }
    }, 
    mtype: 'POST',
    gridComplete: function() { myOnGridComplete(); },
    ajaxSelectOptions: {
        data: {
            tempid: function () {
                // !!! the next line always returns null
                return $('#MyGrid').jqGrid('getGridParam', 'selrow');
            }
        }
    }, 
    prmNames: { npage: 'npage' }, 
    rowNum: -1,
    ExpandColClick: true,
    ExpandColumn: 'Nome',
    treeGrid: true,
    treeGridModel: 'adjacency',
    width: 700,
    height: '100%'
});

我的目标是将当前行ID发送到服务器,但是当我使用 $('#MyGrid')。jqGrid('getGridParam','selrow')我总是得到一个null值。

我已经阅读过这些帖子,但没有一个能解决我的问题:

任何sugestions?

事先提前!

更新1:

TreeGrid绑定没问题。真正的问题是当我单击叶节点中的编辑按钮时。在这种情况下,我想将其他数据发送到服务器。

我尝试使用ajaxSelectOptions完成此操作,但此命令始终返回null:$('#MyGrid').jqGrid('getGridParam', 'selrow')

解决方法

这是我在Oleg的帮助之前做的一个解决方法:

第1步:在HTML

中创建隐藏字段

步骤2:在myOnGridComplete函数中,我将click事件设置为编辑按钮:

function onGridAjusteDTOComplete()
{
    $('#MyGrid').find('span.ui-icon-pencil').each(function() {
        $(this).click(function(){
            var rowID = $(this).parents('tr').attr('id');
            // !!! the next commented line not work in my case
            // $('#MyGrid').jqGrid('setSelection', therowid );
            $('#myHiddenField').val(rowID); // <-- this works
        });
    });
}

第3步:从rowID

中的隐藏字段中获取ajaxSelectOptions
ajaxSelectOptions: "{type: 'GET', contentType: 'application/json; charset=utf-8',dataType: 'json',cache: false, async:false, data: {id: function () { return $('#myHiddenField').val(); }}}"

解决方案

请参阅以下Oleg提供的解决方案。这太棒了。谢谢Oleg。

1 个答案:

答案 0 :(得分:0)

我不确定我是否正确理解您的问题。 TreeGrid在加载子节点期间发送自动父节点的id。关于将发送到服务器的nodeidparentidn_level参数,请参阅the documentation。所以我不明白为什么你需要另外向服务器发送当前所选行(selrow)的id。

更新:现在我了解您描述的问题的原因。这是一个非常有趣的问题,可能会有其他人。

真正的解决方案是更改jqGrid的代码以支持一些回调函数,该函数可以构建data调用中使用的$.ajax参数,构建<select>。对jqGrid原始代码的最简单修改就是插入行

var rowid = $.jgrid.stripPref($t.p.idPrefix,
        String(options.id).substring(0, String(options.id).length - String(options.name).length - 1));
the line代码行之前

将调用带有$.ajax的{​​{1}}。此外,还需要在dataUrl中添加一个参数:

$.ajax

在进行此类更改后,可以使用

data: $.isFunction(ajaxso.postData) ?
    ajaxso.postData.call($t, rowid, String(options.name), vl) :
    ajaxso.postData,

The demo证明该方法有效。您可以在Fiddler,Firebug或Developer Tools中看到选项ajaxSelectOptions: { postData: function (rowid, colName, value) { return { id: rowid }; } } 将真正发送到URL。我稍后会将相应的建议发布到trirand(我想对更常见的情况做一些额外的改进)

如果您需要使用当前版本的jqGrid实现解决方案,则可以执行以下操作。您可以“子类化”执行id请求的方法$.jgrid.createEl。实施也很简单:

$.ajax

The next demo证明了这一点。

更新2 :我发布了the pull request以支持var originalCreateEl = $.jgrid.createEl, createElementOptions; $.extend($.jgrid, { createEl: function (eltype, options, vl, autowidth, ajaxso) { if (options.dataUrl) { createElementOptions = options; } return originalCreateEl.call(this,eltype, ptions,vl,autowidth,ajaxso); } }); $('#MyGrid').jqGrid({ ... ajaxSelectOptions: { data: { id: function () { var id = createElementOptions.id, colName = createElementOptions.name; if (typeof id !== "string" || typeof colName !== "string") { return null; } return id.substring(0, id.length - colName.length - 1); } } } }); 作为postData ajaxSelectOptions`的属性。该请求现在已提交(请参阅here)。所以jqGrid的下一个版本(更高版本为4.4.1)将具有“开箱即用”的功能。