首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jqGrid显示隐藏按钮navGrid inlineNav

jqGrid 是一个基于 jQuery 的强大的网格插件,它提供了丰富的功能,包括分页、排序、编辑等

  1. 引入 jqGrid 相关的 CSS 和 JS 文件:
代码语言:javascript
复制
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.jqGrid.min.js"></script>
  1. 创建一个表格容器:
代码语言:javascript
复制
<table id="grid"></table>
<div id="pager"></div>
  1. 初始化 jqGrid,并配置 navGrid 和 inlineNav:
代码语言:javascript
复制
$(document).ready(function () {
    $("#grid").jqGrid({
        url: 'your-data-url', // 数据源 URL
        editurl: 'your-edit-url', // 编辑数据的 URL
        datatype: "json",
        colNames: ['列1', '列2', '列3'],
        colModel: [
            { name: 'col1', index: 'col1', width: 100 },
            { name: 'col2', index: 'col2', width: 100 },
            { name: 'col3', index: 'fig', width: 100, editable: true }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager',
        sortname: 'col1',
        viewrecords: true,
        sortorder: "asc",
        caption: "jqGrid 示例"
    });

    // 配置 navGrid
    $("#grid").jqGrid('navGrid', '#pager',
        { edit: true, add: true, del: true, search: true, refresh: true },
        { // 编辑选项
            zIndex: 100,
            url: 'your-edit-url',
            closeAfterEdit: true
        },
        { // 添加选项
            zIndex: 100,
            url: 'your-add-url',
            closeAfterAdd: true
        },
        { // 删除选项
            zIndex: 100,
            url: 'your-delete-url',
            closeAfterDel: true
        },
        { // 搜索选项
            zIndex: 100
        },
        { // 刷新选项
            zIndex: 100
        }
    );

    // 配置 inlineNav
    $("#grid").jqGrid('inlineNav', '#pager',
        {
            edit: true,
            add: true,
            del: true,
            addParams: { position: "first" },
            editParams: { position: "first" },
            delParams: { position: "first" }
        });
});

请注意替换 your-data-urlyour-edit-urlyour-add-urlyour-delete-url 为您实际的数据和操作 URL。

这段代码将创建一个 jqGrid,并配置 navGrid 和 inlineNav。navGrid 提供了分页、搜索、编辑、添加和删除按钮,而 inlineNav 则允许您在表格内直接编辑、添加和删除数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Android悬浮窗按钮实现点击并显示隐藏多功能列表

    FloatNormalView 这个是一个普通的悬浮窗,悬浮窗只有一个按钮,点击按钮显示更多的按钮。 首先是页面布局: <?...1 悬浮窗的显示 // 创建WindowManager对象 private WindowManager windowManager; windowManager = (WindowManager) context.getSystemService...WindowManager.LayoutParams.WRAP_CONTENT; lp.format = PixelFormat.TRANSPARENT; } catch (Exception e) { } } 上面分别创建了控制悬浮窗显示的...这里事件的处理顺序是:点击了按钮后,按钮将点击事件通过回调函数来处理,而回调函数是由创建这个View的Activity或者Fragment、Service等提供的,就将事件处理交到了外部。...而如何完成两个悬浮窗的切换呢,就可以利用之前所使用的OnClickCallback回调接口了,将一个显示、另一个隐藏即可,且两个悬浮窗若采用同一个LayoutParams就可以让两个显示在同一个位置。

    3.5K20

    iOS 按钮标题自动适配的中英文长度 & 动态控制子视图按钮显示隐藏 (Masonry版本)

    前言 按钮标题自动适配的中英文长度 比如打印小票,或者提货,是使用同一个按钮,这个时候还要适配中英文。...可以采用以下方式Masonry约束视图的宽度的最小值 make.width.mas_greaterThanOrEqualTo(kAdjustRatio(70));例子:打印小票按钮 动态控制子视图按钮显示隐藏...例子:本级的订货清单不显示分配终端按钮子视图 下级代理商的订货清单显示分配终端按钮子视图 原文 https://kunnan.blog.csdn.net/article/details/104380895...I、按钮标题的中英文长度适配适配(Masonry版本) 关键APImake.width.mas_greaterThanOrEqualTo(kAdjustRatio(70)); [_receiptBtn.titleLabel

    1.4K20

    解决bootstrap-table-fixed-columns.js显示列与隐藏按钮切换表格不对齐

    data-show-columns="true" data-fixed-columns="true" data-fixed-number="3"> 含有data-show-columns="true"属性时会在右边显示可以切换列的按钮...结合bootstrap-table-fixed-columns.js插件使用时会出现列不对齐的问题 查看Dom结构发现点击一次具体列切换按钮时会增加一个class 为fixed-table-header-columns...的html片段,我们只需保留最后一个,解决方法 1、先删除多余的html 2、执行表格对齐函数 为了使排序的图标正常显示,需要在onSort的事件中执行能使图标正常显示的代码(注意如果要使固定的列有排序的功能请看我另一篇博客...#tableTest1').bootstrapTable('resetView'); fixleftwidth() }); }); //格式化显示

    5.6K40

    ASP.NET MVC5+EF6+EasyUI 后台管理系统(60)-系统总结

    我也坚信这种开发模式目前无法被取代,也是我们Web开发工作的首选 MVCWebAPI适配移动设备接口,MVCWEB业务界面显示处理,这是多么的标配。 我为何选择这个技术组合?...,EasyUI的组件应有尽有,我一度想换成Bootstrap,但是对于应用系统   BootStrap其实并不适合,特别是开发速度上和显示上,虽然更加轻量级,但是你最后会为交互挠破了你自己的头,不信你可以试试看...基于接口:规范、约束、分离等,通俗点来说我主要作为分包,业务代码隐藏,团队开发中只要定义好接口,而无需要实用业务,就能发包同时开发进行,非常好 如何阅读本系列的文章  理论上任何感兴趣的园友都可以了解和阅读...如Extjs,jqgrid等等。 11,12,13节:是本系统的日志、异常处理方式,日志可以记录用户的每个动作,异常可以让开发人员快速得到问题定位。...关键权限是控制程度,本系列把权限控制到按钮级别,通过全局过滤器来处理请求 --------------------中间为选读章节------------------ 58,59节是本系列的重构章节,通过

    1.8K91

    接口测试平台代码实现10:菜单页面升级

    很多网站都用点击左上角的名字来返回主页,并且左侧菜单有隐藏和出现的按钮设置。毕竟总这么显着也有点挡害。 我的设想是增加一个按钮,贴在这个菜单右侧,点击一次就隐藏菜单,再点击就显示菜单。...display属性就是控制元素是否显示隐藏的属性,none就是隐藏,block就是显示。js代码均要以;分号结尾。...但是接下来,就要想,这个按钮现在的功能想变成 点击就显示菜单,然后把它的外左边距变成217px,文案再变成 ‘隐藏’。因为这个按钮只是一个啊,点击只是执行这个display_menu()函数。...如果此时按钮的文案是 隐藏,那么就去执行我们刚写好的隐藏的这一段,如果此时按钮的文案不是隐藏而是显示,那么就去执行新的一段让菜单显示的代码。...下图中,把我们刚刚的操作元素的代码放在了符合执行的代码大括号内,判断条件:btn.innerText == '隐藏' 就是说按钮的文案如果是隐藏俩个字,那么就要隐藏菜单这套代码了 然后我们继续写显示菜单这套代码

    2K30

    【jQuery动画】显示隐藏效果

    本期我们一起来了解一下显示隐藏效果吧~ ---- 控制显示隐藏的方法 控制显示隐藏的方法主要为show、hide、toggle 方法 说明 show([speed,[easing],[fn]])...显示隐藏的匹配元素 hide([speed,[easing],[fn]]) 隐藏显示的匹配元素 toggle([speed],[easing],[fn]) 元素显示隐藏切换 speed:动画的速度...实现效果 当点击“显示”,则div中的内容会显示,并弹出提示框,点击“隐藏”则隐藏内容,弹出提示框,点击“切换”,则会在二者之间切换。...HTML、CSS部分 思路: 1、定义显示隐藏、切换三个功能按钮,定义div元素; 2、设置div元素的样式,宽度、高度和背景颜色。...,这里用到筛选选择器eq; 4、实现单击显示按钮,控制div元素的显示(show),并弹出提示框(alert); 5、实现单击隐藏按钮,控制div元素的隐藏(hide),并弹出提示框; 6、实现单击切换按钮

    6.7K10

    如何在 React 中点击显示隐藏另一个组件?

    在一个 React 应用程序中,有时需要一个按钮或链接来触发显示隐藏一个相关的组件。这种需求可以通过使用 React 状态管理和事件处理机制来实现。...显示/隐藏菜单我们可以使用事件处理函数来显示隐藏菜单。当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。...显示/隐藏模态框我们可以使用事件处理函数来触发模态对话框的显示隐藏。当用户单击打开模态框的按钮时,模态框应该出现;当用户单击关闭按钮或模态框之外时,模态框应该消失。...当用户单击关闭按钮时,我们将可见性设置为 false,模态对话框将被隐藏。小结在本文中,我们介绍了如何使用 React 来实现点击显示隐藏另一个组件。...我们还给出了两个示例:如何显示/隐藏菜单和如何显示/隐藏模态框。这些示例可以用作参考,帮助你在自己的 React 应用程序中实现点击显示隐藏另一个组件的功能。

    4.8K10
    领券