【自定义表格穿梭框】自定义封装jqgrid表格穿梭框，支持分页复选全选（附完整源码及效果图）

news/2024/7/8 4:13:39

【写在前面】其实之前业务中也有这个方面的需求，但是总觉得自己写的有点乱，此时也就借这个机会重新封装一个公共的函数去实现这个穿梭框的效果，支持分页勾选，页面展示已选中和未选择的数据，使得系统操作更友好。
涉及知识点：表格穿梭框自定义实现，表格配置化，jqgrid分页勾选，jqgrid复选，jqgrid取消选中，jqgrid穿梭框，jqgrid配置化，前端工程化，jqgrid的onSelectRow，onSelectAll，表格左右穿梭选择。

目录

  • 效果图（文尾附完整demo云盘下载链接）
  • 1.创建一个jqgrid
    • 1.1本地数据生成jqgrid
    • 1.2支持分页选中数据（onSelectRow）
    • 1.3支持右边单个移除和批量移除功能
      • A、单个移除
      • B、批量移除
    • 1.4全选（取消）操作-onSelectAll
  • 2.代码实现模式（切记引入jqgrid.hddSelect.js）
    • 2.1纯表格模式
    • 2.2穿梭框表格展示
  • 3.源码分享区域
    • 百度网盘
    • 123云盘（下载不限速）
    • 片尾彩蛋

【 皇榜】支持博主的可以 一睹皇榜哟，等您上榜！

效果图（文尾附完整demo云盘下载链接）

在这里插入图片描述

版权声明：原创于CSDN博主-拄杖盲学轻声码，有疑惑可去留言私信哟！

1.创建一个jqgrid

创建的时候我们应该要做一个配置化的设置，我之前都是复制粘贴，导致前端代码的复用性很差，从而每次遇到这类需求的时候开发效率不是很高，因此，我特意花上一天的时间来整一个配置化表格生成；

1.1本地数据生成jqgrid

主要实现原则：通过配置变量来调用一个公共的方法去生成表格，目的就是便于解放双手，实现前端工程化，页面直接配置出来。
其中配置变量如下：

//表格配置参数
var jqgridType = {
    "isLocal": true,//是否为本地数据
    "data": fdata,  //返回的数据
    "postUrl": _postUrl,//请求数据的Url
    "isJavaPage": false,//是否后端分页
    "multiselect": true,//选择框模式是否有复选
    "tableDomId": "#jqGridNotSelectScriptList",//表格dom的节点id名
    "tableParentDomId": "#main_list",//表格dom的节点id名
    "tableParentTopDomId": ".list-content",//表格dom的节点id名
    "pageDomId": "#jqGridPaperNotSelectScript",//分页dom的节点id名
    "main_list_height": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")),
    "tableHeight": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")) - 118,
    "selectData": [],//表示初始选中的数据
    "colsKeys": _colsKeys,//表示显示行
    "rowNum": 10,//一页显示多少条
    "rowList": [10, 20, 50],//可供用户选择一页显示多少条
    "sortname": 'id',//初始化的时候排序的字段
    "sortorder": 'desc',//排序方式
    "gridCompleteFunc": _gridCompleteFunc
}

创建单个表格页面，通过配置实现的：
在这里插入图片描述

1.2支持分页选中数据（onSelectRow）

首先我们应该定义一个临时存放选中数据的数组变量，初始时候我们应该去赋值。
这个数组变量就是为了让页面在翻页时候通过这个变量来进行数据的精准勾选，后续所有的勾选和不勾选就是对这个变量的增删操作。如下所示效果：
在这里插入图片描述

1.3支持右边单个移除和批量移除功能

之前我做的时候就没有考虑批量操作这块，导致使用很不方便，这次我就特意针对已选的进行处理操作。

A、单个移除

主要针对两个页面的重载，尤其是出现这种现象，当你处于第三页时候，你去移除第三页数据，有时候就会刷新到第一页，那样看不到左侧取消的现象，所以就不好弄，这个时候我做了一个页码记录的操作，单独移除后只刷新左侧指定页码。
如下所示效果图：
在这里插入图片描述

