免费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。