使列成为复选框

Posted 2023-03-05

【中文标题】使列成为复选框

【英文标题】：Make a column be a checkbox

【发布时间】：2014-08-05 01:45:26

【问题描述】：

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

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

加载后无法添加新列。所以我试着这样做： - 创建网格时添加列， - 在创建时，我添加了一个带有函数的“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');
    

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

【参考方案1】：

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

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

该演示根据输入数据（基于每行存在的布尔值）创建带有复选框的列。完整的输入数据将被 jqGrid 自动保存在内部参数data 和_index 中。将显示包含数据的第一页。 演示使用beforeSelectRow 来处理复选框的单击/选中/取消选中。因为在 jqGrid 中使用了datatype: "local"，所以我使用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
    ,

    ...
);

【讨论】：

感谢您的回答！

感谢您的回答！我想我会接受你的建议，围绕你的想法工作。我意识到我忘记了选项loadonce:true：它允许立即加载所有网格对象属性（也许我错了......）。这个选项为我提供了更新行或列所需的一切。

@Albiréo：不客气！如果您有一些实现问题，您可以将当前代码附加到问题的文本中。如果您对我的回答写下关于您问题文本更改的小评论，我可以重新阅读它，我会尽力帮助您。

我在创建时添加了列的属性，它更简单并且有效。我正在使用loadComplete 回调函数将布尔值初始化为复选框。但是，尽管editable:true 是不可编辑的。我正在寻找原因。

@Albiréo：抱歉，我不完全明白你在做什么。如果您对某些列使用formatter: "checkbox"，则复选框的值将根据输入值自动设置（选中复选框后为“true”、“yes”或“1”）。不需要在loadComplete 中执行其他操作。如果您希望复选框不会被禁用，那么您需要使用属性formatoptions: disabled: false 作为列。要检测复选框状态的变化，您可以使用beforeSelectRow 回调。例如可以使用setCell 来保存复选框的新状态。