我有一个带可排序属性的jqgrid，我可以拖放记录来改变序列。如果执行过滤搜索，那么我必须阻止拖放或重新排序操作
我得到的一个想法是通过在搜索后设置sortable：false来禁用拖放。
$grid.jqGrid('filterToolbar', {
searchOperators: true,
afterSearch: function(){alert("hi");
$grid.jqGrid('setGridParam',{sortable :false});
}
});
但这不起作用？此外，我想在没有过滤搜索时启用重新排序。
更新：我找到了解决此问题的方法。
afterSearch: function(){
var filters = JSON.parse($grid.getGridParam("postData").filters);
if(filters.rules.length)
{
$grid.jqGrid('sortableRows',{disabled: true});
}
else
{
$grid.jqGrid('sortableRows',{disabled: false});
}
}.
但不确定是不是正确。如果没有过滤器输入，如何启用sortableRows。
答案 0 :(得分：1)
方法sortableRows仅使用<tbody>上的jQuery UI Sortable（请参阅here）。所以可以使用
$grid.find(">tbody").sortable("disable");
禁用和
$grid.find(">tbody").sortable("enable");
重新启用sortableRows。要销毁可排序的，可以使用
$grid.find(">tbody").sortable("destroy");
The demo可用于查看结果。下面的代码段也是一样的
$(function () {
"use strict";
var mydata = [
{ id: "1", invdate: "2007-10-21", name: "test", note: "3note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-22", name: "test2", note: "3note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "3note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-14", name: "test4", note: "3note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "3note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "3note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "3note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "3note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-22", name: "test9", note: "3note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "3note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-28", name: "test11", note: "3note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "3note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
initDatepicker = function (elem) {
$(elem).datepicker({
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }},
$grid = $("#list");
$grid.jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "name", editrules: {required: true}, width: 65 },
{ name: "invdate", align: "center", sorttype: "date", width: 80,
formatter: "date",
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
{ name: "amount", template: numberTemplate, width: 75 },
{ name: "tax", template: numberTemplate, width: 52 },
{ name: "total", template: numberTemplate, width: 60 },
{name: "closed", align: "center", formatter: "checkbox", width: 70,
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{name: "ship_via", align: "center", formatter: "select", width: 105,
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "FE" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:Intim" } },
{ name: "note", sortable: false, search: false, edittype: "textarea", width: 60 }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
shrinkToFit: false,
height: "auto"
});
$grid.jqGrid("sortableRows");
$("#enableSortableRows").button().click(function () {
$grid.find(">tbody").sortable("enable");
});
$("#disableSortableRows").button().click(function () {
$grid.find(">tbody").sortable("disable");
});
$("#destroySortableRows").button().click(function () {
$grid.find(">tbody").sortable("destroy");
});
});.ui-jqgrid-hdiv { overflow-y: hidden; }<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<div style="float:left;font-size:11px" class="ui-widget">
<fieldset class="ui-widget-content ui-corner-all ui-jqgrid" style="float:left;margin:5px">
<legend class="ui-widget-header ui-corner-top">Enable/Disable/Destroy of sortableRows</legend>
<button type="button" id="enableSortableRows">Enable sortableRows</button>
<button type="button" id="disableSortableRows">Disable sortableRows</button>
<button type="button" id="destroySortableRows">Destroy sortableRows</button>
</fieldset>
</div>
<div style="clear:left">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>