Jquery Grid插件获取选定的行ID

时间:2013-08-07 22:34:48

标签: jquery asp.net-mvc asp.net-mvc-3 jqgrid

我正在使用jqueryGrid插件。我想实现简单的编辑功能。用户将使用编辑按钮单击jquery网格列。然后他们将重定向到编辑视图。我想这样做。但我必须得到选定列的id值。所以我的代码如下所示:

 <script type="text/javascript">
    jQuery(document).ready(function () {
        $('#list').width(200);
        jQuery("#list").jqGrid({
            url: '/Credential/JqueryGridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Sıra', 'Resim', 'İsim', 'Başlık', 'Açıklama', 'Boyut',  'Oluşturulma Tarihi', 'Güncellenme Tarihi'],
            colModel: [
                 { name: 'ID', index: 'ID', width: 10, align: 'left' },
                { name: 'Order', index: 'Order', width: 10, align: 'center' },
              { name: 'Image', index: 'Image', width: 50, height: 25, align: 'center'  },
              { name: 'Name', index: 'Name', width: 40, align: 'left', search: true,  stype: 'text', searchoptions: { sopt: ['eq', 'ne'] } },
              { name: 'Title', index: 'Title', width: 40, align: 'left' },
              { name: 'Description', index: 'Description', width: 100, align: 'left' },
              { name: 'Size', index: 'Size', width: 20, align: 'center' },
              { name: 'CreatedDate', index: 'CreatedDate', width: 20, align: 'center'  },
              { name: 'UpdatedDate', index: 'UpdatedDate', width: 20, align: 'center'  }],
            pager: jQuery('#pager'),
            editurl: '/Credential/JqueryGridData/?id=44',
            loadtext: 'Yükleniyor lütfen bekleyiniz',
            rowNum: 17,
            rowList: [17, 34, 53, 70],
            sortname: 'Id',
            width: 1100,
            height: 400,
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            caption: 'Referans Listesi'
        });
        $("#list").jqGrid('navGrid', '#pager',
 { /* parameters */
     edit: false, add: false, del: false, searchtext: 'Ara', refreshtext: 'Yenile'
 },
 { /* edit options */ },
 { /* add options */ },
 { /* delete options */ },
 { /* search options */
     multipleSearch: false,
     multipleGroup: false,
     showQuery: false,
     top: 190,
     left: 200,
     caption: "Ara",
     closeAfterSearch: true,
     sopt: ['cn'],
 },
  { /* view options */ }
);
        $('#pager_left').append('<table cellspacing="0" cellpadding="0" border="0"  class="ui-pg-table navtable" style="float:left;table-layout:auto;"><tbody><tr><td  class="ui-pg-button ui-corner-all" title="Yeni" id="search_list2"><div class="ui-pg-div"><a  href="/Management/Credential/Create/"><span class="ui-icon ui-icon-plus"></span></a></div> </td></tr></tbody></table>');
        $('#pager_left').append('<table cellspacing="0" cellpadding="0" border="0"  class="ui-pg-table navtable" style="float:left;table-layout:auto;"><tbody><tr><td  class="ui-pg-button ui-corner-all" title="Düzenle" id="search_list2"><div class="ui-pg- div"><a href="/Management/Credential/Edit/5"><span class="ui-icon ui-icon-pencil"></span>   </a></div></td></tr></tbody></table>');
    });
</script>

我在这行添加了编辑按钮:

  $('#pager_left').append('<table cellspacing="0" cellpadding="0" border="0" class="ui-  pg-table navtable" style="float:left;table-layout:auto;"><tbody><tr><td class="ui-pg-button   ui-corner-all" title="Düzenle" id="search_list2"><div class="ui-pg-div"><a   href="/Management/Credential/Edit/5"><span class="ui-icon ui-icon-pencil"></span></a></div>  </td></tr></tbody></table>');

在这一行&#34; / Management / Credential / Edit / 5&#34;我必须发送到控制器的选定行ID。我应该做些什么 ?

2 个答案:

答案 0 :(得分:0)

首先,您必须将“editable:true”设置为您要编辑的列。

然后添加以下代码:

onSelectRow: function(id,e){
 jQuery('#list').editRow(id)
}

并且您无法在editurl中发送参数。你有一个回调“extraparam”用于内联编辑以发送参数。 参考[this] http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

答案 1 :(得分:0)

使用当前方法,您必须先选择一行,然后单击以进行编辑,然后选择。这涉及更多。

另一种方法是使用格式化程序在每行上添加编辑。

在下面添加列列表     {name:'Edit',index:'Edit',width:20,align:'center',formatter:editFormatter}

添加到javascript     function editFormatter(cellvalue,options,row){             var id = row [“Id”];             返回'';         }