EasyUI-TreeGrid级联菜单添加checkbox并添加事件

发布于 2012-10-17  20.81k 次阅读


说说碰到的问题,checkbox不会级联更新checked状态, 更不会触发treegrid的事件?

怎么办?

如上图,代码就一句话,封装全部在后台。若只是需要表现级联结构,建议直接用tree更简单。

其他都好办,最后一点收尾,发现点 [ 多选框 ] 不会触发onClickRow事件,而这个 checkbox 并没有绑定事件,查看easyUI的源码,就是2句话,1.2.3版本的在解析参数的

if(row.checked){
cc.push("<input type="checkbox" checked="checked"/>");
}else{
cc.push("<input type="checkbox"/>");
}

也不能直接 在这里加,那就写死了。

解决方法在下面,注解1和2:

其他地方可以无视,关键在1,绑定checkbox 事件到

function relatedTreeGridData(param){
    $('#'+param.tgId).treegrid({
        title:'所含权限',
//      width:500,
//      height:400,
        nowrap: false,
        rownumbers: true,
        animate:true,
        collapsible:true,
        treeField:'name',
        idField:'id',
//      url:'treegrid_data.json',
        singleSelect : false,
        frozenColumns:[[
            {field:'ck',checkbox:true}
        ]],
        columns:[[
        ]],
        onExpand:function(node){
            //$.post
        },
        onClickRow:function(row){
            //【2】级联更新checkbox_checked状态
            var body=$('#'+param.tgId).datagrid("getPanel").find("div.datagrid-body");
            var tr=body.find("tr[node-id="+row.id+"]");
            var flag = tr.hasClass("datagrid-row-selected") ? true : false;
            if(row.children){
                $.each(row.children,function(index1,value1){
                    tr=body.find("tr[node-id="+value1.id+"]");
                    if(flag){
                        tr.addClass("datagrid-row-selected");
                        tr.find("div.datagrid-cell-check input[type=checkbox]").attr("checked",true);
                    }else{
                        tr.removeClass("datagrid-row-selected");
                        tr.find("div.datagrid-cell-check input[type=checkbox]").attr("checked",false);
                    }
                    if(value1.children){
                        $.each(value1.children,function(index2,value2){
                            tr=body.find("tr[node-id="+value2.id+"]");
                            if(flag){
                                tr.addClass("datagrid-row-selected");
                                tr.find("div.datagrid-cell-check input[type=checkbox]").attr("checked",true);
                            }else{
                                tr.removeClass("datagrid-row-selected");
                                tr.find("div.datagrid-cell-check input[type=checkbox]").attr("checked",false);
                            }
                        });
                    }
                });
            }
        }
    });
    $('#'+param.tgId).treegrid({columns:new Array(param.columns)}).treegrid("loadData",param.records);
    //【1】treegrid checkbox绑定onClickRow事件
    var _57f=$('#'+param.tgId).datagrid("getPanel");
    var body=_57f.find("div.datagrid-body");
    body.find("div.datagrid-cell-check input[type=checkbox]").unbind(".treegrid").bind("click.treegrid",function(e){
    });
         
    $.each(param.records,function(index1,value1){
        _5b9('#'+param.tgId,value1.id);
        $.each(value1.children,function(index2,value2){
            _5b9('#'+param.tgId,value2.id);
            $.each(value2.children,function(index3,value3){
                _5b9('#'+param.tgId,value3.id);
            });
        });
    });
}

that's all.