B、批量移除

批量的话主要针对右侧所有勾选的数据进行移除，同时刷新右侧数据，执行效果如下所示：
在这里插入图片描述

1.4全选（取消）操作-onSelectAll

这个也是大家批量操作最常用的，首先我们这边介绍的是当前页批量操作，主要涉及后面有后端分页，数据量会很大，社会影响不好。
首先大家应该都知道jqgrid有内置函数onSelectAll，我也是通过这个方法体来做的，同样的道理，只要获取到当前页勾选的数据，然后和存放选中的数组变量作对比。
当全选时：如果是对比后的数据存在数组不添加，不存在则添加
当取消时：如果存在则删除，不存在爱干嘛干嘛；
实现效果如下所示：
在这里插入图片描述

2.代码实现模式（切记引入jqgrid.hddSelect.js）

其实这边我们可以根据自己的喜好去构建，目前支持纯表格展示和左右双表格穿梭展示，切记先引入我开发的jqgrid.hddSelect.js文件，然后再实现如下操作

2.1纯表格模式

html设置dom元素用于存放表格

<div id="main_list">
   <table id="jqGridHddLeft"></table>
    <div id="jqGridPaperHddLeft"></div>
</div>

Js配置如下：

var _pageWidth = $("#main_list").width();
//左侧配置文件-表格列
var _colsLeft = [
    { label: 'id', name: 'id', width: 0.15 * _pageWidth, key: true },
    { label: '名称', name: 'name', width: 0.35 * _pageWidth },
    { label: '描述', name: 'desc', width: 0.5 * _pageWidth },
];
//左侧配置文件-核心
var jqgridTable = {
    "isLocal": true,//是否为本地数据
    "data": [],  //返回的数据
    "postUrl": "",//请求数据的Url
    "isJavaPage": false,//是否后端分页
    "multiselect": false,//选择框模式是否有复选
    "tableDomId": "#jqGridHddLeft",//表格dom的节点id名
    "tableParentDomId": "#main_list",//表格dom的节点id名
    "tableParentTopDomId": ".list-content",//表格dom的节点id名
    "pageDomId": "#jqGridPaperHddLeft",//分页dom的节点id名
    "main_list_height": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")),
    "tableHeight": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")) - 118,
    "selectData": [],//表示初始选中的数据
    "colsKeys": _colsLeft,//表示显示行
    "rowNum": 10,//一页显示多少条
    "rowList": [10, 20, 50],//可供用户选择一页显示多少条
    "sortname": 'id',//初始化的时候排序的字段
    "sortorder": 'desc',//排序方式
    "gridCompleteFunc": function () { gridCompleteFunc("#jqGridHddLeft", jqgridTable) },
    "isSupportSelectRow": true,//是否支持穿梭功能
    "SelectRole": "left",//穿梭角色
    "page": 1,
}
$(function () {
    //初始化加载左侧
    jqgridTableCommFunc(jqgridTable);
})

2.2穿梭框表格展示

穿梭框相对复杂一些，但是有我整理的组件你就可以通过配置来实现了
Html 源码Dom创建

<div id="main_list">
   <div class="mainchoose notSelectCom">
        <h2>未选中区</h2>
        <table id="jqGridNotSelectScriptList"></table>
        <div id="jqGridPaperNotSelectScript"></div>
    </div>
    <div class="mainchoose hasSelectCom">
        <h2>已选中区<button onclick="doRemoveSelectComBatch('#jqGridHasSelectScriptList')">批量移除</button></h2>
        <table id="jqGridHasSelectScriptList"></table>
    </div>
</div>

JS源码功能实现

