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

news/2024/7/5 3:02:07

【写在前面】其实之前业务中也有这个方面的需求，但是总觉得自己写的有点乱，此时也就借这个机会重新封装一个公共的函数去实现这个穿梭框的效果，支持分页勾选，页面展示已选中和未选择的数据，使得系统操作更友好。
涉及知识点：表格穿梭框自定义实现，表格配置化，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://lihuaxi.xjx100.cn/news/1023800.html

相关文章

前端项目打包并部署

前端项目打包并部署

一、vue项目打包 1.1 vue项目命令行打包 在当前项目路径下&#xff0c;执行命令 npm run build 在当前项目路径下&#xff0c;生成 一个dist文件夹。 将来部署项目&#xff0c;是部署的dist这个文件。 1.2 vue ui打包项目 选中项目&#xff0c;选择build 二、部署项目 1、…
阅读更多...
轻量级网络论文精度笔记(三)：《Searching for MobileNetV3》

轻量级网络论文精度笔记(三)：《Searching for MobileNetV3》

MobileNetV3论文链接论文名字参考文献1. 研究背景2. 创新贡献3. 相关工作3.1 高效移动端构建块4. 网格搜索5. 网络的改进5.1 重新设计计算复杂层5.2 设计Hard-Swish5.3 Large squeeze-and-excite5.4 MobileNetV3 Definitions6.仿真分析6.1 分类6.1.1 训练设置6.1.2 测量设置6.2…
阅读更多...
Games106学习记录第一课

Games106学习记录第一课

本文地址&#xff1a;https://blog.csdn.net/t163361/article/details/130139998 前段时间看到Games106课程&#xff0c;讲的是流水线的知识&#xff0c;比较感兴趣&#xff0c;准备跟着课程学习。 Games这个组织刚开始做公开课就混到群里了。讲的都是图形学上的东西。邀请的都…
阅读更多...
【算法】【算法杂谈】已知[1,m]的等概率函数，求[1,n]的等概率函数

【算法】【算法杂谈】已知[1,m]的等概率函数，求[1,n]的等概率函数

目录前言问题介绍解决方案代码编写java语言版本c语言版本c语言版本思考感悟写在最后前言 当前所有算法都使用测试用例运行过&#xff0c;但是不保证100%的测试用例&#xff0c;如果存在问题务必联系批评指正~ 在此感谢左大神让我对算法有了新的感悟认识&#xff01; 问题介绍 …
阅读更多...
第一章 初识NANO板卡

第一章 初识NANO板卡

有人说&#xff1a;一个人从1岁活到80岁很平凡&#xff0c;但如果从80岁倒着活&#xff0c;那么一半以上的人都可能不凡。 生活没有捷径&#xff0c;我们踩过的坑都成为了生活的经验&#xff0c;这些经验越早知道&#xff0c;你要走的弯路就会越少。 本文链接:第一章 初识NANO…
阅读更多...
【剑指offer-C++】JZ82：二叉树中和为某一值的路径(一)

【剑指offer-C++】JZ82：二叉树中和为某一值的路径(一)

【剑指offer-C】JZ82&#xff1a;二叉树中和为某一值的路径[一]题目描述解题思路题目描述 描述&#xff1a;给定一个二叉树root和一个值 sum &#xff0c;判断是否有从根节点到叶子节点的节点值之和等于 sum 的路径。 1.该题路径定义为从树的根结点开始往下一直到叶子结点所经…
阅读更多...
Java并发(二)----初次使用多线程并行提高效率

Java并发(二)----初次使用多线程并行提高效率

1、并行 并行代表充分利用多核 cpu 的优势&#xff0c;提高运行效率。 想象下面的场景&#xff0c;执行 3 个计算&#xff0c;最后将计算结果汇总。 计算 1 花费 10 ms ​ 计算 2 花费 11 ms ​ 计算 3 花费 9 ms ​ 汇总需要 1 ms 如果是串行执行&#xff0c;那么总共花费的…
阅读更多...
常用环境部署(七)——Docker安装RocketMQ

常用环境部署(七)——Docker安装RocketMQ

1、创建namesrv服务 &#xff08;1&#xff09;拉取镜像 docker pull rocketmqinc/rocketmq&#xff08;2&#xff09;创建一个数据目录 即创建一个namesrv数据存储路径 mkdir -p /docker/rocketmq/nameserver/logs /docker/rocketmq/nameserver/store&#xff08;3&#x…
阅读更多...
最新文章

Copyright @ 2022~2023