free-jqgrid拖放不起作用。单击行突出显示单元格中的数据

时间:2017-02-17 16:29:38

标签: jquery jqgrid free-jqgrid

我似乎无法拖延工作。当我点击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>

1 个答案:

答案 0 :(得分:0)

我没有看到你提供jquery-ui.min.js,它提供了拖放功能。

jqGrid需要jquery-ui.min.css作为基本功能,但是其他一些选项(如sortable: true)可以重新排序Drag&amp; Drop中的列或者gridDnD等方法来重新排序行,需要{ {1}}。

我建议你确认你已经包含了jQuery UI的CSS和JS。