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。