代码之家 › 专栏 › 技术社区 › gurun8

jqGrid禁用可排序行

jqgrid jquery-ui

gurun8 · 技术社区 · 14 年前

我正在尝试禁用网格中的sortablerows功能。我希望能够打开/关闭sortablerows功能。启用该功能非常简单:

jQuery("#list").jqGrid('sortableRows', {
     update: function(event, ui) { updateOrder() }
});

但事实证明,禁用该功能有点困难。我咨询过UI集成,其中 sortableRows

http://jqueryui.com/demos/sortable/

jQuery("#list").jqGrid('sortableRows', {disabled: true});

上面的代码只是禁用了行。所以我搬到了 destroy

jQuery("#list").jqGrid('sortableRows', {destroy: true});

但那没用。根据文件方法似乎正是我所需要的,所以可能我的语法是错误的,但我似乎无法让它工作。

有人有过同样的经历吗?

3 回复 | 直到 14 年前

gurun8 13 年前

我花了一段时间才弄明白这一点,但我明白了,而且很简单。这就是你需要做的:

$("#list tbody").sortable("destroy");

我最初使用jqueryui可排序文档的直觉是正确的。我的语法不是。我翻阅了jqgrid JS文件发现:

a("tbody:first", i).sortable(b)

这就为我指明了正确的方向。看来t车身是整个车身的铰链销。

不是说有人在乎,但我认为我应该分享,以防别人有类似的问题,我的解决方案不是100%适合他们。

不管怎样,谢谢你们的帮助。任务完成了。

Community CDub 7 年前

您应该定义一个伪CSS类,比如

.unsortable{}

sortableRows jqGrid替换默认值的方法 items: '.jqgrow' 参数

jQuery("#list").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});

setRowData 方法 jqGrid 或者打电话 addClass 方法 jQuery 直接:

jQuery("#list").setRowData ('C28011', false, 'unsortable');
jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable');

(添加一个代码示例):在阅读了您的评论之后,我认为最好在这里发布一个代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
    <title>Demonstration of disabling sortableRows on some jqGrid rows</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/jquery.jqGrid.min.js"></script>

    <style type="text/css">
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #sortable li span { position: absolute; margin-left: -1.3em; }
        .unsortable {}
    </style>

    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function() {
            jQuery("#sortable").sortable({ items: 'li:not(.unsortable)'});
            jQuery("#sortable").disableSelection();

            jQuery("#sortrows").jqGrid({
                datatype: 'local',
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', width:55},
                    {name:'invdate',index:'invdate', width:90},
                    {name:'name',index:'name asc, invdate', width:100},
                    {name:'amount',index:'amount', width:80, align:"right"},
                    {name:'tax',index:'tax', width:80, align:"right"},
                    {name:'total',index:'total', width:80,align:"right"},
                    {name:'note',index:'note', width:250, sortable:false}
                ],
                rowNum:10,
                width:700,
                rowList:[10,20,30],
                pager: '#psortrows',
                sortname: 'invdate',
                viewrecords: true,
                sortorder: "desc",
                caption:"Sortable Rows Example"
            });
            jQuery("#sortrows").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});

            var myData = [
                {id: "11", invdate: "2007-10-06", name: "Client 1", amount: "600.00",  tax:"120.00", total: "720.00", note: "not sortable"},
                {id: "9",  invdate: "2007-10-06", name: "Client 1", amount: "200.00",  tax:"40.00", total: "240.00",  note: "not sortable"},
                {id: "5",  invdate: "2007-10-05", name: "Client 3", amount: "100.00",  tax:"0.00", total: "100.00",   note: "not sortable"},
                {id: "7",  invdate: "2007-10-05", name: "Client 2", amount: "120.00",  tax:"12.00", total: "134.00",  note: "no tax at all"},
                {id: "6",  invdate: "2007-10-05", name: "Client 1", amount: "50.00",   tax:"10.00", total: "60.00",   note: ""},
                {id: "4",  invdate: "2007-10-04", name: "Client 3", amount: "150.00",  tax:"0.00", total: "150.00",   note: "no tax"}
            ];

            for (var i = 0; i < myData.length; i++) {
                jQuery("#sortrows").addRowData(myData[i].id, myData[i]);
            }

            jQuery("#sortrows").setRowData ('11', false, 'unsortable');
            jQuery("#sortrows").setRowData ('9', false, 'unsortable');
            jQuery("#5",jQuery("#sortrows")[0]).addClass('unsortable');
        });
    //]]>
    </script>
</head>

<body>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default unsortable"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 (not sortable)</li>
    <li class="ui-state-default unsortable"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 (not sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7 (sortable)</li>
</ul>

</div>

<table id="sortrows"></table>
<div id="psortrows"></div>

</body>
</html>

在这段代码中,我首先使用标准的jQuery sortable功能来允许只对选定的项进行排序。比我在jqGrid里做的还要多。你可以在这里看到这个例子 http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm . 因此,在一行中添加一个伪类“unsortable”就意味着禁用了“sortable”功能。正在删除上的“可排序”类开关。您可以随时为选定的网格行或所有网格行执行此操作( jQuery("tr",jQuery("#list")[0]).addClass('unsortable'); ).

你唯一不应该忘记的是:你应该打电话 设置行数据 添加类 在网格中添加数据之后,例如 loadComplete

更新2 :参见 the answer 它描述了如何对网格的特定行禁用排序。它使用了jqGrid和jqueryui的最新版本中存在的可能性。

ryziek 13 年前

正如古伦8所写:

 $("#list tbody").sortable("destroy");

这很有效。

$("tbody:first","#list").enableSelection();