【问题标题】:TreeGrid how to check/uncheck all child sublevels checkboxes when marks parentTreeGrid如何在标记父级时选中/取消选中所有子级复选框
【发布时间】:2013-02-21 04:25:37
【问题描述】:

我已经在“名称”列中构建了带有嵌入复选框的 treeGrid,例如 JSON 数据:

{"id":"1","name":"<input type='checkbox' class='itmchk' ><strong>ECHANGEUR<\/strong>","level":"0","parent":"null","isLeaf":false,"expanded":true,"loaded":true}

因为这些复选框遵循树边距(我希望我能很好理解,因为我是法国人)。

我想在标记/取消标记一行时选中/取消选中子级别复选框,但在阅读了可能的帖子后,我可以获得预期的结果。

举例说明: 如果我单击父行复选框(因此它变为 UNCHECKED),则子级别行变为 UNCHECKED

我是 jqGrid 的新手,但它是一个很棒的工具,我想学习它的属性。 请问你能用这种方式开车吗?或者你能建议我在哪里可以找到我想做的例子吗?我查看了文档但没有成功。

非常感谢提前 吉赫L

【问题讨论】:

    标签: jqgrid checkbox treegrid


    【解决方案1】:

    首先,我建议您不要将 HTML 片段放在 JSON 数据中。可以使用custom formatter 在网格单元格中包含复选框:

    formatter: function (cellvalue) {
        return "<input type='checkbox' class='itmchk' ><strong>" +
            $.jgrid.htmlEncode(cellvalue) + "</strong>";
    }
    

    要控制复选框的选中/取消选中,您可以使用网格的beforeSelectRow 回调。 jqGrid 内部将click 事件绑定到网格体。因此,event bubbling 发生的元素上没有直接存在事件处理程序。它允许在一个beforeSelectRow 回调中捕获对任何复选框 的选中/取消选中。在beforeSelectRow 内部,您应该首先测试它是否单击了您要控制的复选框。

    回调beforeSelectRow 有两个参数:rowidevent object。事件对象的属性target 将是用户单击的DOM 元素。因为您将自定义 itmchk 类添加到每个此类复选框,所以足以验证单击元素上的类。

    下一个问题是,许多与 TreeGrid 一起使用的 jqGrid 方法(如 getNodeChildren)将 record 作为输入参数,但您只有 rowid。 jqGrid 将加载的网格项目保存在本地。所以从rowid获取record最简单的方法就是使用getLocalRow方法。

    因此beforeSelectRow回调的代码可能如下:

    beforeSelectRow: function (rowid, e) {
        var $this = $(this),
            isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field,
            localIdName = $this.jqGrid("getGridParam", "localReader").id,
            localData,
            state,
            setChechedStateOfChildrenItems = function (children) {
                $.each(children, function () {
                    $("#" + this[localIdName] + " input.itmchk").prop("checked", state);
                    if (!this[isLeafName]) {
                        setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this));
                    }
                });
            };
        if (e.target.nodeName === "INPUT" && $(e.target).hasClass("itmchk")) {
            state = $(e.target).prop("checked");
            localData = $this.jqGrid("getLocalRow", rowid);
            setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", localData), state);
        }
    }
    

    重要的是要提到子复选框将仅在以前加载的项目上被选中/取消选中。因为您一次加载网格的数据并使用loaded: true 属性,所以对您来说没问题。

    对应的demo说明上面的代码确实有效。这是对我通过回答您之前的问题创建的演示的修改。

    【讨论】:

    • 非常感谢您的帮助,您肯定是 jqGrid 的大师,因为您对它了解很多。再次感谢您与新用户分享的所有内容。我不会再打扰你了,但是在上面的问题之后,我没有告诉你根据数据库级别的值有时会替换复选框的单选按钮。有没有办法在格式化程序中测试另一个单元格的值,以便我可以选择要添加到单元格的单选按钮或复选框?我认为这是初学者的水平,但我不知道我该怎么做。再次感谢你的帮助。吉赫L
    • 请不要花时间在我之前的评论上,我找到了根据数据库中的级别值用单选按钮替换复选框的解决方案。再次感谢您的耐心。祝你有美好的一天JiheL
    猜你喜欢
    • 2022-11-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-25
    • 2015-08-27
    • 1970-01-01
    相关资源
    最近更新 更多