EeasyUI常用组件(一)Datagrid

常用查询地址:

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" onclick="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);








本博客所有文章如无特别注明均为原创。作者:长颈鹿复制或转载请以超链接形式注明转自 SZY
原文地址《EeasyUI常用组件(一)Datagrid

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)