free-jqgrid 이제 드래그 앤 드롭이 작동합니다. 행을 클릭하면 셀의 데이터가 강조 표시됩니다.

Question

드래그 앤 드롭으로 작업 할 수있는 것처럼 보입니다. jqfrid1 테이블의 한 행을 클릭하면 클릭하는 셀의 데이터가 강조 표시됩니다. 나는 전체 행을 잡을 수 없습니다. 난 당신이 끌어 & 드롭 기능을 제공 jquery-ui.min.js을 포함 것을 볼 수 없습니다 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

버전.

있는 jqGrid는 기본 기능에 대한 jquery-ui.min.css 필요하지만 sortable: true 같은 몇 가지 다른 옵션 드래그 & 드롭 또는 행 순서를 gridDnD 같은 방법과 관련하여 열을 다시 정렬, jquery-ui.min.js이 필요합니다.

jQuery UI의 CSS와 JS를 모두 포함했는지 확인하는 것이 좋습니다.