-1

私は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>

前もって感謝します...

4

2 に答える 2

1

チェックボックス列を手動で追加する必要はありません。これが私がそれを行う方法です：

  1. editurlおよびmultiselectオプションを指定します。

    $("#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)
}
于 2012-08-14T10:33:21.837 に答える
1

チェックボックスを使用して実装していることがわかる機能は、複数の行を選択することであるため、multiselect:true を使用することをお勧めします。

これがどのように機能するかです。1. jqgrid パラメータで multiselect:true を作成します。

  1. このようにhtmlにボタンを1つ追加します

button type="button" value="submit" id="clickMe" >Submit /button> //タグを適切に開始および終了します。

  1. このボタンのクリック イベントで、選択した行のデータを取得し、サーバーに対して 1 つの ajax リクエストを行います。

$('#clickMe').click(function(){ 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 が文字列であり、それらがすべて editable:true であると仮定しています (これは colModal で言及できます。したがって、Module のみの場合、AppliedOn は editable true であるため、ボタン クリックでこれら 2 つの値のみを取得できます。必要に応じて、コードを変更できます。

于 2012-08-14T12:31:36.667 に答える