var _pageWidth = $(".mainchoose").width() - 35;
//左侧配置文件-表格列
var _colsLeft = [
    { label: 'id', name: 'id', width: 0.15 * _pageWidth, key: true },
    { label: '名称', name: 'name', width: 0.35 * _pageWidth },
    { label: '描述', name: 'desc', width: 0.5 * _pageWidth },
];
//左侧配置文件-核心
var jqgridTable = {
    "isLocal": true,//是否为本地数据
    "data": [],  //返回的数据
    "postUrl": "",//请求数据的Url
    "isJavaPage": false,//是否后端分页
    "multiselect": true,//选择框模式是否有复选
    "tableDomId": "#jqGridHddLeft",//表格dom的节点id名
    "tableParentDomId": "#main_list",//表格dom的节点id名
    "tableParentTopDomId": ".list-content",//表格dom的节点id名
    "pageDomId": "#jqGridPaperHddLeft",//分页dom的节点id名
    "main_list_height": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")),
    "tableHeight": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")) - 118,
    "selectData": [],//表示初始选中的数据
    "colsKeys": _colsLeft,//表示显示行
    "rowNum": 10,//一页显示多少条
    "rowList": [10, 20, 50],//可供用户选择一页显示多少条
    "sortname": 'id',//初始化的时候排序的字段
    "sortorder": 'desc',//排序方式
    "gridCompleteFunc": function () { gridCompleteFunc("#jqGridHddLeft", jqgridTable) },
    "isSupportSelectRow": true,//是否支持穿梭功能
    "SelectRole": "left",//穿梭角色
    "page": 1,
}
//右侧配置-表格列
var _rightDomTable = "#jqGridHddRight"
var _colsRight = [
    { label: 'id', name: 'id', width: 0.15 * _pageWidth, key: true },
    { label: '名称', name: 'name', width: 0.35 * _pageWidth },
    { label: '描述', name: 'desc', width: 0.35 * _pageWidth },
    { label: '操作', name: 'act', index: 'act', width: 0.15 * _pageWidth },
];
//右侧配置-核心
var jqgridTableSelect = {
    "isLocal": true,//是否为本地数据
    "data": [],//表示初始选中的数据
    "postUrl": "",//请求数据的Url
    "isJavaPage": false,//是否后端分页
    "multiselect": true,//选择框模式是否有复选
    "tableDomId": _rightDomTable,//表格dom的节点id名
    "tableParentDomId": "#main_list",//表格dom的节点id名
    "tableParentTopDomId": ".list-content",//表格dom的节点id名
    "pageDomId": "",//分页dom的节点id名
    "main_list_height": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")),
    "tableHeight": $(".list-content").outerHeight() - $("#main_list").position().top - parseInt($("#main_list").css("padding-top")) - 78,

    "selectData": [],//表示初始选中的数据
    "colsKeys": _colsRight,//表示显示行
    "rowNum": 9999999,//一页显示多少条
    "rowList": [10, 20, 50],//可供用户选择一页显示多少条
    "sortname": 'id',//初始化的时候排序的字段
    "sortorder": 'desc',//排序方式
    "gridCompleteFunc": function () { gridCompleteFuncRight(_rightDomTable) },
    "isSupportSelectRow": true,//是否支持穿梭功能
    "SelectRole": "right",//穿梭角色
}
$(function () {
    //初始化加载左侧
    jqgridTableCommFunc(jqgridTable);
    //初始化加载右侧
    jqgridTableCommFunc(jqgridTableSelect);
})

其实最终我们还是为了拿到选择的数据，然后做入库数据操作。

版权声明：原创于CSDN博主-拄杖盲学轻声码，有疑惑可去留言私信哟！

3.源码分享区域

百度网盘

链接：https://pan.baidu.com/s/1gn-nAlJUtYo2MmAt-_bsMQ
提取码：hdd6

123云盘（下载不限速）

链接：https://www.123pan.com/s/ZxkUVv-6CJ4.html
提取码:hdd6

片尾彩蛋

倾心打造佳作，愿解君之惑，如若有幸，盼君上榜助阵，特此敬谢！
皇榜入口点击此处


http://www.niftyadmin.cn/n/218770.html

相关文章

