Web Demo Mobile Demo Angular Demo Vue Demo React Demo

DataGrid Row Style

The rows which listprice value is less than 30 are highlighted.

Item ID Product List Price Unit Cost Attribute Status
源代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DataGrid Row Style - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>DataGrid Row Style</h2>
	<p>The rows which listprice value is less than 30 are highlighted.</p>
	<div style="margin:20px 0;"></div>
	<table class="easyui-datagrid" title="DataGrid Row Style" style="width:700px;height:250px"
			data-options="
				singleSelect: true,
				iconCls: 'icon-save',
				url: 'datagrid_data1.json',
				method: 'get',
				rowStyler: function(index,row){
					if (row.listprice < 30){
						return 'background-color:#6293BB;color:#fff;font-weight:bold;';
					}
				}
			">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>

</body>
</html>