jqgrid中具有自定义函数调用的超链接/按钮

debugcn 发表于 Dev

克里希纳·萨玛（Krishna Sarma）

我想在jqgrid的每一行中添加一个超链接/按钮，以触发自定义javascript函数。厌倦了各种考验。

jQuery('#ProductListGrid').jqGrid({
    url: '/Product/ProductListGrid',
    datatype: 'json',
    multiselect: true,
    height: 250,
    autowidth: true,
    mtype: 'GET',
    loadComplete: addlinks,
    colNames: ['ProductId', 'ProductName', 'edit'],
    colModel: [
      { name: 'ProductId', index: 'ProductId',key:true, width: 70, hidden: true, editable: true, size: 5 },
      { name: 'ProductName', index: 'ProductName', width: 70, editable: true },
      { name: 'edit', index: 'edit', width: 70},

    ],
    pager: jQuery('#ProductListGrid_pager'),
});
function addlinks() {
    var ids = jQuery("#ProductListGrid").getDataIDs();
    alert(ids);
    for (var i = 0; i < ids.length; i++) {
        be = "<a href='#' style='height:25px;width:120px;' type='button' title='Slet' onclick=\"ff()\" >Slet</>";
        jQuery("#ProductListGrid").jqGrid('setCell', ids[i],'edit','', { act: be });
    }
    //for (var i = 0; i < ids.length; i++) {
    //    jQuery("#ProductListGrid").setCell(i, 'edit', '<a href="#">edit</edit>');
    //}
}
function ff()
{
    alert("hi");
}

addlinks中的代码正在执行，但是该列中没有任何内容。我也尝试使用自定义格式，但无法显示自定义文本“编辑”，并且单击链接不会触发js方法。

布山卡瓦德卡

您需要为以下编辑列调用格式化程序：

添加formatter: addLink到最后一列：

colModel: [
      { name: 'ProductId', index: 'ProductId',key:true, width: 70, hidden: true, editable: true, size: 5 },
      { name: 'ProductName', index: 'ProductName', width: 70, editable: true },
      { name: 'edit', index: 'edit', width: 70,formatter: addLink},

    ]

添加javascript功能：

function addLink(cellvalue, options, rowObject) 
{
  //to get row Id
  alert(options.rowId);
  // to get product Id
  alert(rowObject.ProductId);
  return "<a href='#' style='height:25px;width:120px;' type='button' title='Slet' onclick=\"ff()\" >Slet</a>";
}

有关格式化程序的更多信息，请参见此处。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。