向现有 JQGRID 添加新列

Posted 2023-02-15

【中文标题】向现有 JQGRID 添加新列

【英文标题】：Adding a new column to existing JQ GRID

【发布时间】：2014-09-21 19:17:12

【问题描述】：

我正在开发 AbanteCart，其中使用 JQgrid 以表格形式显示订单相关信息。现在，我想在此表中添加一个新列。到目前为止我尝试过的代码如下：

    $grid_settings['colNames'] = array(
        $this->language->get('column_order'),
        $this->language->get('column_name'),

        $this->language->get('column_status'),
        $this->language->get('column_mode'),//Column Name that I added
        $this->language->get('column_date_added'),
        $this->language->get('column_total'),
    );
    $grid_settings['colModel'] = array(
        array('name' => 'order_id',
            'index' => 'order_id',
            'align' => 'center',),
        array('name' => 'name',
            'index' => 'name',
            'align' => 'center'),
        array('name' => 'status',
            'index' => 'status',
            'align' => 'center',
            'search' => false),
            array('name' => 'payment',//Column data that I added 
            'index' => 'payment',
            'align' => 'center',
            'search' => false),
        array('name' => 'date_added',
            'index' => 'date_added',
            'align' => 'center',
            'search' => false),
        array('name' => 'total',
            'index' => 'total',
            'align' => 'center'),
    );

这是我做出的两个改动。但它只在网格中显示列名，但不显示与该列相关的数据。我还需要更改代码以显示 JQgrid 中的更改吗？

姓名、状态、付款等变量来自数据库。

提前感谢您的帮助。

【问题讨论】：

jqGrid add new column 的可能重复项

@Filly 我只想在网格中添加一个新列。我不想在某些动作上动态添加新网格。例如，以前显示 5 列的网格，我想添加一个新列并使该网格显示 6 列。

付款应该出现在您的结果集中，例如，如果您使用 select * 从 sql 表中获取结果...应该存在列 payement

@kastormania 是的，它确实存在。我还尝试了列“名称”而不是“付款”。但它没有奏效。所以结果集获取没有问题。因为列 'name' 在其所在位置的网格上工作正常，但是当替换 'payment' 时，它不起作用。

【参考方案1】：

了解 jqGrid 创建具有所有内部结构的网格一次 很重要。 jqGrid 不提供允许添加新列的方法。所以你有以下选择：

使用GridUnload 将网格“销毁”为空<table> 并使用新列重新创建网格（请参阅the answer） 创建带有附加

隐藏

列的网格，并在需要添加新列时使用showCol 使隐藏列可见。这样您将获得与添加列相同的效果。

顺便说一下，如果您在网格中加载数据的命名属性（您的 JSON 输入数据看起来像 "order_id":"123", "name": "abc" , "status": "OK"...），您可以将 colModel 定义为

colModel: [
    name: "c1", key: true, jsonmap: "order_id",
    name: "c2", jsonmap: "name",
    name: "c3", jsonmap: "status",
    ...
]

使用 通用 名称 c1 c2, c3, ... 用于列。您可以在运行时轻松修改jsonmap 的值。您可以设置hidden: true 属性或删除它等。The answer 显示如何使用beforeProcessing 根据服务器响应修改colModel。通过这种方式，您可以使 jqGrid 完全动态化。