free
free-jqgrid现在可以拖放工作。(free-jqgrid drag and drop not working. click on row highlights data in cells)我似乎无法获得拖放工作。 当我点击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>I don't seem to be able to get the drag and drop to work. When I click on a row in the jqfrid1 table, it just highlights the cell's data that I am clicking on. I cannot seem to grab the whole row. Version 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> 最满意答案我没有看到你包含jquery-ui.min.js ,它提供了拖放功能。
jqGrid需要jquery-ui.min.css来实现基本功能,但是其他一些选项如sortable: true可以重新排列列方面的拖放操作或像gridDnD这样的方法重新排序行,这是jquery-ui.min.js 。
我建议你确认你已经包含了jQuery UI的CSS和JS。
I don't see that you included jquery-ui.min.js, which provides Drag&Drop functionality.
jqGrid requires jquery-ui.min.css for the base functionality, but some other options like sortable: true to reorder columns with respect of Drag&Drop or the methods like gridDnD to reorder the rows, required jquery-ui.min.js.
I suggest you that you verify that you have included both CSS and JS of jQuery UI.