【问题标题】:jqGrid disable sortablerowsjqGrid 禁用 sortablerows
【发布时间】:2023-03-23 15:44:01
【问题描述】:

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

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

但事实证明,禁用该功能有点困难。我已经查阅了 UI 集成,其中 sortableRows 记录在 jqGrid Wiki 中:

www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods

发现“该方法完全兼容jQuery UI sortable widget”。所以我冒险查看 jQuery UI 可排序文档并找到了这个:

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

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

上面的代码只是禁用了行。所以我转向destroy 方法:

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

但这并没有做任何事情。根据文档,destroy 方法似乎正是我所需要的,所以也许我的语法是错误的,但我似乎无法让它工作。

有人遇到过同样的问题吗?

【问题讨论】:

    标签: jquery-ui jqgrid


    【解决方案1】:

    我花了一段时间才弄明白这个,但我明白了,而且很简单。这就是您需要做的所有事情:

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

    我最初的直觉是转向 jQuery UI 可排序文档。我的语法不是。我翻遍了jqgrid JS文件,发现了这个:

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

    这为我指明了正确的方向。看来 tbody 是整个混乱的铰链销。

    没有人关心,但我想我应该分享一下,以防其他人遇到类似问题,而我的解决方案不是 100% 适合他们。

    任何人,谢谢大家的帮助。任务完成。

    【讨论】:

    • 谢谢。我喜欢你的方法,因为它用一行代码完成所有事情,但确实牺牲了 Oleg 的独立行粒度。
    【解决方案2】:

    你应该定义一个类似的虚拟 CSS 类

    .unsortable{}
    

    然后调用jqGrid的sortableRows方法替换默认的items: '.jqgrow'参数

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

    现在您应该只将“不可排序”类添加到您不希望其可排序的行中。让我们在网格行中有 id 为“C28011”和“C28015”。然后,您可以使用jqGridsetRowData 方法或直接调用jQueryaddClass 方法:

    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 可排序功能来允许仅对选定的项目进行排序。比我在 jqGrid 内部做同样的事情。你可以在这里看到这个例子http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm。因此,在一行中添加一个“不可排序”的虚拟类会禁用“可排序”功能。移除此类开关“可排序”。您可以随时对选定的网格行或所有 (jQuery("tr",jQuery("#list")[0]).addClass('unsortable');) 执行此操作。

    唯一不应该忘记的是:在网格中添加数据之后,你应该调用setRowDataaddClass,例如在jqGrid的loadComplete函数内部。

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

    【讨论】:

    • 我会试一试。我不完全遵循逻辑,尤其是#C28015 部分,但任何事情都值得一试。
    • 每个&lt;tr&gt; 都具有您在数据行中定义的相同id。要使用id='C28015' 查找&lt;tr&gt;,您应该使用'#C28015' 选择器。要搜索不在整个文档中,您可以只在表体中搜索。 jQuery("#list") 指向表体 jQuery("#list")[0] 是相同的,但作为 DOM 元素而不是 jQuery 对象。所以jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable')'unsortable' 类添加到&lt;tr&gt;id='C28015'
    • @Joper:你能解释一下你的问题的背景吗?这是我这个答案的问题吗?我在哪里使用了这个语句?
    • @Oleg 无法让它与我的网格一起使用,列保持可排序,我查看 firebug 中的源代码,列仍然有类 'ui-jqgrid-sortable' 只是为了测试我将其替换为unsortable 手动在火灾错误中并且它正在工作,所以由于某种原因 jQuery("#mygrid").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'}); 没有被 unsortable 替换
    • @Oleg on this sample ok-soft-gmbh.com/jqGrid/sortableRows.htm only last row(Notes) not sortable
    【解决方案3】:

    正如 gurun8 所写:

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

    这很好用。 但是,如果您使用内联编辑,您可能需要这样做

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

    jqGrid sortableRows 调用 disableSelection() 函数,该函数不允许选择网格 tbody 中的任何表单元素,从而阻止正确的内联编辑。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-01-17
      • 2011-08-29
      • 2011-03-22
      • 2011-12-28
      • 1970-01-01
      • 1970-01-01
      • 2011-04-18
      • 1970-01-01
      相关资源
      最近更新 更多