Question

怎么控制datagrid 每行的样式

Answer 1

1、首先要下载datagrid-detailview.js，这个是easyUI的扩展插件
2、创建html页面，初始化datagrid表格
例如：
<table class="easyui-datagrid" id="dg" style="width:700px;height:250px"
title="DataGrid - Expand Row"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="100">Product ID</th>
<th field="listprice" align="right" width="80">List Price</th>
<th field="unitcost" align="right" width="80">Unit Cost</th>
<th field="attr1" width="220">Attribute</th>
<th field="status" width="60" align="center">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>p1</td><td>$100</td><td>$10</td><td>Spotless Male Puppy</td><td>p</td>
</tr>
<tr>
<td>002</td><td>p1</td><td>$100</td><td>$22</td><td>111</td><td>p</td>
</tr>
<tr>
<td>003</td><td>p1</td><td>$100</td><td>$33</td><td>222</td><td>p</td>
</tr>
<tr>
<td>004</td><td>p1</td><td>$100</td><td>$44</td><td>444</td><td>p</td>
</tr>
</tbody>
</table>

js：
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,rowData){
//如果需要更详细的数据，这里可以使用ajax获取数据。在封装返回。

return '<table><tr>' +
'<td rowspan=2 style="border:0"><img src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
'<td style="border:0">' +
'<p>Attribute: ' + rowData.attr1 + '</p>' +
'<p>Status: ' + rowData.status + '</p>' +
'</td>' +
'</tr></table>';
},
});