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。