datagrid之查询

爱嘤斯塔

于 2021-09-14 20:44:11 发布

阅读量255

点赞数

文章标签： easyui html jquery

本文链接：https://blog.csdn.net/weixin_60389087/article/details/120292422

版权

本期内容：完善上期内容，点击菜单栏跳转表格数据控件界面

一、datagrid的初步使用及链式编程结果类封装

1、点击人员信息维护，右侧Tab页显示书籍相关信息

思路：

①、要有一个存放书籍信息的展示页面

②、点击左侧菜单，显示对应页面

在js文件中改变跳转路径

content:'<iframe width="100%" height="100%" src="'+node.attributes.self.menuURL+'"></iframe>',

2、加入数据表格控件

根据帮助包写一个界面jsp与js,同时把数据导入：

Jsp主界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>存放书籍页面</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/icon.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/book.js"></script>

</head>

<body>

<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">

<table id="dg">

</table>

</body>

</html>

Js文件：由于数据路劲与js文件不在一个包内，转换路劲需要加“/”

$(function(){

$('#dg').datagrid({

url:$("#ctx").val()+'/datagrid_data1.json',

columns:[[

{field:'productid',title:'id',width:100},

{field:'productname',title:'名称',width:100},

{field:'unitcost',title:'价格',width:100,align:'right'}

]]

});

})

最终结果：

3、引入datagrid数据表格，以死数据的方式先引入进去

4、造数据

①、写一个与数据库对应的属性的类

②、在BookDao类写入得到数据的方法

public List<Book> list(Book book, PageBean pageBean) throws Exception {

String bname=book.getBname();

String sql="select * from t_mvc_book where 1=1";

if(StringUtils.isNotBlank(bname)) {

sql+=" and bname like '%"+bname+"%'";

}

return super.executeQuery(sql, Book.class, pageBean);

}

③、写子控制器BookAction

package lv.com.web;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.zking.framework.ActionSupport;

import com.zking.framework.ModelDriver;

import com.zking.util.PageBean;

import com.zking.util.ResponseUtil;

import lv.com.dao.BookDao;

import lv.com.entity.Book;

public class BookAction extends ActionSupport implements ModelDriver<Book>{

private Book book=new Book();

private BookDao bookDao=new BookDao();

@Override

public Book getModel() {

// TODO Auto-generated method stub

return book;

}

public String datagrid(HttpServletRequest req, HttpServletResponse resp) {

BookDao bookDao=new BookDao();

PageBean pageBean=new PageBean();

try {

List<Book> list = bookDao.list(new Book(), new PageBean());

ObjectMapper om=new ObjectMapper();

Map<String, Object> map=new HashMap<String, Object>();

map.put("total", pageBean.getTotal());

map.put("rows", list);

ResponseUtil.writeJson(resp, map);

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return null;

}

}

④、添加配置

<action path="/book" type="lv.com.web.BookAction">

</action>

⑤、在js中改变路径与属性

$(function(){

$('#dg').datagrid({

    url:$("#ctx").val()+'/book.action?methodName=datagrid',

    columns:[[

        {field:'id',title:'id',width:100},

        {field:'bname',title:'名称',width:100},

        {field:'price',title:'价格',width:100,align:'right'}

    ]]

});

})

5、分页

在easyui中，点击下一页上一页等默认的分页效果，携带的参数是page/rows

在bootstrap中，点击下一页上一页等默认的分页效果，携带的参数是page/offset

在js中添加分页方法

$(function(){
   $('#dg').datagrid({
   url:$("#ctx").val()+'/book.action?methodName=datagrid',
   pagination:true,
   columns:[[
   {field:'bid',title:'id',width:100},
   {field:'bname',title:'名称',width:100},
   {field:'price',title:'价格',width:100,align:'right'}
   ]]
   });

})

同时要在BookAction中的datagrid加入PageBean分页初始化

pageBean.setRequest(req);

6、创建一个工具类R，简约代码

package com.zking.util;

import java.util.HashMap;

public class R extends HashMap{

public R data(String key,Object value) {

this.put(key, value);

return this;

}

}

链式编程：

ResponseUtil.writeJson(resp, new R()

.data("total",pageBean.getTotal())

.data("rows", list));

相当于↓代码：

Map<String, Object> map=new HashMap<String, Object>();

map.put("total", pageBean.getTotal());

map.put("rows", list);

二、查询

填充，使数据填充界面：

fitColumns:true,

绑定数据：

toolbar:'#tb',

主界面添加查询的样式：

<div id="tb">

<input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">

<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>

</div>

使用参数查询数据：

$("#btn-search").click(function(){

$('#dg').datagrid('load', {

bname: $("#bname").val()

});

});

最终结果：

期待下次的完善~

爱嘤斯塔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
datagrid之查询

本期内容：完善上期内容，点击菜单栏跳转表格数据控件界面一、datagrid的初步使用及链式编程结果类封装1、点击人员信息维护，右侧Tab页显示书籍相关信息思路：①、要有一个存放书籍信息的展示页面②、点击左侧菜单，显示对应页面在js文件中改变跳转路径content:'<iframe width="100%" height="100%" src="'+node.attributes.self.menuURL+'"></ifram...
复制链接

扫一扫