easyui datagrid 数据的显示和查询

引用css、js

初始化DataGrid

$(document).ready(function() {
			$("#table").datagrid({  
				 'url':'${pageContext.request.contextPath}/Data.do',//异步请求数据的url
			         'fitColumns':true,//自动适应列大小
				 'autoRowHeight':true,//自动调整行的高度
				 'pagination':true,//设置分页
				 'pageSize':10,//设置显示页面数据行数
				 'pageList':[10,50,100],//设置显示页面的行数的选择
			         'rownumbers':true,//是否在行前面添加序号
				  'toolbar':'#tb',//添加工具栏，制定一个容器的id
				 'columns':[[    //指定数据的key值，以及列的名称
               {'field':'name','title':'姓名'},
               {'field':'age','title':'年龄'},
               {'field':'sex','title':'性别'},
               ]]
			});
		});

 

添加搜索功能

首先要添加搜索框，这个div的id就是toolbar指定的id。还要结合jQuery，load方法对datagrid进行加参数加载，另一个类似的是reload，它是只限于当前页。后端接收itemid和productid就可以进行查询了。

    字段1:
	
	字段2:
	
	搜索

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

前端和后台的数据传递

datagrid对数据的请求只用一个URL，而且每次都会传 page（页数）、rows（行数）。要想进行分页查询就要接收这两个参数。搜索传递的参数如上，可随意设置。

后台向前端响应数据是一般通过两个key，total（总数据条数）、rows（显示的数据）。前端是读取json数据类型的，所以在后台一定要将数据转成json。