怎么控制datagrid 每行的样式

1、首先要下载datagrid-detailview.js，这个是easyUI的扩展插件

2、创建html页面，初始化datagrid表格

例如：

<table class="easyui-datagrid" id="dg" style="width:700pxheight: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>'

},

})

亲，步骤如下：

1.在html页面通过ajax获取后台DataGrid中数据，返回的最好是html代码的字符串，或者json格式的数据

2.通过js解析获取到的数据

3.后面的就是js的简单dom *** 作了

---