jqGrid的列选择columnChooser使用

于 2021-08-20 17:54:12 发布
阅读量262 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16181669/article/details/119828937
版权

强调文本 强调文本

1、要引用的文件 jquery-ui.js，jquery-ui.css，ui.multiselect.css，ui.multiselect.js
jquery.jqGrid.js和jquery就不用说了

jquery-ui.js要放在ui.multiselect.js前面 --切记

kk151
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqGrid系列：选择显示列
weixin_33853794的博客
05-29 490
jqGrid支持用户自定义显示哪些列。官方实际上有两种实现方式。 一、columnChooser方法 这是官方现在推荐的实现方法。 demo >>New in version 3.6>>Column Chooser 具体怎么用，wiki里写的很清楚。http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_u...
column-selector:jQuery 列选择器
06-30
jQuery 列单元格选择器 这个插件向 jQuery 选择器 API 添加了一个新的选择器，用于按列索引检索表格单元格。 它透明地支持具有列和行跨度的表格，无论您的表格多么复杂。 语法简单且与其他 jQuery 选择器相似，因此学习曲线非常小。 以下示例显示如何选择表格第四列中的所有单元格。 $('#mytable tbody td:nth-col(4)'); 选择器可以采用多种类型的参数来选择列，例如关键字、数字索引和方程。 这些在 API 部分有更详细的解释。 应用程序接口 这个插件向 jQuery 选择器 API 添加了一个新的伪选择器，称为nth-col 。 此外，它还向名为nthCol的 jQuery 函数命名空间添加了一种新方法（使用哪种方法取决于您的用例，请参阅常见问题部分了解详细信息。）选择器和扩展函数都提供相同的功能并接受相同的参数。 可以使用以下参数： 甚至 选
关于jqGrid的列选择‘columnChooser’功能模块的学习总结
zhao502063335的博客
01-18 2211
使用 按照jqGrid中文实例的介绍，首先需要调用ui.multiselect.js、ui.multiselect.css和jquery.jqGrid.js文件，且ui.multiselect.js、ui.multiselect.css要在jquery.jqGrid.js前面。并且还给了一个实例： // 列选择实例 jQuery("#colch").jqGrid({ url:ctx+'...
jqgrid columnChooser列的自定义及存储和获取
cc_fys的博客
05-15 3630
jggrid可以通过setcolumns设置列的自定义显示，不过这种方法已经被否决了,现在的方法是columnChooser。我们的问题是既然用户可以选择需要显示和隐藏那些列，那么是否可以把这些信息都存储起来，在用户再次打开这些表时，可以显示对应的列。有很多种方式存储这个数据，可以用浏览器本地存储localstorage,但是问题是当用户换了浏览器或者电脑时就不行了，现在以用mysql存储作为例子
jqGrid columnChooser模块整合 ， 实现动态隐藏显示列
weixin_30681615的博客
07-17 221
项目中需要实现选择需要的列进行导出，脑子一闪而过就决定用jqGrid的这个模块。 但是实在是太多坑了，js和css在网上根本没地方下载，搜出来的都是关于怎么用云云，这里具体实现我就不再多说。因为需要的js实在太多，没看到有人整合。 于是我就根据官方实例整合了一个demo发出来供大家参考。 先上效果图: 下面是我整合demo的下载路径，用的是本地的JSONData，解压打开即可预览效果 ...
jqgrid-columnchooser:保存和重新排序数据库中的列位置
07-01
jqgrid-columnchooser 从数据库中保存和加载列位置。 这是魔法发生的地方： 第一：关于保存列位置 $table . jqGrid ( 'navButtonAdd' , pagerId , { caption : "Select Columns" , buttonicon : 'ui-icon-carat-2-n-s' , title : "Reorder Columns" , onClickButton : function ( ) { $table . columnChooser ( { done : function ( perm ) {
获取jqGrid中选择的行的数据
01-19
如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下： var ids=$(‘#gridTable').jqGrid(‘getGridParam','selarrrow'); 如果想获取选择的行的数据，只要传入rowId即可，如下： var rowData = $...
jqgrid 编辑表格 一列
09-05
默认情况下，jqGrid 使用文本框作为编辑器。但你可以通过 `edittype` 和 `formatter` 参数自定义编辑器。例如，将某一列设置为日期选择器： ```javascript { name: 'date', index: 'date', width: 120, editable: ...
数据表格JqGrid自适应列宽度
04-16
2. **列模型配置**：每个列在JqGrid中都有一个对应的列模型（`colModel`），其中可以设置列的宽度。使用`autoResizable: true`属性，可以开启列的自动调整大小功能。 3. **自适应事件处理**：JqGrid提供了`...
jQuery插件jqGrid动态获取列和列字段的方法
12-03
首先，问题背景是关于jqGrid表格插件的使用，我们需要获取表格的表头（即列名）和表格字段，以便将这些信息显示在一个弹出窗口中，用户可以通过复选框选择他们想要查看的列。这个功能对于提高用户体验，特别是处理...
jqgrid 修改一列 ，
09-13
jqgrid 修改一列 。修改所有的行。通过vue.js 与jqgrid 的应用，供大家参考学习。多多提意见 。相互学习交换意见
Jquery selector
eric0622的专栏
01-28 1365
jQuery selectors and examplesjQuery Selectors and Attribute SelectorsSelectorExampleDescriptionList accurate as of jQuery 1.3*$(’*);This selector is a wild card method
jqGrid获取选中行的指定列的值
lsh15846393847的博客
07-15 1716
var id = $("#gridYosan").jqGrid('getGridParam','selrow'); var rowData = $("#gridYosan").jqGrid("getRowData",id); var yosankaCD = rowData.yosanka 原理：1 获取选中行的id 2 获取选中行的数据 ...
jqgrid获取选中行指定列的值
weixin_34304013的博客
11-18 680
为什么80%的码农都做不了架构师？>>> ...
jqGrid动态增加列，使用在根据条件筛选而出现不同的列的场景
weixin_34248023的博客
11-19 902
function GetGrid2() { var jqdata = [ { Encode:"20180100", FullName: "BYD", SpecType: "cpu200", UnitName: "台", SecondUnit: "", Qty: "10", UnitCode: "50000", Cost:
jqgrid 列表条件查询的几步关键操作
publicstaticfinal的博客
04-12 651
jqgrid列表条件查询 记录一下我自己老忘的几个点 这次记录一下使用jqgrid在列表查询时的关键点，过一段时间不用就是忘 1】在html页面用 v-model=“q.xxx” xxx是在js处定义。 2】这是js里 在jqgrid查询列表时的模块使用postData 承载参数 3】 这是在定义vue对象时，定义的要之后去查询的字段。 红框中是定义数据的格式。q（其实是query...
jqGrid 实现纯前端筛选（及一次加载全部数据，在前端筛选）
qq122453418的博客
01-25 7145
/* jqGrid 前端筛选功能 */ function GridSearch(grid){ //克隆对象 this.clone_obj = function(data){ var d; if($.type(data) == 'array' ){ d = []; for(i in data){ d[i] = data[i]
jqGrid 5.2.1 中使用 columnChooser
最新发布
06-12
jqGrid 5.2.1 中的 columnChooser 是一个非常有用的功能，它允许用户自定义表格的列显示和隐藏。使用 columnChooser，您可以通过一个简单的对话框轻松地添加或删除列，而无需修改表格代码。 要使用 columnChooser，您需要在 jqGrid 的选项中启用该功能。您可以使用以下代码： ``` $("#grid").jqGrid({ // ... colModel: [ { name: "id", width: 50 }, { name: "name", width: 100 }, { name: "email", width: 150 }, // ... ], viewrecords: true, rownumbers: true, rownumWidth: 40, caption: "My Grid", pager: "#pager", // Enable column chooser colMenu: true }); ``` 在上面的代码中，我们通过将 colMenu 选项设置为 true 启用了 columnChooser 功能。现在，当用户右键单击表格的标题行时，将显示一个列选择器对话框，用户可以选择要显示或隐藏的列。 如果您想要自定义列选择器对话框的外观和行为，您可以使用 columnChooserOptions 选项。例如： ``` $("#grid").jqGrid({ // ... colMenu: true, columnChooserOptions: { width: 450, height: 350, modal: true, caption: "Custom Column Chooser", done: function(perm) { // ... } } }); ``` 在上面的代码中，我们使用 columnChooserOptions 选项自定义了列选择器对话框。我们设置了宽度、高度、标题和 done 回调函数，在用户完成选择后调用该函数。在 done 函数中，您可以执行任何您想要的操作，例如保存用户选择的列，重新加载表格等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值