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