easy-ui

来源：互联网发布：java验证码代码怎么写编辑：程序博客网时间：2024/04/29 15:37

easyui datagrid 隐藏

分类： Web2014-07-15 21:00 4252人阅读评论(4) 收藏举报

easyuidatagrid 隐藏

easyui datagrid 隐藏列

1、隐藏前图

2、隐藏后图

3、代码1

[javascript] view plaincopy
$("#corp-grid").datagrid({  
        title:"泥头车企业管理",  
        toolbar:"#corp-grid-toolbar",  
        border:false,  
        fit:true,  
        width:$(window).width()-252,  
        columns:[[  
                    {field:"ckb",checkbox:true},  
                    {field:"corpName",title:"企业名称",width:200,halign:"center",align:"center",resizable:true},  
                    {field:"linkedCorpName",title:"挂靠深圳企业名称",width:200,halign:"center",align:"center",resizable:true},  
                    {field:"corpType",title:"企业类型",width:80,align:"center",resizable:false},  
                    {field:"businessScope",title:"经营范围",width:80,align:"center",resizable:false},  
                    {field:"effectiveDate",title:"有效日期",width:80,align:"center",resizable:false},  
                    {field:"opePeriod",title:"营业期限",width:80,align:"center",resizable:false},  
                    {field:"ifLocal",title:"是否本地",width:80,align:"center",resizable:false},  
                    {field:"state",title:"有效状态",width:80,align:"center",resizable:false}  
                ]],  
        //striped:true,  
        fitColumns:true,  
        //autoRowHeight:true,  
        rownumbers:false,  
        singleSelect:false,  
        ctrlSelect:true,  
        pagination:true,  
        pageSize:10,  
        pageList:[5,10,15,20,25,30],  
        sortName:"corpId",  
        sortOrder:"desc",  
        url:"corp_getInfoList.action",  
        method:"post",  
        loadMsg:"加载数据中，请稍后",  
        onDblClickRow:function(rowIndex, rowData){  
            openDialog({  
                type:"view",  
                title:"泥头车企业信息查看",  
                width:800,  
                height:400,  
                maximizable:true,  
                href:"BaseInfo/Corp/CorpInfoView.html"  
            });  
        },  
        onRowContextMenu:function(e, rowIndex, rowData){  
            e.preventDefault();  
              
            $(this).datagrid("unselectAll");  
              
            $(this).datagrid("selectRow", rowIndex);  
              
            $("#corp-menu").menu("show",{  
                left:event.pageX,  
                top:event.pageY  
            });  
        }  
    }).datagrid("columnHiding");  

4、代码2

[javascript] view plaincopy
$.extend($.fn.datagrid.methods,{  
    columnHiding:function(jq){  
        return jq.each(function(){  
            var grid = this;  
              
            var variable = 2;  
              
            var tds = $(grid).datagrid("getPanel").find(".datagrid-header td[field]:not(td[field='ckb'])");  
              
            var downDiv = null;  
              
            if($(".dg-hide-div").length == 0){  
                downDiv = $("<div></div>");  
                downDiv.addClass("dg-hide-div");  
                downDiv.hide();  
                  
                $("body").append(downDiv);  
            }else{  
                downDiv = $(".dg-hide-div");  
            }  
              
            downDiv.click(function(){  
                tbDiv.show();  
            }).mouseout(function(){  
                var tbVisible = tbDiv.is(":visible");  
                  
                if(!tbVisible){  
                    $(this).hide();  
                }  
            });  
              
            var tbDiv = null;  
              
            if($(".dg-hide-tb").length == 0){  
                tbDiv = $("<div><table></table></div>");  
                tbDiv.addClass("dg-hide-tb");  
                tbDiv.hide();  
                  
                $("body").append(tbDiv);  
            }else{  
                tbDiv = $(".dg-hide-tb");  
                tbDiv.children("table").children().remove();  
            }  
              
            var trs = "";  
              
            var columns = ($(grid).datagrid("options").columns)[0];  
              
            $.each(columns,function(index, obj){  
                if(index > 0){  
                    trs += "<tr>";  
                      
                    trs += "<td><input type='checkbox' checked='checked'></td><td id=" + obj.field + ">" + obj.title + "</td>";  
                      
                    trs += "</tr>";  
                }  
            });  
              
            tbDiv.children().append($(trs));  
              
            tbDiv.mouseout(function(e){  
                var minX = $(this).offset().left;  
                  
                var curMouseX = e.pageX;  
                  
                var maxX = $(this).offset().left + $(this).width();  
                  
                var minY = $(this).offset().top;  
                  
                var curMouseY = e.pageY;  
                  
                var maxY = $(this).offset().top + $(this).height();  
                  
                var ifOverThis = (curMouseX >= minX && curMouseX < maxX)   
                                    && (curMouseY >= minY && curMouseY <= maxY);  
                  
                if(!ifOverThis){  
                    downDiv.hide();  
                    $(this).hide();  
                }  
            });  
              
            tbDiv.children().find("input[type='checkbox']").click(function(){  
                var checked = $(this).is(":checked");  
                  
                var visibleTds = $(grid).datagrid("getPanel")  
                                        .find(".datagrid-header td[field]:visible").length - 1;  
  
                if(1 == visibleTds && !checked){  
                    return false;  
                }  
                  
                var field = $(this).parent().next().attr("id");  
                  
                if(checked){  
                    $(grid).datagrid("showColumn", field);  
                }else{  
                    $(grid).datagrid("hideColumn", field);  
                }  
            });  
              
            tds.mouseover(function(){  
                tbDiv.hide();  
                  
                var thisOffset = $(this).offset();  
                  
                var height = $(this).height();  
                  
                var left = null;  
                  
                var visibleTds =  $(this).parent().children(":visible");  
                  
                var lastTd = visibleTds[visibleTds.length - 1];  
                  
                if($(this).index() == $(lastTd).index()){  
                    left = thisOffset.left + variable;  
                }else{  
                    left = thisOffset.left + $(this).width() - downDiv.width() - variable;  
                }  
                  
                var top = thisOffset.top;  
                  
                downDiv.css({height:height, left:left, top:top});  
                tbDiv.css({left:left,top:top+height+1});  
                  
                downDiv.show();  
            }).mouseout(function(e){  
                  
                var minY = $(this).offset().top;  
                  
                var curMouseY = e.pageY;  
                  
                var maxY = $(this).offset().top + $(this).height();  
                  
                var minX = null;  
                  
                var curMouseX = e.pageX;  
                  
                var maxX = null;  
                  
                var visibleTds =  $(this).parent().children(":visible");  
                  
                var lastTd = visibleTds[visibleTds.length - 1];  
                  
                if($(this).index() == $(lastTd).index()){  
                    minX = $(this).offset().left + variable;  
                    maxX = $(this).offset().left + downDiv.width() + variable;  
                }else{  
                    minX = $(this).offset().left + $(this).width() - downDiv.width() - variable;  
                    maxX = $(this).next().offset().left - variable;  
                }  
                  
                var ifOverThis = (curMouseX >= minX && curMouseX <= maxX)   
                                    && (curMouseY >= minY && curMouseY <= maxY);  
                  
                if(!ifOverThis){  
                    downDiv.hide();  
                }  
            });  
              
        });  
    }  
});  

0 0