jQuery EasyUI datagrid 翻页后保持选中状态的实现代码
171 浏览量
更新于2024-08-31
收藏 82KB PDF 举报
本文档主要关注如何在使用jQuery EasyUI datagrid（一种基于jQuery的用户界面组件库，用于创建动态表格）时，确保在页面进行分页操作后仍然能够记录并保持之前选中的行状态。EasyUI datagrid默认在分页后会清除已选中的行状态，这可能会导致用户体验上的不便。为了解决这个问题，作者提供了一段示例代码来实现这个功能。
首先，你需要在页面中引入必要的jQuery和EasyUI库，以及自定义的JavaScript代码。以下是一些关键部分：
1. 页面结构设置：
使用JSP（JavaServer Pages）语法，获取服务器路径信息，并将它插入到`<base>`标签和`<jsp:include>`标签中，以确保脚本的正确引用。
2. 引入EasyUI依赖：
在`<head>`部分，包括EasyUI的CSS和JS文件，以及可能的布局和script.jsp文件，这些文件通常包含了EasyUI组件的初始化设置和交互逻辑。
3. 初始化变量：
定义全局变量如`$dg`和`$grid`，它们将用于引用datagrid实例，`ids`用于存储选中的行ID，初始值设为空字符串。
4. 创建datagrid实例：
在`<script>`标签内，使用EasyUI的初始化函数创建一个datagrid实例，并将其赋值给`$dg`和`$grid`。这通常涉及到对HTML表格元素的操作，设置列定义、数据源等参数。
5. 选中行处理：
当用户选择一行时，将该行的ID添加到`ids`变量中，例如使用`$grid.datagrid('getSelections')`获取当前选中的行，然后将每个选中行的ID追加到`ids`后面。
6. 翻页后保存选中状态：
在分页操作（可能是通过EasyUI的内置分页插件）之后，需要重置选中状态。可以通过监听datagrid的`onBeforeLoad`事件，在事件处理函数中检查`ids`是否为空，如果不为空，说明有之前选中的行，此时将这些ID传给服务器端，请求返回的数据中包含已选中的行。
7. 服务器端处理：
服务器端代码应该接收这些ID，并在处理分页请求时，确保返回的数据集包含之前被选中的行。这样，即使在用户翻页后，所选中的行也会被重新显示。
8. 重新加载datagrid：
在接收到包含之前选中行的新数据后，调用`$grid.datagrid('load', newData)`，将处理过的数据加载回datagrid，这样选中的行状态就会被正确地恢复。
通过以上步骤，你就可以实现在jQuery EasyUI datagrid中进行翻页操作时，仍能保持选中行的状态。这是一个实用的功能，特别是在需要记录用户浏览历史或者需要在分页后保持某些选项状态的场景中。这个示例代码提供了基本的实现思路，根据实际项目需求，可能需要进一步优化和调整。
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码在翻页以后仍能记录被选中行的实现代码
主要介绍了jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参
考下
1、先给出问题解决后的代码、先给出问题解决后的代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>添加优惠券步骤2</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<jsp:include page="../layout/script.jsp"></jsp:include>
<c:set var="getDataUrl" value="${pageContext.request.contextPath}/goods/getGoodsOnSale" scope="request" />
<script type="text/javascript">
var $dg;
var $grid;
var ids = '';
var idsArray = new Array();
$(function() {
$dg = $("#dg");
$grid=$dg.datagrid({
url : "${getDataUrl}",
width : 'auto',
height : $(this).height()-85,
pagination:true,
rownumbers:true,
border:true,
striped:true,
singleSelect:false,
checkOnSelect:true,
selectOnCheck:true,
onBeforeLoad:function(data){
addSelectedGoodsIdToArray();
},
onLoadSuccess:function(data){
var rowsData = data.rows;
if(idsArray.length!=0){
$.each(idsArray,function(i,e){
for(var index=0;index<rowsData.length;index++){
if(rowsData[index].goodsId==e){
$dg.datagrid('selectRow',index);
}
}
});
}
},
onUncheck:function(rowIndex,rowData){
if(idsArray.length == 0){
}else{
for(var index=0;index<idsArray.length;index++){
if(idsArray[index] == rowData.goodsId){
removeArrayValue(idsArray,rowData.goodsId);
break;
}
}
}
},
columns : [ [ {field:'ck',checkbox:true},
{field : 'goodsId',hidden:true},
{field : 'goodsName',title : '商品标题',width : parseInt($(this).width()*0.3)},
{field : 'img1',title : '图片',width : parseInt($(this).width()*0.1),align : 'left',
formatter:function(value,row){
if(row.img1 != '')
return "<img src = '"+row.img1+"'/>";
else
return "<img src = '"+row.img1+"'/>";
}
},
{field : 'categoryId',title : '分类',width : parseInt($(this).width()*0.1),align : 'left',
formatter:function(value,row){
var cates = row.categorys;
for(var i=0;i<cates.length;i++){
if(cates[i].categoryId === row.categoryId){
return cates[i].categoryName;
}
}
}
},
{field : 'goodsNumber',title : '库存',width : parseInt($(this).width()*0.1)},
{field : 'isOnSale',title : '上架',width :parseInt($(this).width()*0.1),align : 'left',
formatter:function(value,row){
if(row.isOnSale){
return "<font color=green>是<font>";
} else{
return "<font color=red>否<font>";
}
}
下载后可阅读完整内容，剩余4页未读，立即下载
175 浏览量
487 浏览量
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
weixin_38517122
- 粉丝: 7
- 资源: 907
我的内容管理
展开
最新资源
- SSM动力电池数据管理系统源码及数据库详解
- R语言桑基图绘制与SCI图输入文件代码分析
- Linux下Sakagari Hurricane翻译工作：cpktools的使用教程
- prettybench: 让 Go 基准测试结果更易读
- Python官方文档查询库，提升开发效率与时间节约
- 基于Django的Python就业系统毕设源码
- 高并发下的SpringBoot与Nginx+Redis会话共享解决方案
- 构建问答游戏：Node.js与Express.js实战教程
- MATLAB在旅行商问题中的应用与优化方法研究
- OMAPL138 DSP平台UPP接口编程实践
- 杰克逊维尔非营利地基工程的VMS项目介绍
- 宠物猫企业网站模板PHP源码下载
- 52简易计算器源码解析与下载指南
- 探索Node.js v6.2.1 - 事件驱动的高性能Web服务器环境
- 找回WinSCP密码的神器：winscppasswd工具介绍
- xctools：解析Xcode命令行工具输出的Ruby库
