easyui04(datagrid数据查询)

news/2025/2/22 6:12:37/

一.datagrid数据表格

<script type="text/javascript">
    $(function(){
        //加载数据
        $('#myTable').datagrid({    
            url:ctx+'/goods.do',//请求路径  
            pagination:true,//显示分页栏
            fitColumns:true,//让列自动适应宽度
            singleSelect:true,//只允许选中一行
            toolbar: '#myTools',//加载工具栏
            loadMsg:'亲,正在努力加载中❥',//提示语句
            columns:[[    
                {field:'gid',title:'商品编号',width:100,align:'center'},    
                {field:'gname',title:'商品名称',width:100,align:'center'},    
                {field:'gprice',title:'商品价格',width:100,align:'center'},
                {field:'gxl',title:'商品销量',width:100,align:'center'},
                {field:'gkc',title:'商品库存',width:100,align:'center'},
                {field:'gtime',title:'商品时间',width:100,align:'center'},
                {field:'gpath',title:'商品图片',width:100,align:'center', formatter: function(value,row,index){
                    return '<img src="'+value+'" style="max-height:100px;max-width:100px;"/>';
                }},//value表示当前单元格的值,row表示当前行的数据对象,index表示当前行的索引
                {field:'ginfo',title:'商品简介',width:100,align:'center'},
                {field:'tid',title:'商品分类',width:100,align:'center'},
                {field:'gnamePinYin',title:'商品拼音',width:100,align:'center'},
            ]]

        }); 
        

total:总行数

rows:对象数组

二.Map集合(key-String value-Object) 

怎么存值?放一对 put(key,value)

        //Map集合
        Map<String,Object> mym = new HashMap<String,Object>();
        //开始存进去
        mym.put("total", rows);//行数
        mym.put("rows", ls);//集合

三.实现分页效果

/**
     * 模糊查询的分页
     * @param pageIndex 设置第几页
     * @param pageSize  每页多少条数据
     * @param str 关键字
     * @param colName 列名
     * @return 商品集合
     */
    public List<Type> page(int pageIndex, int pageSize, String str, String colName) {
        List<Type> ls = new ArrayList<>();
        try {
            con=DBAccess.getConnection();
            String sql="select * from tb_type where "+colName+" like '%"+str+"%' order by tid desc limit ?,?";
            ps=con.prepareStatement(sql);
            ps.setInt(1,(pageIndex-1)*pageSize);
            ps.setInt(2, pageIndex*pageSize);
            rs=ps.executeQuery();
            while(rs.next()) {
                Type t = new Type(rs.getInt(1), rs.getString(2));
                ls.add(t);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            DBAccess.close(con, ps, rs);
        }
        return ls;
    }

 

rows(每页多少条数据)

四.servlert接收

      //调用biz层
        IGoodsBiz igb = new GoodsBiz();
        
        int pageIndex=1;
        int pageSize=10;
        
        //接收参数 page rows str
        String pid = req.getParameter("page");
        pageIndex=Integer.parseInt(pid);
        String sid = req.getParameter("rows");
        pageSize=Integer.parseInt(sid);
        String str = req.getParameter("str");
        if(str==null) {
            str="";//相当于查询全部
        }
        //调用分页的方法得到对象集合
        List<Goods> ls = igb.page(pageIndex, pageSize, str, "gname");
        //调用方法得到总行数
        int rows = igb.getRows("tb_goods where gname like '%"+str+"%'");
        //Map集合
        Map<String,Object> mym = new HashMap<String,Object>();
        //开始存进去
        mym.put("total", rows);//行数
        mym.put("rows", ls);//集合
        
        //把Map集合转成json数据
        String jsonStr = JSON.toJSONString(mym);
        //输送到客户端
        out.print(jsonStr);
        


http://www.ppmy.cn/news/424243.html

相关文章

Chrome 扩展程序——Imagus:图片放大预览工具

主要介绍 Imagus 的功能及应用&#xff0c;Imagus 是一款简单实用的图片放大预览工具。 主要功能 Imagus 的功能非常单一&#xff0c;就是在浏览网页时&#xff0c;当鼠标悬停到一张图片后&#xff0c;会自动放大图片&#xff0c;进行预览&#xff0c;这在浏览技术博客&#…

亲测好用的PS图片无损放大插件:Blow Up 3 for Mac

Alien Skin Blow Up 3 for Mac是一款运行在Mac平台上的PS图片无损放大滤镜插件&#xff0c;这款alienskin滤镜插件适用于ps和lr&#xff0c;使用alien skin blow up 3 for mac后&#xff0c;在放大图片的同时也能保持图片的清晰度&#xff0c;质量不变&#xff0c;非常好用。 A…

鼠标移到图片上,图片放大

.Nei1 img{ width: 122px; height: 89.6px; float: left; padding: 2px 2px; transition: all 0.6s; } .Nei1 img:hover{ transform: scale(3.3); } 例&#xff1a;将鼠标悬停在一…

点击图片放大预览,遮罩屏幕放大展示

功能说明&#xff1a;将图片方格展示&#xff0c;点击某张图片可在当前页面进行预览&#xff0c;点击遮罩屏幕&#xff0c;并且方法显示&#xff0c;点击右上角x&#xff0c;放大的图片消失。 效果图如下&#xff1a; 1、引入fancy.js和fancy.css 路径根据项目实际路径改写&a…

如何把图片无损放大?教你图片怎么无损放大

随着数字图像技术的不断发展&#xff0c;图片无损放大成为了许多人关注的问题。当我们需要将小图片放大到更大的尺寸时&#xff0c;使用传统的放大方法可能会导致图片失真、模糊等质量问题。那么如何在保持高清晰度和精度的同时进行无损放大&#xff0c;一直是一个备受关注的课…

2023年英语六级作文模板

根据主题灵活进行修改&#xff0c;总字数217 In the contemporary world, with the rapid advance of science and technology, it’s great necessity for youngsters on campus to grasp digital skills. Reason and concrete evidence to support my view point are as fo…

mNGS 02:SnakeMake流程简介

<~生~信~交~流~与~合~作~请~关~注~公~众~号生信探索> 流程代码在&#xff1a;https://jihulab.com/BioQuest/SnakeMake-mNGS 或https://github.com/BioQuestX/SnakeMake-mNGS 教程链接在&#xff1a;https://doc.bioquest.cn/mngs mNGS Pipeline summary Metagenomic nex…

springboot redis实现缓存的例子

好的&#xff0c;下面是带注释的代码&#xff1a; 1. 添加Redis依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>2. 配置Redis连接&am…