<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据网格-工具栏</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/layout.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/pagination.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/datagrid.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script>
</script>
</head>
<body>
<div style="background-color: #b3b3b3; border: 1px solid #666; width: 610px; height: auto; margin: 100px auto">
<div id="tt" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<div>
Date From: <input class="easyui-datebox" style="width:80px">
To: <input class="easyui-datebox" style="width:80px">
Attribute:
<input class="easyui-combobox" style="width:100px"
url="data/combobox_data.json"
valueField="id" textField="text">
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
</div>
<table id="table1" class="easyui-datagrid" style="width:610px; height: 300px"
iconCls="icon-save" rownumbers="true" pagination="true">
<!--数据网格（datagrid）列，并设置 'pagination' 属性为 true，它将在数据网格（datagrid）的底部
生成一个分页（pagination）工具栏。pagination将发送两个参数到服务器：
page：页码，起始值 1。
rows：每页显示行。-->
<thead>
<tr>
<th field="itemid" width="100">Item ID</th>
<th field="productid" width="100">Product ID</th>
<th field="listprice" width="100" align="right">List Price</th>
<th field="unitcost" width="100" align="right">Unit Cost</th>
<th field="attr1" width="100">Attribute</th>
<th field="status" width="100" align="center">Stauts</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
<tr>
<td>2</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
<tr>
<td>3</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
<tr>
<td>4</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
<tr>
<td>5</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
<tr>
<td>6</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
easyUI-datagrid带有工具栏和分页器的数据网格
猜你喜欢
转载自www.cnblogs.com/LindaBlog/p/9224852.html
今日推荐
周排行