free-jqgridドラッグ＆ドロップが動作します。行をクリックすると、セル内のデータが強調表示されます

Question

ドラッグ＆ドロップで作業することはできません。 jqfrid1テーブルの行をクリックすると、クリックしているセルのデータが強調表示されます。私は全体の列をつかむことはできません。 バージョン4.13.6

<link href="~/Content/ui.jqgrid.css" rel="stylesheet" /> 
<link href="~/Content/font-awesome.min.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/free-jqGrid/jquery.jqgrid.min.js"></script> 




<script type="text/javascript"> 

    var data = @Html.Raw(@Model.jsonCls); 
    var MyQData = @Html.Raw(@Model.MyRpts); 

    $(document).ready(
    $(function() { 
     "use strict"; 
     $("#jqgrid1").jqGrid({ 
      url: '@Url.Action("List", "Home")', 
      datatype: "jsonstring", 
      iconSet: "fontAwesome", 
      colModel: [ 
       { name: "Tracis" , label: "Tracis", width:80}, 
       { name: "CrimeType", width:200}, 
       { name: "Supp", formatter: 'checkbox' ,width:30}, 
       { name: "Arrest" , formatter: 'checkbox', width:30}, 
       { name: "Type", formatter: 'string', width:85}, 
       { name: "Reported", formatter: 'string', width:100} //formatter:"date", formatoptions: { newformat: "mm/D/Y" } , 
      ], 
      cmTemplate: { editable: true }, 
      rowNum: 30,  // Total records to show at a time by default 
      loadonce: true, 
      rowList: [10, 20, 30, 40, 50], // For Paging 
      pager: true, 
      datastr: data, 
      rownumbers: true, 
      viewrecords: true, 
      autowidth: true, 
      hoverrows: true, 
      caption: "Unassigned" 
     }); 

     $("#jqgrid2").jqGrid({ 
      url: '@Url.Action("List", "Home")', 
      datatype: "jsonstring", 
      iconSet: "fontAwesome", 
      colModel: [ 
       { name: "Tracis" , label: "Tracis", width:80}, 
       { name: "CrimeType", width:200}, 
       { name: "Supp", formatter: 'checkbox' ,width:30}, 
       { name: "Arrest" , formatter: 'checkbox', width:30}, 
       { name: "Type", formatter: 'string', width:85}, 
       { name: "Reported", formatter: 'string', width:100} 
      ], 

      rowNum: 30,  // Total records to show at a time by default 
      loadonce: true, 
      rowList: [10, 20, 30], // For Paging 
      pager: true, 
      datastr: MyQData, 
      viewrecords: true, 
      autowidth: true, 
      rownumbers: true, 
      height: 'auto', 
      hoverrows: true, 
      caption: "My Queue" 
     }); 


     jQuery("#jqgrid1").jqGrid('gridDnD',{connectWith:'#jqgrid2'}); 
     jQuery("#jqgrid2").jqGrid('gridDnD',{connectWith:'#jqgrid1'}); 

    })); 

</script> 


@{ 
    ViewBag.Title = "List"; 
} 
<!-- import the included stylesheet for some (very basic) default styling --> 
<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" /> 
<h2>Report List:</h2><br /> 

<table> 
    <tr> 
     <td> 
      <table id="jqgrid1"></table> 

     </td> 
     <td style="background-color: black"> 

     </td> 
     <td> 
      <table id="jqgrid2"></table> 

     </td> 
    </tr> 

</table> 

Answer 1

私はドラッグ&ドロップ機能を提供し、あなたがjquery-ui.min.jsが含まれていることを表示されません。

jqGridは、基本機能のためjquery-ui.min.cssを必要とするが、sortable: trueようないくつかの他のオプションがドラッグ&ドロップ又は行を並べ替えるためにgridDnD等の方法に関して、列の順序を変更するために、jquery-ui.min.jsを必要としました。

jQuery UIのCSSとJSの両方が含まれていることを確認することをお勧めします。