這是以前寫的一個項目中寫的東西,為了讓datagrid樣式好看,所有做的這個處理:
今天同事又問到於是記錄下來
$('#id').datagrid({
width: '99%',
height: 150,
fit: false,
nowrap: true,
url: 'url地址',
singleSelect: true,
columns: [
[
{
field: 'TaskName', title: '標題', width: '100%', formatter: function (v, rd, i) {
if (v != undefined) {
return '<img src="../Images/roundpoint.png"></img> <a href="#" onclick= ReportDetails(\'' + rd.MatTypeInt +
'\',\'' + rd.PeriodNo + '\',\'' + rd.TaskId + '\',\'' + v + '\',\'' + rd.MatType + '\') class="href-noneline-blacknofont" >' + v + ',' + '<span class="red-font">' + rd.MatType + '</span>總數' +
'<span class="red-font">' + rd.PriceCount + '</span>條';
}
}
}
]
], onLoadSuccess: function (data) {
var panel = $(this).datagrid('getPanel');
var tr = panel.find('div.datagrid-body tr');
tr.each(function () {
var td = $(this).children('td');
td.css({
"border-width": "0"
});
;
});
}
});
關鍵是:
onLoadSuccess: function (data) {
var panel = $(this).datagrid('getPanel');
var tr = panel.find('div.datagrid-body tr');
tr.each(function () {
var td = $(this).children('td');
td.css({
"border-width": "0"
});
});
下面是去外邊框線:
#idDiv .datagrid-header {
position: absolute;
visibility: hidden;
}
#idDiv .datagrid-body {
overflow: hidden;
}
標題字體:
#iddiv .datagrid-header .datagrid-cell span {
font-size: 18px;
font-family: "黑體";
}