【问题标题】:how to use jqgrid extraParam parameter of saveRow如何使用jqgrid的saveRow的extraParam参数
【发布时间】:2012-05-01 05:43:08
【问题描述】:

在一个单元格中,edittype 是使用如下键值对选择的。

 colModel: [
            {name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
            { name: 'ABC', index: 'ABC', width: '16%', editable: true, edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT"} },
            { name: 'Emailid', index: 'Emailid', width: '16%', editable: true, sortable: true },
            ],

现在添加新行时,如果我为 ABC 列选择 FedEx,它会将 FE 发送到 EditURL Link 而不是 FedEX 所以我想要使用 extraParam 将 FEDEX 发送到 EditURL。

所以请任何人告诉我如何实现它。

为此,我的代码如下

更新代码

var grid = jQuery("#list5").jqGrid({
        url: '/home1/GetUserData',
        datatype: "json",
        mtype: "POST",
        colNames: ['Code', 'LoginID', 'Emailid'],
        colModel: [
                        {name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
                        { name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
                        { name: 'Emailid', index: 'Emailid', width: '16%', editable: true, edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT"} },
                      ],
        rowNum: 10,
        autowidth: true,
        height: '100%',
        rowList: 10,
        pager: $("#pager2"),
        editurl: "/home1/EditUserData",
        onSelectRow: function (id) {
            if (id && id !== lastsel2) {
                if (id == "new_row") {
                    grid.setGridParam({ editurl: "/home1/InsertUserData" });
                }
                else {
                    grid.setGridParam({ editurl: "/home1/EditUserData" });
                }
                jQuery('#list5').restoreRow(lastsel2);
                jQuery('#list5').jqGrid('editRow', id, true, pickdates);
                $("#list5_ilsave").addClass("ui-state-disabled");
                $("#list5_ilcancel").addClass("ui-state-disabled");
                $("#list5_iladd").removeClass("ui-state-disabled");
                $("#list5_iledit").removeClass("ui-state-disabled");
                lastsel2 = id;
            }
        },
        caption: "Simple data manipulation"
    });
    jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
    jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true, editParams: {extraparam: XYZ()}});
});

function XYZ()
{
  // from here i want to return the text of combo of selected row.
}

更新 Oleg 的代码

var grid = jQuery("#list5"),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function (id) {
            editingRowId = id;
        },
        afterrestorefunc: function (id) {
            editingRowId = undefined;
        },
        extraparam: 
            // we get the text of selected option from the column
            // 'Emailid' and include the data as additional
            // parameter 'EmailidText'
           // EmailidText: function () {
             //   return $("#" + editingRowId + "_Emailid>option:selected").text();
            //}
// **my changes here bind ABC Function which return key , value pair of object** IS THIS POSSIBLE
           function () {
               ABC(); 
            }

    };

grid.jqGrid({
    url: '/home1/GetUserData',
    datatype: "json",
    ...
    onSelectRow: function (id) {
        var $this = $(this), gridIdSelector = '#' + $.jgrid.jqID(this.id);
        $this.jqGrid('setGridParam', {
            editurl: (id === "new_row" ?
                          "/home1/InsertUserData" :
                          "/home1/EditUserData")
        });
        if (editingRowId !== id) {
            $(gridIdSelector + "_iledit").click();
        }
    }
});
$grid.jqGrid('navGrid', '#pager',
    { edit: false, add: false, search: false, refresh: false},
    {}, {}, { url: '/home1/DeleteUserData' });

// inlineNav has restoreAfterSelect: true per default so we don't need to call
// restoreRow explicitly
$grid.jqGrid('inlineNav', '#pager',
    { edit: true, add: true, editParams: myEditParam,
        addParams: {addRowParams: myEditParam } });

【问题讨论】:

  • 能够帮助您了解如何使用内联编辑?非常重要。您使用formatter: 'actions' 还是使用inlineNav 或直接拨打saveRow。在所有情况下,您都会有一些其他的实现。
  • Oleg 我已经更新了我的代码,无论如何我正在使用内联编辑。

标签: jqgrid


【解决方案1】:

代码可能如下

var grid = jQuery("#list5"),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function (id) {
            editingRowId = id;
        },
        afterrestorefunc: function (id) {
            editingRowId = undefined;
        },
        extraparam: {
            // we get the text of selected option from the column
            // 'Emailid' and include the data as additional
            // parameter 'EmailidText'
            EmailidText: function () {
                return $("#" + editingRowId + "_Emailid>option:selected").text();
            }
        }
    };

grid.jqGrid({
    url: '/home1/GetUserData',
    datatype: "json",
    ...
    onSelectRow: function (id) {
        var $this = $(this), gridIdSelector = '#' + $.jgrid.jqID(this.id);
        $this.jqGrid('setGridParam', {
            editurl: (id === "new_row" ?
                          "/home1/InsertUserData" :
                          "/home1/EditUserData")
        });
        if (editingRowId !== id) {
            $(gridIdSelector + "_iledit").click();
        }
    }
});
$grid.jqGrid('navGrid', '#pager',
    { edit: false, add: false, search: false, refresh: false},
    {}, {}, { url: '/home1/DeleteUserData' });

// inlineNav has restoreAfterSelect: true per default so we don't need to call
// restoreRow explicitly
$grid.jqGrid('inlineNav', '#pager',
    { edit: true, add: true, editParams: myEditParam,
        addParams: {addRowParams: myEditParam } });

【讨论】:

  • Oleg:很好的解决方案,这正是我想要的。非常感谢您挽救了我的一天。
  • Oleg:这里我们将函数绑定到EmailidText,我们不能将函数绑定到myEditParam对象的extraparam,所以它会动态地返回对象的键值对列表。
  • @Meraj:抱歉,我不明白你的意思。您能否重新表述您的问题以更清楚地描述您想要什么?
  • oleg:很抱歉这个模棱两可的问题,我已经更新了你提供给我的代码,不管它是否可能。我试过了,但没有成功,所以有没有其他方法。
  • @Meraj:我不确定我是否理解您希望通过extraparam 返回的“键、值对”的来源。如果你有一些带有命名控件的表单,你可以使用$.serializeArray:extraparam: { formData: function () { return $("#myForm").serializeArray(); } }Another answer 显示从serializeArray 返回的数据可以在发布前重新格式化。你可以使用这个想法来重新格式化extraparam,就像我为postData展示的一样。我希望这是你问的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-09-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多