如何获得选中的行ID?

时间:2012-08-14 10:03:23

标签: javascript asp.net jqgrid checkbox

我正在使用jqGrid,并且我添加了一个复选框列,我希望能够获取已检查的行,以便我可以使用它们调用服务器...

我的jqGrid代码:

<script type="text/javascript">
    $(function () {
        $("#UsersGrid").jqGrid({
            url: "Handler.ashx",
            datatype: 'json',
            height: '100%',
            width: '500',
            colNames: [' ', 'ref#', 'Module', 'TT#', 'AssignedOn', 'TrialNo'],
            colModel: [
                    { name: ' ', index: 'ChkBox', width: 16, sortable: false, editable: true, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
                    { name: 'ref#', width: 50, sortable: true },
                    { name: 'Module', width: 50, sortable: true },
                    { name: 'TT#', width: 110, sortable: true },
                    { name: 'AssignedOn', width: 110, sortable: true },
                    { name: 'TrialNo', width: 50, sortable: true }
                ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#UsersGridPager',
            sortname: ' ',
            viewrecords: true,
            sortorder: 'asc'
            //caption: "Cases"
        });

        $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false });
</script>

提前致谢...

2 个答案:

答案 0 :(得分:1)

您不必手动添加复选框列。我是这样做的:

  1. 指定editurlmultiselect选项:

    $("#UsersGrid").jqGrid({
      // The grid will send modification data to this url
      //     
      editurl: "url which will handle the edit/delete operations",
      // This ensures there will be a checkbox column in your grid
      //
      multiselect: true,
      ...
    });
    
  2. 为修改操作提供处理程序(响应editurl请求)。就我而言,它是一个带有此签名的操作方法:

    public ActionResult EditItems(string id, string oper, string source, string target)
    {
        // id: list of IDs of the selected items (e.g. "1234,5678")
        // oper: the requested operation ("edit" or "del", if you use the standard ones)
        // source, target: in case of the "edit" operation, these are the new values of the respective columns. I.e. these parameters are model-specific (I have "source" and "target" columns in my grid)
    }
    

答案 1 :(得分:1)

你应该更好地多选:是的,因为我可以看到你用复选框实现的功能是选择多行。

这是它对你有用的方式。 1.在jqgrid参数中进行多选:true。

  1. 为您的html添加一个按钮
  2. button type =“button”value =“submit”id =“clickMe”&gt;提交/按钮&gt; //正确启动和关闭标签。

    1. 现在,在此按钮的click事件中,获取所选行的数据并向服务器发出一个ajax请求。
    2. $( '#clickMe')。点击(函数(){ var selRowIds = $('#grid')。jqGrid('getGridParam','selarrrow');

      if(selRowIds.length>0)
                     {
                         for( var i=0;i<selRowIds.length;i++){
                 var ref#=getCellValue(selRowIds[i],'ref#');
                 var Module=getCellValue(selRowIds[i],'Module');
                 var TT#=getCellValue(selRowIds[i],'TT#');
      
      
                 var AssignedOn=getCellValue(selRowIds[i],'AssignedOn');
                     var TrialNo=getCellValue(selRowIds[i],'TrialNo');
      
                     $.ajax({
                     type: 'POST',
                     url: '@Url.Action("editMe")',
                     contentType: 'application/json; charset=utf-8',
                     data:JSON.stringify({ref#: ref#, Module:Module,TT#:TT#,AssignedOn:AssignedOn,TrialNo:TrialNo}),
                     dataType: "json",
                     success:function(){
                     $('#grid').trigger("reloadGrid");
                      },
      
                      error: function () {
                             alert("error");
                          }
                      }); 
                      }
                      }
                 });
      

      ,你的控制器应该是这样的

       public ActionResult editMe(string ref#, string Module, string TT#, string AssignedOn, string TrialNo)
              {
                }
      

      我假设你有所有列的dataType作为字符串,它们都是可编辑的:true(你可以用colModal来提及。所以如果只有Module,AppliedOn是可编辑的,那么你只能得到这两个值点击按钮。根据您的需要,您可以更改代码。