美化easyui樣式（需要修改easyui datagrid部分源碼）及合并單元格
1.修改datagrid樣式
只需要把easyui樣式覆蓋即可，表格樣式覆蓋之后需要修改部分easyui.js源碼为肮，此處修改主要是用于easyui表格多選時的狀態(tài)變化分别，以及處理easyui沒有數(shù)據(jù)時顯示的提示!
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%">暫無數(shù)據(jù)盖矫！</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請求的數(shù)據(jù)
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,//合并的行數(shù)
});
spallRow = data[i];
index = i;
}
}
data.splice(data.length-1,1);
return list;
}
//調用 此處合并前6列
//合并單元格
var rowsp = _self.collspan(rowData.rows,"code");
var line = 6;//合并列數(shù)
//如果要合并指定的列只需要傳入field數(shù)組即可 如 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,//合并的行數(shù)樟澜。
colspan: 1
});
}
}
效果圖
image.png
下拉框動畫
easyui下拉框動畫采用的事jq的hide和show只需要把2個改成slideUp和slideDown即可
image.png
image.png
easyui修改后的下載地址(百度網(wǎng)盤地址)（不帶按鈕樣式）（下載包中已經(jīng)把jq 和easyui+中文包 合并為jquery.easyui.min.js）
鏈接: https://pan.baidu.com/s/1eXCyWy35K0_LlhKv7pLd0A 提取碼: aeii
