easyui(datagrid数据查询)

最新推荐文章于 2024-07-25 09:32:15 发布

呼啦啦dxy

最新推荐文章于 2024-07-25 09:32:15 发布

阅读量919

点赞数

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/weixin_66202611/article/details/124640374

版权

DataGrid是一款轻量级但功能丰富的表格组件，适用于快速开发，无需特殊知识。它可以展示并编辑数据，支持选择、排序、分组等功能。通过HTML和JavaScript，你可以创建和定制DataGrid，包括设置列字段、单元格合并等。示例展示了如何从现有表格元素或通过JS创建DataGrid，并通过JSON数据源加载信息。当数据量大时，可实现分页功能，以提高用户体验。

摘要由CSDN通过智能技术生成

简介：

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

《案例演示》

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

<table class="easyui-datagrid">   
    <thead>   
        <tr>   
            <th data-options="field:'code'">编码</th>   
            <th data-options="field:'name'">名称</th>   
            <th data-options="field:'price'">价格</th>   
        </tr>   
    </thead>   
    <tbody>   
        <tr>   
            <td>001</td><td>名称1</td><td>2323</td>   
        </tr>   
        <tr>   
            <td>002</td><td>名称2</td><td>4612</td>   
        </tr>   
    </tbody>   
</table>

此外，也允许使用Javascript去创建DataGrid控件。

#dg:获取到表格的id值

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'代码',width:100},    
        {field:'name',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]    
});

列属性

DataGrid列是一个数组对象，该元素也是一个数组对象。元素数组里面的元素是一个配置对象，它用来定义每一个列字段。

columns:[[    
    {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},    
    {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},    
    {title:'Item Details',colspan:4}    
],[    
    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},    
    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},    
    {field:'attr1',title:'Attribute',width:100},    
    {field:'status',title:'Status',width:60}    
]]

查询数据可以拿到json里面的数据进行查询一波，切记列名一个字母也不能错哦~~~

拿到数据后，如果数据太多我们可以尝试使用分页。前提是我们需要有一个分页的方法，然后在逻辑界面调用（如图所示）

《代码如下》

下需要做判断

        int pageIndex= 1;
		int pageSize= 10;

		//接收前台传递过来的参数
		String pid = request.getParameter("page");//当前页码
		if(pid!=null) {
			pageIndex = Integer.parseInt(pid);
		}
		String size = request.getParameter("rows");//每页多少条
		if(size!=null) {
			pageSize = Integer.parseInt(size);
		}
		String bname = request.getParameter("str");//关键字
		//判断
		if(bname==null) {
			bname="";//相当于查询全部
		}