Question

我加载了一个带有数据库请求的网格（在PHP中使用CodeIgniter abd jqgrid helper）。我没有任何问题要用我的数据显示一个漂亮的网格。

我想显示一个带有复选框的新colomn，以便选择一行或多行。

加载后无法添加新列。所以我试着这样做： - 创建网格时添加colomn， - 在创建时，我添加了一个带有函数的'loadComplete'选项， - 在diplaying时，执行该功能。这是：

function ajoutCheckBox() {
    var grille = $("#users_grid");

    // Construire les checkbox dans la colonne D
    grille.setColProp('Dest', {editable: true});
    grille.setColProp('Dest', {edittype: 'checkbox'});
    grille.setColProp('Dest', {editoptions: { value: "True:False" }});
    grille.setColProp('Dest', {formatter: "checkbox"});
    grille.setColProp('Dest', {formatoptions: { disabled: true}});



    // Insérer la valeur false dans toutes les lignes de la colonne D
    var index   = grille.jqGrid('getGridParam', '_index');

    for(i in index) {
        grille.jqGrid('setCell', i, 'Dest', 'False', {});
    }
}

如您所见，gris称为“#users_grid”，列为“Dest”。

我的问题：没有任何意外......

感谢您的帮助！

XB

编辑：我找到了以下解决方案：

复选框列添加在colModel语句
要初始化值并激活复选框（在创建时禁用它们），我使用"loadComplete"回调函数。

代码非常简单，但我很难找到......

网格创建：

loadComplete: function() { ajoutCheckBox() },
colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\",  defaultValue: \"False\" }}","size":10}}, ....]

回调函数：

function ajoutCheckBox() {
    var grille = $("#users_grid");
    var index = grille.jqGrid('getGridParam', '_index');

    for(i in index) { // Pour toutes les lignes du tableau
        grille.jqGrid('setCell', i, 'Env', 'False');
        $('#'+i).find("input:checkbox").removeAttr('disabled');
    }
}

它似乎没有优化，但它有效！

Answer 1

加载后添加新列并非不可能，但可以使隐藏列可见。您只需要定义具有复选框的列（如果需要，可以使用formatoptions: { disabled: false}），并且可以在showCol回调内使用loadComplete以使列可见（如果需要）或强制使用hideCol方法隐藏它。

更新：如果我正确理解了您想要的内容（在评论中讨论之后），那么the demo应该展示解决方案：

该演示使用基于输入数据的复选框创建列（基于每行存在的布尔值）。 jqGrid将在内部参数data和_index中自动保存完整的输入数据。将显示包含数据的第一页。
该演示使用beforeSelectRow来处理复选框的点击/检查/取消选中。因为datatype: "local"在jqGrid中使用，所以我使用getLocalRow来访问内部对象，该内部对象表示行的数据。在选中/取消选中复选框时，我修改了数据的相应字段。结果，可以更改某些复选框的状态，更改页面并返回第一页。人们会看到已修改复选框的修改状态。

以下是代码中最重要的部分：

var mydata = [
        ...
        { id: "4", ..., closed: true, ... },
        ....
    ];

$("#list").jqGrid({
    datatype: "local",
    data: mydata,
    colModel: [
        ...
        {name: "closed", width: 70, align: "center",
            formatter: "checkbox", formatoptions: { disabled: false},
            edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
            stype: "select", searchoptions: { sopt: ["eq", "ne"], 
                value: ":Any;true:Yes;false:No" } },
        ...
    ],
    beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
            cm = $self.jqGrid("getGridParam", "colModel"),
            localData = $self.jqGrid("getLocalRow", rowid);
        if (cm[iCol].name === "closed") {
            localData.closed = $(e.target).is(":checked");
        }

        return true; // allow selection
    },

    ...
});

将列设为复选框

1 个答案: