Jquery EasyUI操作表格，分页显示

最新推荐文章于 2024-09-21 19:42:30 发布
最新推荐文章于 2024-09-21 19:42:30 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syb18810107241/article/details/14524183
版权
  1. JSP页面代码 
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Pagination - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/themes/icon.css">
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/css/themes/demo.css">
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
	<script>  
        $(function(){  
            $('#test').datagrid({  
                title:'我的表格',  
                iconCls:'icon-save',  
                width:700,  
                height:350,  
                nowrap: true,  
                autoRowHeight: false,  
                striped: true,  
                collapsible:true,  
                url:'showAllUser.action', //服务器地址,返回json格式数据 
                sortName: 'code',  
                sortOrder: 'desc',  
                remoteSort: false,  
                idField:'code',  
                frozenColumns:[[  
                    {field:'ck',checkbox:true},  
                    {title:'代码',field:'code',width:80,sortable:true}  
                ]],  
                columns:[[  
                    {title:'基本信息',colspan:3},  
                    {field:'opt',title:'操作',width:100,align:'center', rowspan:2,  
                        formatter:function(value,rec,index){  
                            return '<span style="color:red"><a href="#" οnclick="testSave('+rec.code+')">修改</a> <a href="">删除</a></span>';  
                        }  
                    }  
                ],[  
                    {field:'name',title:'姓名',width:120},  
                    {field:'addr',title:'地址',width:220,rowspan:2,sortable:true,  
                        sorter:function(a,b){  
                            return (a>b?1:-1);  
                        }  
                    },  
                    {field:'col4',title:'第4列',width:150,rowspan:2}  
                ]],  
                pagination:true,  //分页控件
                rownumbers:true,  //行号
                toolbar:[{  
                    id:'btnadd',  
                    text:'添加',  
                    iconCls:'icon-add',  
                    handler:function(){  
                        $('#btnsave').linkbutton('enable');  
                        alert('这里是添加的代码')  
                    }  
                },{  
                    id:'btncut',  
                    text:'剪切',  
                    iconCls:'icon-cut',  
                    handler:function(){  
                        $('#btnsave').linkbutton('enable');  
                        alert('这里是剪切的代码')  
                    }  
                },'-',{  
                    id:'btnsave',  
                    text:'保存',  
                    disabled:true,  
                    iconCls:'icon-save',  
                    handler:function(){  
                        $('#btnsave').linkbutton('disable');  
                        alert('这里是保存的代码')  
                    }  
                }]  
            });  
            var p = $('#test').datagrid('getPager');  
            $(p).pagination({  
                pageSize: 10,//每页显示的记录条数，默认为10
                pageList:[5,10,15,20],//每页显示几条记录
                beforePageText: '第',//页数文本框前显示的汉字 
                afterPageText: '页    共 {pages} 页', 
                displayMsg: '当前显示 {from} - {to} 条记录    共 {total} 条记录', 
                onBeforeRefresh:function(){  
                    $(this).pagination('loading');//正在加载数据中...
            	    alert('before refresh');
            	    $(this).pagination('loaded'); //数据加载完毕
                }  
            });  
        });  
        function resize(){  
            $('#test').datagrid('resize', {  
                width:700,  
                height:400  
            });  
        }  
        function getSelected(){  
            var selected = $('#test').datagrid('getSelected');  
            if (selected){  
                alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);  
            }  
        }  
        function getSelections(){  
            var ids = [];  
            var rows = $('#test').datagrid('getSelections');  
            for(var i=0;i<rows.length;i++){  
                ids.push(rows[i].code+":"+rows[i].name+":"+rows[i].addr+":"+rows[i].col4);  
            }  
            alert(ids.join(':'));  
        }  
        function clearSelections(){  
            $('#test').datagrid('clearSelections');  
        }  
        function selectRow(){  
            $('#test').datagrid('selectRow',2);  
        }  
        function selectRecord(){  
            $('#test').datagrid('selectRecord','002');  
        }  
        function unselectRow(){  
            $('#test').datagrid('unselectRow',2);  
        }  
        function mergeCells(){  
            $('#test').datagrid('mergeCells',{  
                index:2,  
                field:'addr',  
                rowspan:2,  
                colspan:2  
            });  
        } 
        
        function testSave(value){
          alert('测试保存'+value);
        } 
    </script>
	</head>
	<body>
		<h2>
			复杂数据表格 - Complex DataGrid
		</h2>
		<div class="demo-info">
			<div class="demo-tip icon-tip"></div>
			<div>
				单击按钮试验数据表格各项功能。
				<br>
			</div>
		</div>

		<div style="margin: 10px 0;">
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="getSelected()">取得选中项</a>
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="getSelections()">取得所有</a>
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="selectRow()">选择行（2）</a>
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="selectRecord()">通过ID选择行（002）</a>
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="unselectRow()">取消行检查</a>
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="clearSelections()">取消已选</a>
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="resize()">缩放布局（W:700H:400</a>
			<a href="#" class="easyui-linkbutton" data-options="plain:true" οnclick="mergeCells()">合并单元格</a>
		</div>

		<table id="test">
		  
		</table>
	</body>
</html>
  2. Action（采用Struts2，注意导入struts2对json支持的插件jar包，User已省略） 
    package com.jingyoutimes.web.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONObject;

import com.jingyoutimes.domain.User;
import com.opensymphony.xwork2.ActionSupport;

public class PageAction extends ActionSupport {
	private JSONObject result;//返回的json 
    
    private String rows;//每页显示的记录数 
       
    private String page;//当前第几页  
    
   
    public String showAllUserAction() throws Exception {
        //当前页,page由分页工具负责传过来
        int intPage = Integer.parseInt((page == null || page == "0") ? "1":page); 
        //每页显示条数 
        int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows); 
        //每页的开始记录  第一页为1  第二页为number +1  
        int start = (intPage-1)*number;  
    	Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map 
	    List<User> users = new ArrayList<User>();//每一页存放的数据
	    for(int i = start;i < (start+number);i ++){
	    	User user = new User();
	    	user.setCode("00"+i);
	    	user.setName("姓名"+i);
	    	user.setAddr("地址"+i);
	    	users.add(user);
	    }
        jsonMap.put("total", 20);//total键 存放总记录数，必须的 ,EasyUI根据这个参数，可以计算page和number的值，这个值不是users的长度
        jsonMap.put("rows", users);//rows键 存放每页记录 list 
        result = JSONObject.fromObject(jsonMap);//格式化result   一定要是JSONObject  
    	return SUCCESS;
    }

	public JSONObject getResult() {
		return result;
	}

	public void setResult(JSONObject result) {
		this.result = result;
	}

	public String getRows() {
		return rows;
	}

	public void setRows(String rows) {
		this.rows = rows;
	}

	public String getPage() {
		return page;
	}

	public void setPage(String page) {
		this.page = page;
	}
}
  3. struts配置文件 
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
    <constant name="struts.enable.DynamicMethodInvocation" value="false" />
    <constant name="struts.devMode" value="true" />

    <package name="default" namespace="/" extends="struts-default">
        <result-types>
			<result-type name="json"
				class="org.apache.struts2.json.JSONResult" />
		</result-types>
       
        <action name="showAllUser" class="com.jingyoutimes.web.action.PageAction" method="showAllUserAction">
           <result type="json">  
                <param name="root">result</param>  
            </result>
        </action>
    </package>
</struts>

    【可以先完全复制上面的代码，根据自己的需要进行修改。只要做好了配置，直接访问JSP页面即可。话不多说，看看效果吧！】
syb18810107241
关注
专栏目录
easyui简单表格实现分页案例
03-26
基于ssm框架使用easyui简单表格实现分页案列 附带mysql数据库表
jQuery EasyUI Pagination实现分页的常用方法
11-23
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列组件，包括 datagrid，用于创建数据表格。在 datagrid 中，分页功能对于处理大量数据至关重要，因为它允许用户以更易于管理的方式浏览信息。EasyUI 提供...
jquery easyui datagrid 分页 详解
huozhicheng的专栏
09-07 1万+
由于项目原因，用了jquery easyui 感觉界面不错，皮肤样式少点，可是官网最近打不开了，资料比较少，给的demo没有想要的效果，今天在用datagrid 做分页显示的时候，折腾了半天，网上的资料也比较少，后自己动手，终于解决，废话不说，开始： datagrid分页 有一
EasyUI实现表格分页
王绍桦
07-17 2784
1.官网下载EasyUI地址：http://www.jeasyui.com/download/list.php   （我的资源地址：https://download.csdn.net/download/rexueqingchun/10547000） 2.页面使用及添加所依赖的JS和CSS &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt...
Easyui table分页
shalyniu的博客
08-05 1066
easyui table 分页
EasyUI-数据表格的客户端分页
dxm809的博客
03-29 393
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
10-20
总的来说，使用 jQuery EasyUI 的 `onLoadSuccess` 事件结合 `appendRow` 和 `mergeCells` 方法，以及对 DOM 元素的直接操作，可以定制化地处理表格加载错误，并提供更加个性化的用户体验。同时，对细节的调整如隐藏...
jQuery EasyUI datagrid实现本地分页的方法
10-24
jQuery EasyUI datagrid是一个基于jQuery和EasyUI的UI组件库，提供了丰富的界面组件，其中的datagrid组件用于创建数据表格。 传统的分页方法通常是由后端服务器完成，即将全部数据检索出来后，由服务器端根据分页...
jqueryEasyUI
07-16
- **对话（Dialog）**：与窗口类似，但通常用于更复杂的情境，如确认操作、显示详细信息等。 - **面板（Panel）**：用于封装内容，可以有标题、边框和滚动条，常用于展示模块化内容。 - **树形控件（Tree）**：展示...
topjui/easyui 表格分页简单实例
qq_42750608的博客
09-30 1377
$('#dg').datagrid({ rownumbers:true, //行号 singleSelect:true, //单选 autoRowHeight:false, //自动行高 pagination:true, //显示表格下面的分页插件 fitColumns:true, //字段自动分配 collapsible:true, //表单收缩 checkOnSelect : f...
easyui分页
weixin_30852451的博客
07-21 140
分页往往是依附于数据表格的，所以我们就使用的是easyui的datagrid组件，来开启pagination分页组件，为了方便，我们使用js实现。 表格显示初始化 [html] view plain copy print? <table id="dg"></table> <script> ...
EasyUI-自定义数据表格分页
dxm809的博客
04-01 364
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui 列表及分页
lijunjie818的博客
11-20 944
datagrid：向用户展示列表数据。 创建 DataGrid 来显示用户信息 在jsp中 js中 $('#dg').datagrid({ title:'用户列表', iconCls:'icon-edit',//图标 width: 700, height: 'auto', now
jQuery EasyUI datagrid本地分页
热门推荐
笔心
05-22 1万+
一般分页都是后台做，前端做无论从
EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）
听得到微笑的博客
09-26 1万+
        在前端页面中使用EasyUI框架时，通常会使用EasyUI自带的datagrid（数据表格）样式，下面我们对datagrid样式进行简单的介绍，并且会对datagrid的分页显示进行详细的介绍。         EasyUI的数据表格的实现有多种方式，下面我们介绍一下常用的几种。 1. 将静态HTML渲染为datagrid样式 &lt;!DOCTYPE html PUBLI...
easyUI之datagrid（数据表格）使用(1)
最新发布
2401_87288988的博客
09-21 756
注意：js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果，携带的参数为page和rows。js文件中不支持el表达式 在easyUI中点击上一页下一页默认的分页效果，携带的参数为page/rows。* 在bootstrap中点击上一页下一页默认的分页效果，携带的参数为page和offset。在bootstrap中点击上一页下一页默认的分页效果，携带的参数为page/offset。{field:‘productname’,title:‘名称’,width:100},
easyui系列-datagrid分页 物理分页
yuxiaoc的博客
06-02 232
datagrid分页：客户端和服务端分页 这里用服务端分页，实时性好。 data-options=" iconCls: 'icon-edit', singleSelect: true, toolbar: '#allStuInfoTb', url: '/getAllStuInfo', method: 'get', <%--
EasyUI DataGrid 使用（分页，url数据获取，data转json）
weixin_30902675的博客
07-18 454
EasyUI算是比较有名的，搜一下网上的资料也比较多，具体的参数，下载地址我就不写了 平常也不怎么写文章，大部分都是代码，有不能运行的可以直接评论回复 有可能遇到的问题： json数据格式，这个要仔细对下，有错误的话无法正常显示数据 分页的原理： 向后台传递页数、和每页显示的条数，然后用sql语句取出对应的数据，转换为json字符串传到前台 首先，页面视图代码 <sc...
easyui中datagrid表格页面自适应带分页
xinzaiz的博客
05-20 181
//ms datagrid 的 表格id值 例如: ms="#dg" function datagrids(ms){ $(window).resize(function () { $(ms).datagrid(‘resize’, { width: $(window).width() - 10, height: $(window).height() - 35 }).datagrid(‘resize’, { width: $(window).width() - 10, height: $(window).h
jQuery EasyUI 中文教程：拖放操作详解
这需要结合其他 jQuery EasyUI 组件，例如面板（`panel`）或表格（`datagrid`）来展示商品列表和购物车内容，并通过监听拖放事件来更新后台数据和显示总价。 此外，jQuery EasyUI 还提供了许多其他功能，包括但不...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值