美文网首页
美化easyui样式及合并单元格

美化easyui样式及合并单元格

作者: 大梦无痕 | 来源:发表于2018-11-08 17:00 被阅读0次

    美化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 
    

    相关文章

      网友评论

          本文标题:美化easyui样式及合并单元格

          本文链接:https://www.haomeiwen.com/subject/grewxqtx.html