EeasyUI常用组件（一）Datagrid

最新推荐文章于 2023-07-03 08:00:00 发布

szyly

最新推荐文章于 2023-07-03 08:00:00 发布

阅读量323

点赞数 1

分类专栏：基础文章标签： EasyUi

本文链接：https://blog.csdn.net/szyly/article/details/51839153

版权

基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

常用查询地址：

http://www.jeasyui.com/ 官方demo和api

http://www.jeasyuicn.com/api/ 中文api

http://www.runoob.com/jeasyui/jeasyui-mb-linkbutton.html 中文demo 内容不全

Datagrid 数据表格

使用方法（Usage Example）

从现有的表单元素创建数据表格，定义在html中的行，列和数据。

1.<table class="easyui-datagrid">  
2.    <thead>  
3.        <tr>  
4.            <th data-options="field:'code'">Code</th>  
5.            <th data-options="field:'name'">Name</th>  
6.            <th data-options="field:'price'">Price</th>  
7.        </tr>  
8.    </thead>  
9.    <tbody>  
10.        <tr>  
11.            <td>001</td><td>name1</td><td>2323</td>  
12.        </tr>  
13.        <tr>  
14.            <td>002</td><td>name2</td><td>4612</td>  
15.        </tr>  
16.    </tbody>  
17.</table>

通过<TABLE>标记创建的DataGrid。嵌套的<TH>标签定义的列的表。

1.<table class="easyui-datagrid" style="width:400px;height:250px"  
2.        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
3.    <thead>  
4.        <tr>  
5.            <th data-options="field:'code',width:100">Code</th>  
6.            <th data-options="field:'name',width:100">Name</th>  
7.            <th data-options="field:'price',width:100,align:'right'">Price</th>  
8.        </tr>  
9.    </thead>

   </table>

查询

<div id="tb" style="padding:3px">
		<span>Item ID:</span>
		<input id="itemid" style="line-height:26px;border:1px solid #ccc">
		<span>Product ID:</span>
		<input id="productid" style="line-height:26px;border:1px solid #ccc">
		<a href="#" class="easyui-linkbutton" plain="true" οnclick="doSearch()">Search</a>
	</div>

当用户输入查询值并按下查询按钮时，'doSearch' 函数将被调用：

function doSearch(){
		$('#tt').datagrid('load',{
			itemid: $('#itemid').val(),
			productid: $('#productid').val()
		});
	}

上面的代码调用了 'load' 方法来加载新的数据网格（datagrid）数据。我们需要传递 'itemid' 和 'productid' 参数到服务器。

服务器端代码

include 'conn.php';
	
	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
	$itemid = isset($_POST['itemid']) ? mysql_real_escape_string($_POST['itemid']) : '';
	$productid = isset($_POST['productid']) ? mysql_real_escape_string($_POST['productid']) : '';
	
	$offset = ($page-1)*$rows;
	
	$result = array();
	
	$where = "itemid like '$itemid%' and productid like '$productid%'";
	$rs = mysql_query("select count(*) from item where " . $where);
	$row = mysql_fetch_row($rs);
	$result["total"] = $row[0];
	
	$rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");
	
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;
	
	echo json_encode($result);