jqGrid 树形表格多选

2 篇文章 0 订阅

jqGrid失款不可多得的轻量级前端框架,需求的需要,使用了jqGrid的treeGrid做数据展示,其对异步展开节点支持的很好,用起来很省心。
使用中有对树形的数据多选的需求,需要选择一个节点,同时选择其所有子节点;查看了API,发现treeGrid不支持,还是自己动手来完成,废话不多说,先上个图:
这里写图片描述
下面是关键代码:

colNames:['id',nameFormat,'type']
colModel:[
    {name:"id","index":"id",key:true,hidden:true},
    {name:"name",label:"name", width:160,resizable: true,sortable:false,formatter:showName},
    //....
]

nameFormat在“名称”列头添加了的复选框,showName是在名称前加复选框

var nameFormat= '<label>'+
                    '<input type="checkbox" class="ace" id="chxCheckAll">'+
                    '<span class="lbl align-top" >名称</span>'+
                  '</label>';
function showName( cellvalue, options, cell ) {
    var rowId = cell.id;
    var checkbox = '<label >'+
                        '<input type="checkbox" id="chx'+rowId+'" class="ace" value="'+rowId+'" onclick="clickCheckbox('+rowId+', this);" />'+
                        '<span class="lbl align-top" ></span>'+
                            cell.name +
                    '</label>';
    return  checkbox ;          
}

复选框的勾选触发clickCheckbox,勾选子节点和父节点需要用到getNodeChildren和getNodeParent方法

//全选/全不选
$("#chxCheckAll").on('click', function(){
    $("input[id^='chx']").each(function(){
        $(this).prop("checked", $("#chxCheckAll").is(':checked'));
    });
});

//checkbox事件
clickCheckbox = function clickCheckbox(rowid, $this) {
    checkChildren(rowid,$this);
    if($($this).is(':checked')){
        checkParent(rowid, $this);
    }else{
        $("#chxCheckAll").prop("checked",false);
    }
};
//递归选中子节点
function checkChildren(rowid,$this){
          var records = $(grid_selector).jqGrid('getNodeChildren',$(grid_selector).jqGrid("getLocalRow", rowid));
          if(records.length>0){
           for (var i=0;i<records.length;i++){
            var cb = $("#chx"+records[i].id);
            cb.prop("checked", $($this).is(':checked'));
                 checkChildren(records[i].id,cb);
           }
          }
}
//递归选中父节点
function checkParent(rowid, $this){
    var parent = $(grid_selector).jqGrid('getNodeParent',$(grid_selector).jqGrid("getLocalRow", rowid));
    if(parent){
        var cb = $("#chx"+parent.id);
                cb.prop("checked", $($this).is(':checked'));
                checkParent(parent.id,cb);
    }
}

需要注意的是获取当前record这里需要使用getLocalRow,若使用getRowDate或getInd会获取不到子节点或父节点
功能完成。希望此文对有同样需求的朋友有所帮助。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 17
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值