美化easyui样式（需要修改easyui datagrid部分源码）及合并单元格

1.修改datagrid样式

只需要把easyui样式覆盖即可，表格样式覆盖之后需要修改部分easyui.js源码，此处修改主要是用于easyui表格多选时的状态变化，以及处理easyui没有数据时显示的提示!

image.png

添加的代码如下：

 data = data.rows ? data.rows : data;
    $(jq).datagrid("getPanel").find(".datagrid-header-row").removeClass("datagrid-header-isSelect-row datagrid-header-select-row");
return jq.each(function(i,e){
    _6e1(this,data);
    _7af(this);
    if(data.length==0){
        $('<div class="nodata" style="text-align:center;color:#ccc;font-size:20px;height:40px;line-height:40px;position: absolute;top:60px;width:100%">暂无数据！</div>').appendTo(jq.datagrid("getPanel").find(".datagrid-view2"));
    }else{
        jq.datagrid("getPanel").find(".nodata").remove();
    }
});

效果图

image.png

image.png

需要修改easyui表格方法（添加到jquery.easyui.min.js最后面即可）

var select = function (index,row){
    
    setTimeout(()=>{
        var selectRows = $(this).datagrid("getSelections");
        var getRows = $(this).datagrid("getRows");
        console.log(selectRows)
        if(selectRows.length==0){
            //没选
            $(this).datagrid("getPanel").find(".datagrid-header-row").removeClass("datagrid-header-select-row datagrid-header-isSelect-row")
        }else if(selectRows.length==getRows.length){
            //全选
            $(this).datagrid("getPanel").find(".datagrid-header-row").removeClass("datagrid-header-select-row datagrid-header-isSelect-row").addClass("datagrid-header-select-row");
        }else{
            //至少一个选中
            $(this).datagrid("getPanel").find(".datagrid-header-row").removeClass("datagrid-header-isSelect-row datagrid-header-select-row").addClass("datagrid-header-isSelect-row");
        }
    },0)
}
$.fn.datagrid.defaults.onCheck = select;
$.fn.datagrid.defaults.onUncheck = select;
$.fn.datagrid.defaults.onSelectAll = function(){
    $(this).datagrid("getPanel").find(".datagrid-header-row").removeClass("datagrid-header-isSelect-row datagrid-header-select-row").addClass("datagrid-header-select-row");
}
$.fn.datagrid.defaults.onUnselectAll = function(){
    $(this).datagrid("getPanel").find(".datagrid-header-row").removeClass("datagrid-header-isSelect-row datagrid-header-select-row");
}

合并单元格方法的封装

collspan:function(data,field){
            //field 合并的id字段
            //data请求的数据
            var row = {};
            row[field] = "xxxxxxxxxxx";
            data.push(row);
            var list = [];
            var index = 0;
            var spallRow = data[index];
            for(var i=0;i<data.length;i++){
                if(data[i][field]!=spallRow[field]){
                    list.push({
                        index:index,//合并的索引值
                        rowspan:i-index,//合并的行数
                    });
                    spallRow = data[i];
                    index = i;
                }
            }
            data.splice(data.length-1,1);
            return list;
        }
//调用 此处合并前6列
//合并单元格
                    var rowsp = _self.collspan(rowData.rows,"code");
                    var line = 6;//合并列数 
                                        //如果要合并指定的列只需要传入field数组即可 如 var lie = ["name","age","state"];
                    var columns = $("#grid").datagrid("options").columns[0];
                    for(var i=0;i<rowsp.length;i++){
                        for(var j=0;j<line;j++){
                            $("#grid").datagrid('mergeCells', { 
                                index: rowsp[i].index, 
                                field: columns[j].field, //lie[i]
                                rowspan:rowsp[i].rowspan,//合并的行数。
                                colspan: 1 
                            });
                        }
                    }

效果图

image.png

下拉框动画

easyui下拉框动画采用的事jq的hide和show只需要把2个改成slideUp和slideDown即可

image.png
image.png

easyui修改后的下载地址(百度网盘地址)（不带按钮样式）（下载包中已经把jq 和easyui+中文包 合并为jquery.easyui.min.js）

链接: https://pan.baidu.com/s/1eXCyWy35K0_LlhKv7pLd0A 提取码: aeii