easyui datagrid之查询

最新推荐文章于 2022-05-13 09:28:46 发布

马六安

最新推荐文章于 2022-05-13 09:28:46 发布

阅读量402

点赞数 2

文章标签： easyui jquery 数据库

本文链接：https://blog.csdn.net/boy_10/article/details/120297574

版权

本文介绍如何在EasyUI的datagrid中实现数据库查询功能。首先创建包含jQuery和EasyUI引用的页面，接着引入datagrid_data1.json作为示例数据。然后通过编写实体类、DAO、Web Action，并利用链式编程优化代码。最后调整字段名称以匹配实体属性，实现从数据库动态加载数据，并展示查询结果的样式。

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

目标：在上次博客的基础上点击左侧树状图会出来数据库对应的页面并且有分页和查询效果

1：先创建一个相应的页面并且导入相对的jquery文件

注：因为数据库里是对应的路径

2：创建一个对应的js文件（我这是book.js）并且修改之前的路径并且把easyui中的源码导入到创建的js文件

jsp页面：

<table id="dg"></table> 
对应的js层：
$('#dg').datagrid({   
    url:'datagrid_data.json',   
    columns:[[   
        {field:'code',title:'代码',width:100},   
        {field:'name',title:'名称',width:100},   
        {field:'price',title:'价格',width:100,align:'right'}   
    ]]   
});

3：导入easyui中dome中的datagrid_data1.json

4：把第二步中的field中的名字改成第三步的名字就得到了第三步中的死数据

5：导入数据库中的数据

5.1:写实体类

以我的book举例

package com.lj.entity;

public class Book {
private int bid;
private String bname;
private float price;
public int getBid() {
	return bid;
}
public void setBid(int bid) {
	this.bid = bid;
}
public String getBname() {
	return bname;
}
public void setBname(String bname) {
	this.bname = bname;
}
public float getPrice() {
	return price;
}
public void setPrice(float price) {
	this.price = price;
}


public Book() {
	// TODO Auto-generated constructor stub
}
public Book(int bid, String bname, float price) {
	super();
	this.bid = bid;
	this.bname = bname;
	this.price = price;
}