【问题标题】:How to Change Row Location in jqgrid?如何在 jqgrid 中更改行位置?
【发布时间】:2020-04-20 09:47:33
【问题描述】:

我正在将 jqgrid 与 MVC 一起使用,现在,我想在单击 ^ 时更改行位置以获取一条线并反转。

实际上我想为每一行设置“向上”和“向下”标志以更改一级行位置

任何人都可以帮助我吗?!

【问题讨论】:

  • 使用哪个版本的jqGrid?
  • @TonyTomov 5.4.0-试用版

标签: jqgrid jqgrid-asp.net mvcjqgrid


【解决方案1】:

有很多可能的解决方案。其中之一是使用自定义表单来定义按钮,然后在 loadComplete 上绑定事件以使用 jquery 移动行。代码下方:

        $("#jqGrid").jqGrid({
            datatype: "local",
            data: mydata,
            height: 250,
            width: 780,
            colModel: [
                { label :'move', formatter : myformatter, width:95},
                { label: 'Inv No', name: 'id', width: 75, key:true },
                { label: 'Date', name: 'invdate', width: 90 },
                { label: 'Client', name: 'name', width: 100 },
                { label: 'Amount', name: 'amount', width: 80 },
                { label: 'Tax', name: 'tax', width: 80 },
                { label: 'Total', name: 'total', width: 80 },
                { label: 'Notes', name: 'note', width: 150 }
            ],
            viewrecords: true, // show the current page, data rang and total records on the toolbar
            caption: "Load jqGrid through Javascript Array",
            loadComplete : function() {
              $(".up,.down").on('click', function () {
                 var row = $(this).closest("tr.jqgrow");
                 if($(this).is('.up')){
                    row.insertBefore(row.prev());
                 } else {
                    row.insertAfter(row.next());
                 }                    
              });
            }
        });
        function myformatter() {
            return '<button class="up" >Up</button>' + '<button class="down">Down</button>';
        }

演示here

【讨论】:

  • 感谢托尼还有一些问题! - 如何使用 ajax 或其他方式将行 ID 发送到服务器端? - 如何添加两个额外的按钮来获取网格的第一条和最后一条记录?
  • 我强烈建议您查阅文档 - 请参阅网格方法。关于网格的第一条和最后一条记录 - 有很多条件可能不同 - 例如,您的数据类型是本地的,我们是否应该处理当前的排序等等。如果您有与当前排序无关的问题,您可能需要开新帖
  • 我在您的帮助下解决了这些问题。非常感谢。
猜你喜欢
  • 1970-01-01
  • 2016-11-06
  • 2020-04-27
  • 1970-01-01
  • 2013-02-19
  • 1970-01-01
  • 1970-01-01
  • 2012-09-22
  • 1970-01-01
相关资源
最近更新 更多