checkbox - 使列成为复选框

Question

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

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

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

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应该演示解决方案:

该演示根据输入数据(基于每行存在的 bool 值)创建带有复选框的列。完整的输入数据将由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
    },

    ...
});