jqgrid - 如何使用动态列绑定(bind)为 jqgrid 添加自定义格式化程序-6ren

jqgrid - 如何使用动态列绑定(bind)为 jqgrid 添加自定义格式化程序

转载作者：行者123 更新时间：2023-12-04 10:44:18

26

4

这几乎是上一个问题的延续。 Problem showing jqgrid with dynamic column binding

我正在尝试为下面的列放置一个自定义格式化程序。但什么也没有发生。请帮忙。

JSP:

   <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <script type="text/javascript"> 
  $(document).ready(function() {
  $.ajax( {
    type : "GET",
    url : "interFinalTbaAction",
    data : "",
    dataType : "json",
    success : function(result) {
        var colD = result.couponStripList, colM = result.colModelList;
        jQuery("#InterFinalTBAGrid").jqGrid( {
            data : colD.rootVar,
            datatype : 'local',
            gridview : true,
            colModel : colM,
            loadComplete : function(data) {
            },
            loadError : function(xhr, status, error) {
                alert('grid loading error');
            }
        });
    },
    error : function(x, e) {
        alert(x.readyState + " " + x.status + " " + e.msg);
    }
});
  });
 </script>
 </head>
 <body>
 <table id="InterFinalTBAGrid">
<tr>
    <td />
</tr>
 </table>
 </body>
 </html>

Action 的 JSON 结果:

 {
"colModelList": [
    {
        "formatter": "CouponFormatter",
        "index": 0,
        "jsonmap": null,
        "key": false,
        "label": "Coupon",
        "name": "coupon",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 100
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 1,
        "jsonmap": null,
        "key": false,
        "label": "03-10-11",
        "name": "prceCM",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 2,
        "jsonmap": null,
        "key": false,
        "label": "04-13-11",
        "name": "prceCMPlusOne",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 3,
        "jsonmap": null,
        "key": false,
        "label": "05-12-11",
        "name": "prceCMPlusTwo",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 4,
        "jsonmap": null,
        "key": false,
        "label": "06-13-11",
        "name": "prceCMPlusThree",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
      }
   ],
   "couponStripList": {
    "rootVar": [
        {
            "coupon": 5.0,
            "prceCM": "103.734375,103.734375",
            "prceCMPlusOne": "103.359375,99.03",
            "prceCMPlusThree": "102.671875,102.671875",
            "prceCMPlusTwo": "103.015625,103.015625"
        },
        {
            "coupon": 5.5,
            "prceCM": "105.984375,105.984375",
            "prceCMPlusOne": "105.671875,99.2",
            "prceCMPlusThree": "105.046875,105.046875",
            "prceCMPlusTwo": "105.359375,105.359375"
        }

    ]
   },
   "deliveredDataTimestamp": "03-02-11 11:52:57",
   "requestedTimestamp": null
   }

格式化程序的 Javascript 函数:

  function CouponFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing coupon formatter";
   }

function InterFinalPriceFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing price formatter";
}

最佳答案

如果你使用

"formatter": "InterFinalPriceFormatter"

您没有将“格式化程序”属性的值设置为功能 .

解决此问题的一种方法是遍历 result.colModelList并验证一个使用带有某个字符串值的“格式化程序”属性，您已将其实现为 JavaScript 中的函数。然后，您可以使用相应的格式化程序函数的值覆盖该属性。

另一种方法是在格式化程序中使用内联函数:

"formatter": "function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }"

在这种方式下，您不会清楚地将代码和网格参数分开，但是您会在网格内收到一些格式化程序的封装。

更新 :我希望下一个代码片段(未经测试)可以清楚我在第一种实现方式下的意思

var functionsMapping = {
    // here we define the implementations of the custom formatter which we use
    "CouponFormatter": function (cellValue, opts, rowObject) {
        return cellValue + "Testing coupon formatter";
    },
    "InterFinalPriceFormatter": function (cellValue, opts, rowObject) {
        return cellValue + "Testing price formatter";
    }
};
$.ajax({
    type: "POST",
    url: "interFinalTbaAction.action",
    data: "",
    dataType: "json",
    success: function(result) {
        var i, cm, colD = result.couponStripList,
            colN = result.columnNames,
            colM = result.colModelList;
        for (i=0;i<colM.length,i++) {
            cm = colM[i];
            if (cm.hasOwnProperty("formatter") &&
                functionsMapping.hasOwnProperty(cm.formatter)) {
                // fix colM[i].formatter from string to the function
                cm.formatter = functionsMapping[cm.formatter];
            }
        }
        jQuery("#dataGrid").jqGrid({/* all parameters from your code */});
    },         
    error: function(jqXHR, textStatus, errorThrown){
        alert("Error Occured!" + " | " + jqXHR.responseText + " | " +
              textStatus + " | " + errorThrown);
    }
});

更新 2:最好是注册自定义格式化程序和取消格式化程序作为标准格式化程序，如 the old answer 中所述或在 answer one .之后就可以真正使用 "formatter": "InterFinalPriceFormatter" 之类的语法了。和自定义函数 $.fn.fmatter.InterFinalPriceFormatter和 $.fn.fmatter.InterFinalPriceFormatter.unformat将由 jqGrid 自动调用。

关于jqgrid - 如何使用动态列绑定(bind)为 jqgrid 添加自定义格式化程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5171617/

26

4

0

文章推荐： r - 如何在 dplyr 中进行功能重命名？

文章推荐： php - 如何在 Amazon Linux 2 CentOS7 上安装 PHP 5.56？

文章推荐： octave - 在 GNU Octave 中识别变量类型

c++ - 绑定(bind)绑定(bind)函数作为参数
我有一个 foo 类，它有一个 bar 方法，它接受可调用的东西(函数指针/仿函数)。这个可调用的东西应该作为绑定(bind)元素传递给另一个方法 doit 和第三个方法 bar_cb 方法。 #in
绑定(bind)似乎工作正常时报告 WPF 绑定(bind)错误
我正在尝试在我的 WPF 4.0 应用程序(使用 VS 2010 Pro RTM)中创建自定义 TabItem 模板/样式，但尽管一切似乎都正常工作，但我注意到跟踪窗口中存在绑定(bind)错误。我
java - 绑定(bind)服务的多个实例 - 绑定(bind)服务在应用程序结束后仍然存在
作为一名刚接触 Android 的开发人员，我想我可能误解了绑定(bind)服务。我创建了一项服务来结束对服务器的访问。作为此服务的一部分，该服务正在监听多播地址，以识别本地网络上的设备何时出现和消
javascript - 显式 "this"绑定(bind) : how does the . 绑定(bind)方法有效吗？
这个问题在这里已经有了答案: What is the use of the JavaScript 'bind' method? (23 个回答) 关闭 7 年前。所以我一直在尝试了解一些 JS 上
haskell - where 绑定(bind)、let 绑定(bind)和单个赋值运算符 (<-) 之间的区别
我不明白这三种语法之间的区别: where a = f (b) do a <- f (b) do let a = f (b) 我确实明白了a <- f(b)与其他两个不同，在大多数情况下，我尝试了所有
cocoa 绑定(bind)问题；绑定(bind)表列不显示任何数据，控制台中没有错误
我在将 Cocoa 项目从手动同步接口(interface)模型转换为绑定(bind)模型时遇到问题，这样我就不必担心接口(interface)粘合代码。我关注了 CocoaDevCentral C
c# - CPU 绑定(bind)任务的并行化继续与 IO 绑定(bind)
我正在尝试找出一种好的方法来对处理大数据集的代码进行并行化，然后将结果数据导入 RavenDb。数据处理受 CPU 限制和数据库导入 IO 限制。我正在寻找一种解决方案，以对 Environmen
javascript - 通过 $parent 绑定(bind)绑定(bind)单选按钮
我正在 foreach 循环中生成单选按钮。我试图将选中的属性绑定(bind)到父级中的基本可观察值。不幸的是，当单击单选按钮时，父级的属性似乎没有在单击处理程序中更新。基于一些previous w
c# - 绑定(bind)/绑定(bind)两个 LongListSelectors 的滚动位置
在我的 Windows Phone 应用程序中，我有两个 LongListSelectors并排在页面上。我想做到这一点，以便当用户滚动其中一个时，另一个滚动相同的量。两个 LongListSele
linux - I/O 绑定(bind)与 CPU 绑定(bind)取决于内核？
我在网上看到这个问题准备面试: Given a non-preemptive kernel which type of process will get affected morein terms o
javascript - knockout 绑定(bind)在 foreach 绑定(bind)中中断
我有一个 foreach 绑定(bind)，如下所示: Summary Permitting 原因是有两个选项卡始终存在，并且我根据是否添加了其他选项卡来添加其他选项
WPF 绑定(bind) - 使用自己的 DataContext 进行 self 绑定(bind)
任何人都有绑定(bind)相同的情况DataContext到 TextBlock 中的 Text 属性(例如)。我必须分配 DataContext以我的风格反射(reflect)基于 Datacon
javascript - 使用重置 jquery 绑定(bind)的 Knockout 绑定(bind)
给定以下代码: Login 和下面的javascript $(function () { $('#btnLogin').click(function () { co
c++ - 绑定(bind)端点时 boost::asio 绑定(bind)异常
我使用 boost::asio 创建了一个服务器。我在绑定(bind)到端点时遇到问题。所以，如果我在构造函数中初始化一个接受器: Server::Server(QWidget *parent) :
mysql - 如何将MySQL风格的问号 `?`绑定(bind)参数转换为Postgres风格的 `$1`绑定(bind)参数
我正在将现有项目从 MySQL 转换为 Postgres。代码中有相当多的原始 SQL 文字使用 ? 作为占位符，例如 SELECT id FROM users WHERE
c# - 将 SolidColorBrush 绑定(bind)到背景，绑定(bind)错误
似乎在绑定(bind)某些数据时出错了，有人可以帮我解决我哪里出错了，尽管我无法弄清楚。真的不需要在这里显示太多，这是 Binding，我已经通过移除背景并在其中放置颜色来测试背景，效果很好。编辑
c# - wcf http 绑定(bind)与 dualhttp 绑定(bind)
我正在尝试使用 wcf 构建一个 http 监听器(web 服务)。这个监听器是一个更大的桌面应用程序的一部分。此桌面应用程序还会调用 http 监听器。当监听器接收到数据时，它应该被传递到桌面应用
node.js - I/O 绑定(bind)和 CPU 绑定(bind)
嘿嘿。我正在使用 Node.JS 和 child_process 来生成 bash 进程。我试图了解我是否正在执行 I/O 绑定(bind)、CPU 绑定(bind)或两者兼而有之。我正在使用 p
events - 绑定(bind)中的 Angular 2 绑定(bind)。事件内插值
尝试执行以下操作并出现“Got interpolation ({{}}) where expression was expected”错误。 {{item.name}} 谢谢!
c# - 绑定(bind)到位于 Xamarin 绑定(bind) Java 库中的服务
我有一个导入的 Java 库，它是我解决方案中的“绑定(bind)库”项目。我正在尝试从解决方案中的另一个项目绑定(bind)到第 3 方库中的服务。第 3 方库文档 [在 java 中] 非常简

首页

博学

6Ren·AI

商城

jqgrid - 如何使用动态列绑定(bind)为 jqgrid 添加自定义格式化程序