【软件测试】入门基础

【软件测试】入门基础

目录 1. 软件测试的生命周期 &#xff08;1&#xff09;测试人员在软件开发生命周期做的事情 &#xff08;2&#xff09;测试人员在软件测试生命周期做的事情 &#xff08;3&#xff09;测试报告怎么写&#xff1a; 2. 如何描述一个bug 3. 如何定义bug的级别 4. bug的生命周期 …
阅读更多...
开放原子训练营（第三季）RT-Thread Nano学习营-第一课心得

开放原子训练营（第三季）RT-Thread Nano学习营-第一课心得

1、简介 本人学习并使用 RT-Thread 一个重要的原因是&#xff1a;它是一款由国内开源社区主导开发的开源实时操作系统&#xff01;&#xff01;&#xff01; 为国产化点赞&#xff0c;项目中如果有要求国产化的&#xff0c;肯定也绕不开它。 RT-Thread支持国产化芯片&#xff…
阅读更多...
数据库系统概论(第五版) 王珊 第四章 课后习题答案

数据库系统概论(第五版) 王珊 第四章 课后习题答案

目录 &#xff08;一&#xff09;数据库安全性の概念 1. 什么是数据库的安全性 2.数据库安全性和计算机系统的安全性有什么关系? 4.试述实现数据库安全性控制的常用方法和技术 5.什么是数据库中的自主存取控制方法和强制存取控制方法? &#xff08;二&#xff09;考试…
阅读更多...
解决macOS IntelliJ IDEA 卡顿问题

解决macOS IntelliJ IDEA 卡顿问题

写在前面的话1&#xff1a;我在撰写这篇博客时候&#xff0c;所用的IntelliJ IDEA版本是IntelliJ IDEA 2022.3.3 (Ultimate Edition)&#xff0c;你需要知道可能对于不同的IntelliJ IDEA版本会有一定的差异 写在前面的话2&#xff1a;如果我这篇博客可以帮助到你&#xff0c;请…
阅读更多...
Java模拟rank() over()函数获取分组排名的方法设计及实现

Java模拟rank() over()函数获取分组排名的方法设计及实现

背景 考试批次班级姓名语文202302三年一班张小明130.00202302三年一班王二小128.00202302三年一班谢春花136.00202302三年二班冯世杰129.00202302三年二班马功成130.00202302三年二班魏翩翩136.00 假设我们有如上数据&#xff0c;现在有一个需求需要统计各学生语文单科成绩在班…
阅读更多...
Nginx快速上手

Nginx快速上手

Nginx快速上手 OVERVIEWNginx快速上手一、基本概念1.Nginx初步认识2.正向/反向代理&#xff08;1&#xff09;正向代理&#xff08;2&#xff09;反向代理二、Nginx 安装和配置1.安装2.Nginx指令3.Nginx配置三、Nginx的使用1.Web服务器&#xff08;1&#xff09;静态网页存储目…
阅读更多...
【外设零基础通用教程】GPIO 上

【外设零基础通用教程】GPIO 上

【外设零基础通用教程】GPIO 上视频/文章结构外设&#xff1a;GPIO代码编写GPIO输入方法GPIO输出方法视频地址&#xff1a; [此内容发布后&#xff0c;会先给硬件群看&#xff0c;如果没问题才会录制视频&#xff0c;视频录制完成后在这里替换] 本教程适合&#xff1a; 硬件零…
阅读更多...
面向削峰填谷的电动汽车多目标优化调度策略

面向削峰填谷的电动汽车多目标优化调度策略

说明书 MATLAB代码&#xff1a;面向削峰填谷的电动汽车多目标优化调度策略 关键词&#xff1a;电动汽车 削峰填谷 多目标 充放电优化 参考文档&#xff1a;店主自己整理的说明文档&#xff0c;公式、约束、数据齐全&#xff0c;可联系我查看 仿真平台&#xff1a;MATLAB YA…
阅读更多...
最新文章

Copyright @ 2022~2023