jqGrid单选一行实现

最新推荐文章于 2021-03-10 21:11:07 发布
最新推荐文章于 2021-03-10 21:11:07 发布
阅读量1.3w 收藏 10
点赞数 5
分类专栏： 前端 文章标签： jqGrid只选一行 jqGrid只能选择一行 jqGrid单选一行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java0311/article/details/45575517
版权

以下三个属性缺一不可：

multiselect: true,
multiboxonly:true,
beforeSelectRow: beforeSelectRow,//js方法

function beforeSelectRow()
	{
    	$("#jqgridId").jqGrid('resetSelection');
	    return(true);
	}

这样就可以完成只选择一行记录的操作了。

传奇1949
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
jqGridDemo
07-08
jqGrid是一款功能强大的JavaScript数据网格插件，常用于在网页上展示、操作和管理大量结构化数据。这个"jqGridDemo"很可能是包含了演示jqGrid功能的实例代码和相关资源，帮助开发者理解和学习如何在实际项目中应用...
jqGrid_5.3.1
08-27
jqGrid的核心特点之一就是使用AJAX技术实现与服务器端的异步通信。这使得用户无需刷新整个页面，就能动态加载、更新表格数据，提高了用户体验。通过配置请求参数和回调函数，开发者可以灵活控制数据的获取和处理...
JQGrid单选一行实现
Cafuf的博客
08-22 850
JQGrid中的属性 multiselect: true, multiboxonly:true, beforeSelectRow: true   beforeSelectRow:function(){ $("#dataTable").jqGrid('resetSelection'); return true ; }, onSelectAll: function...
jqgrid 单选
淘淘小窝
07-02 2740
方法一: beforeSelectRow: function(rowid, e) { $(this).jqGrid('resetSelection'); return(true); },方法二: onSelectRow: function (rowId, status, e) { co
jqgrid 实现基础的单行编辑功能
benmin1的博客
09-30 722
1.html代码<table id="tableList" style="text-align:center;"></table> <div id=tablePager></div>2.script代码<script type="text/javascript"> var lastId;//行编辑时用来存放行的id $(function(){
jqgrid使用三个函数实现单选，选中再翻页还是选中
进行中
09-12 559
var selectArr = [];//全局数组 gridComplete onSelectRow beforeSelectRow 三个函数实现单选，翻页也可以选中 CHNL_CODE是一行记录的唯一id，每一行都有 $(function(){ //loadComplete jqGrid加载完毕之后执行里面的函数, //jqGrid中的数据变...
jqgrid使用
08-31
- **行选择**：提供单选和多选模式，可以获取选中行的数据。 - **工具栏**：可以自定义工具栏，添加按钮或其他UI元素。 ### 5. 样式定制 `ui.jqgrid.css`文件提供了默认的样式，你可以根据需求调整或覆盖这些样式...
jqGrid组件
05-29
7. 行选择：jqGrid支持单选和多选，选中的行可以进行操作，如删除或编辑。 8. 国际化：jqGrid支持多种语言，方便不同地区的用户使用。 9. 高级特性：如行拖放、树形结构展示、子表嵌套、数据导出等功能，使得...
jqGrid_JS_4.7.1
02-10
jqGrid_JS_4.7.1 是一个基于JavaScript的开源数据网格组件，主要用于展示和管理大量数据。这个版本4.7.1是jqGrid的一个重要里程碑，提供了丰富的功能和优化，使得网页应用能够高效地处理表格数据。下面将详细介绍这...
将jqGrid复选框多选变成单选
笑到世界都狼狈的博客
04-07 1334
首先看图： 其次代码： multiselect: true,//将jqGridTable中默认的复选框改成单选效果 multiboxonly:true,//将jqGridTable中默认的复选框改成单选效果 beforeSelectRow:beforeSelectRow,//将jqGridTable中默认的复选框改成单选效果 /** * 将jqGridTable中默认的复选框...
jqGrid获取选中的行、多行对象
Planing & Design & Arrange & Do & willWinner
08-02 2654
一、获取jqGrid框架选中的行对象 实现思路:1.通过JqGrid提供的API获取到当前选中的行标识(rowId); 2.再根据行标识从框架中获取选中的行对象. 1：var selrow =jQuery("#identifying").jqGrid("getGridParam","selrow"); 2...
jqGrid的单选设置
KX_JoyK的博客
02-20 918
  jqgrid需要设置成选项固定选中,代码如下 onSelectRow: function (id) {                     if (ids.length &lt;= 0)                         ids = $(this).jqGrid('getGridParam', 'selarrrow');     //获取选中行的ID           ...
JqGrid 添加单选列
xuanwuziyou的专栏
06-25 4923
1.效果 2.
关于jqgrid多选框“各种问题”
qq_27203243的博客
05-31 3640
经过我将近一天的时间终于解决了，jqgrid复选框的问题，废话不多说。（底部有代码） 本文解决的问题分为： 1.复选分页，翻页后前一页选中的行不在被选中。 2.点全选按钮，只能选中当前页，第二页第三页等都不会被选中。 3.点击行，复选框会被选中问题（如果有删除操作的话容易导致误选） 4.复选框错位。 解决： //解决复选框错位（可以根据自己具体情况适当修改里面的...
jqGrid的选中行事件
06-12 850
jqGrid中一些方法的使用说明如下：1、获取单个选中行的行ID var rowid = jQuery("#gridList").jqGrid("getGridParam", "selrow"); //行序号 2、获取多个选中行的id var ids=jQuery("#gridList").jqGrid('getGridParam','selarrrow'); //...
php实现编辑功能,如何实现基础的单行编辑功能
weixin_39724266的博客
03-10 257
1.html代码2.script代码var lastId;//行编辑时用来存放行的id$(function(){showTable(); //显示jqgrid表格$('.btn-update').click(updateRowData);//编辑按钮$('.btn-save').click(saveRowData);//保存按钮添加事件，默认不可用$('.btn-cancel').click...
jqgrid 4.6 树形结构设置checkbox单选
最新发布
06-06
在 jqGrid 4.6 版本中，启用树形网格的方式略有不同。需要将 `gridview` 选项设置为 `false`，以便 jqGrid 正确处理树形结构。此外，需要将 `treeGrid` 选项设置为 `true`，以启用树形网格功能。 为了在树形结构中启用 checkbox 单选功能，我们可以通过自定义 formatter 来实现。例如： ``` $("#myGrid").jqGrid({ url: "myData.json", datatype: "json", colModel: [ { name: "id", label: "ID", width: 50 }, { name: "name", label: "Name", width: 100 }, { name: "address", label: "Address", width: 150 }, { name: "selected", label: "Selected", width: 50, formatter: selectFormatter } ], gridview: false, // 关闭 gridview treeGrid: true, // 启用树形网格 ExpandColumn: "name", // 显示展开/收起图标的列名 rowNum: 10, rowList: [10, 20, 30], pager: "#myPager", caption: "My Grid" }); function selectFormatter(cellValue, options, rowObject) { var checkboxHtml = '<input type="checkbox" class="select-checkbox" data-rowid="' + rowObject.id + '"'; if (cellValue) { checkboxHtml += ' checked="checked"'; } checkboxHtml += ' />'; return checkboxHtml; } // 绑定单选事件 $(document).on('click', '.select-checkbox', function() { var $checkbox = $(this); var rowId = $checkbox.data('rowid'); var currentState = $checkbox.is(':checked'); var $grid = $("#myGrid"); // 取消其他行的选中状态 $grid.find('.select-checkbox').not(this).prop('checked', false); // 更新当前行的选中状态 var data = $grid.jqGrid('getRowData', rowId); data.selected = currentState ? 'true' : 'false'; $grid.jqGrid('setRowData', rowId, data); }); ``` 在上面的例子中，我们定义了一个 `selectFormatter` 函数，用于将 `selected` 列的值渲染为 checkbox。在 checkbox 的 `data-rowid` 属性中存储了当前行的 ID，方便事件处理时获取。 通过绑定 `click` 事件，我们实现了 checkbox 的单选功能。当用户选择一个 checkbox 时，我们先取消其他行的选中状态，然后更新当前行的选中状态，并使用 `setRowData` 方法将新的数据设置回 jqGrid 中。 需要注意的是，在启用树形网格的情况下，如果用户选择了一个父节点，则该节点下的所有子节点都会被选中。为了避免这种情况，我们可以在事件处理中检查当前行是否为叶子节点，如果不是，则不处理该事件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值