Bootstrap-jqgrid学习(十六)

news2025/7/10 13:15:50

 jqgrid网站地址:

jqGrid demos-jqGrid实例-中文-mn886.neticon-default.png?t=M85Bhttps://blog.mn886.net/jqGrid/ 

表格属性

分页属性:

pagerstring定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置

显示总条数 

viewrecordsboolean定义是否要显示总记录数

 每页显示多少条:

rowNumint在grid上显示记录条数,这个参数是要被传递到后台

定义下拉列表,展示每页显示条数:

rowNumint在grid上显示记录条数,这个参数是要被传递到后台

 列排序:

sortnamestring默认的排序列。可以是列名称或者是一个数字,这个参数会被提交到后台

给表格定义标题:

captionstring表格名称

 定义是否隐藏表格的下拉按钮:

hidegridboolean启用或者禁用控制表格显示、隐藏的按钮,只有当caption 属性不为空时起效

 自适应父容器:

autowidthboolean如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth

 指定表格的高度:

heightmixed表格高度,可以是数字,像素值或者百分比

设置页面初始的页码:

pageinteger设置初始的页码

 指定分页栏的位置:

pagerposstring指定分页栏的位置

是否显示翻页按钮:

pgbuttonsboolean是否显示翻页按钮

 是否展示跳转页面输入框:

pginputboolean是否显示跳转页面的输入框

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqgrid第一个Demo</title>
    <!--css-->
    <!--引入bootstrap的css-->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!--引入jqgrid的核心css-->
    <link rel="stylesheet" href="../static/jqgrid/ui.jqgrid-bootstrap.css">

    <!--js-->
    <!--引入jQuery的文件-->
    <script src="../static/jq/jquery-3.6.0.js"></script>
    <!--引入jqgrid的核心js-->
    <script  src="../static/jqgrid/jquery.jqGrid.min.js"></script>
    <!--引入jqgrid的国际化js-->
    <script  src="../static/jqgrid/grid.locale-cn.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../static/js/bootstrap.min.js"></script>

    <script>
        $(function(){
            /*
            * jqgrid属性使用方式:将属性以对象的方式作为jqgrid的参数进行传递即可,对象中的属性名:属性值书写  ---对应网站初始化参数大全
            * 2.jqgrid中的列属性方式 列属性使用也是以对象的形式作为colModel的参数进行传递即可  --对应网站ColModel参数大全
            * */

            $("#userList").jqGrid({//属性
                //初始化表格
                styleUI:"Bootstrap",//用来指定jqgrid的主题样式
                url: "./listpage.json",//用来远程获取数据的地址 json格式的数据   相当于$.post() ajax请求后台控制器  这里模仿后台让它访问json文件
                datatype: "json", //用来指定数据返回的数据类型默认是xml
                mtype:"POST",//请求方式,默认get请求
                colNames:["编号","姓名","年龄","生日","部门"],//用来指定标题列的名称  colNames必须和colModel成对出现  一个表名对应一个{}
                colModel:[
                    {
                        name:"id",
                        align:"center",
                        //列隐藏
                        //hidedlg:true,
                        //hidden:true

                    },
                    {
                        name:"name",
                        //对齐
                        align:"center",
                        //其否可编辑
                        editable:true,
                        //是否可以改变大小
                        resizable:false,
                        //列的宽度
                        width:300
                    },
                    {
                        name:"age",
                        align:"center",
                        formatter:function(cellvalue, options, rowObject){//用来对数据进二次处理  cellvalue:这列的值 options:这列的Page对象  rowObject:这行的json数据对象
                            //原样渲染
                            //return cellvalue;
                            console.log(cellvalue);
                            console.log(options);
                            console.log(rowObject);
                            //渲染
                            if (cellvalue>23){
                                return "<font color='red'>"+cellvalue+"</font>";
                            }
                            return "<font color='green'>"+cellvalue+"</font>";


                        }
                    },
                    {
                        name:"bir",
                        align:"center"
                    },
                    {
                        //name:"dep.name",
                        name:"depName",
                        align:"center",
                        //使用formatter进行获取对象数据进行渲染
                        formatter:function(cellvalue, options, rowObject){
                            return rowObject.dep.name;
                        }
                    }
                ],
                //一旦做了分页处理之后数据的返回格式为:listpage.json的页面显示格式
                pager:"#pager",//用来定义分页工具栏  用来处理分页请求: 后台可以定义Integer page(当前页) Integer rows(每页显示条数)
                page:2,//定义页面初始的页码
                viewrecords:true,//展示总条数
                rowNum:5,//每页展示5条 默认是20
                rowList:[2,5,10,50,100],//用来定义下拉列表,可选页面展示条数
                sortname:"name",//基于那个列进行排序
                caption:"员工列表",//定义表格标题
                hidegrid:false,//禁用表格下拉展示标题隐藏按钮的显示 默认true显示
                autowidth:true,//自适应父容器
                height:400,//指定表格高度
                pagerpos:"left",//设置分页的位置
                pgbuttons:true,//是否显示分页中翻页按钮 默认是true
                pginput:true,//是否展示跳转页面输入框 默认是true
            });
        });
    </script>

</head>
<body>
<!--表格标签 1.jquery插件 属性:(文档中是初始化参数大全) 对象{}  事件:  方法:  -->
<table id="userList"></table>

<!--定义分页工具栏-->
<div id="pager"></div>
</body>
</html>

 listpage.json:

{
  "page": "1",
  "total": 2,
  "records": "13",
  "rows": [
    {
      "id": "21",
      "name": "xiaochen",
      "age": 23,
      "bir": "2012-12-12",
      "dep": {
        "id": "222",
        "name": "财务部"
      }
    },
    {
      "id": "22",
      "name": "张三",
      "age": 40,
      "bir": "2012-12-12",
      "dep": {
        "id": "222",
        "name": "研发部"
      }
    },
    {
      "id": "23",
      "name": "王五",
      "age": 33,
      "bir": "2012-12-12",
      "dep": {
        "id": "222",
        "name": "技术部"
      }
    },
    {
      "id": "24",
      "name": "李四",
      "age": 50,
      "bir": "2012-12-12",
      "dep": {
        "id": "222",
        "name": "外交部"
      }
    }
  ]
}

 jqgrid的增删改工具栏的使用

 

需要表格中的每一项设置可编辑:

这样点击+号:自动跳出一个输入框

有时候有1对多的情况部门以下拉框展示:

需要在列属性中:添加定义成下拉框selece  加属性edittype

editoptionsarray编辑的一系列选项。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”/jqGrid/admin/deplistforstu.action”}},这个是演示动态从服务器端获取数据。
edittypestring可以编辑的类型。可选值:text, textarea, select, checkbox, password, button, image and file.

首先需要把列改为下拉框:

 表格属性:

 增删改的:url

editurlstring定义对form编辑时的url

 

点击提交:

发起了edit请求:

当点击修改也走得是这个url的请求,但是携带的参数oper不同:

第二个参数:让添加按钮不展示: 

 

 

  需要后端,要有一个方法进行转换 eq 转换成=

 

 如果你不想要太多的条件,可以添加:sopt进行条件设置

 

 

如果想编号等不作为搜索,可以在属性列设置 

        boolean是否是搜索列

 

就没有了搜索列: 

 

 可以让标题居中,需要自己设置css样式:

 表格加载完触发事件:

gridCompletenone当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件

 点击单元格触发的事件:

onCellSelectrowid,iCol,cellcontent,e当点击单元格时触发。rowid:当前行id;iCol:当前单元格索引;cellContent:当前单元格内容;e:event对象

 

点击:

 清除表格加载的数据:

clearGridDataclearfooterjqGrid对象清除表格当前加载的数据。如果clearfooter为true时则此方法删除表格最后一行的数据
setCaptioncaptionjqGrid对象设置表格的标题

 写一个按钮:

写方法:调用:

 

 点击测试方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqgrid第一个Demo</title>
    <!--css-->
    <!--引入bootstrap的css-->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!--引入jqgrid的核心css-->
    <link rel="stylesheet" href="../static/jqgrid/ui.jqgrid-bootstrap.css">

    <!--js-->
    <!--引入jQuery的文件-->
    <script src="../static/jq/jquery-3.6.0.js"></script>
    <!--引入jqgrid的核心js-->
    <script  src="../static/jqgrid/jquery.jqGrid.min.js"></script>
    <!--引入jqgrid的国际化js-->
    <script  src="../static/jqgrid/grid.locale-cn.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../static/js/bootstrap.min.js"></script>
    <style>
        th{
            text-align: center;
        }
    </style>

    <script>
        $(function(){
            /*
            * jqgrid属性使用方式:将属性以对象的方式作为jqgrid的参数进行传递即可,对象中的属性名:属性值书写  ---对应网站初始化参数大全
            * 2.jqgrid中的列属性方式 列属性使用也是以对象的形式作为colModel的参数进行传递即可  --对应网站ColModel参数大全
            * 3.jqgrid中事件的使用,将对应的事件以对象的方式作为jqgrid的参数进行传递即可
            * 4.jqgrid中方法的使用 对应jqgrid组件选择器.jqgrid(‘方法名’,参数列表)
            * */

            $("#userList").jqGrid({//属性
                //初始化表格
                styleUI:"Bootstrap",//用来指定jqgrid的主题样式
                url: "./listpage.json",//用来远程获取数据的地址 json格式的数据   相当于$.post() ajax请求后台控制器  这里模仿后台让它访问json文件
                datatype: "json", //用来指定数据返回的数据类型默认是xml
                mtype:"POST",//请求方式,默认get请求
                colNames:["编号","姓名","年龄","生日","性别","部门"],//用来指定标题列的名称  colNames必须和colModel成对出现  一个表名对应一个{}
                colModel:[
                    {
                        name:"id",
                        align:"center",
                        search:false,//不作为搜索条件
                        //列隐藏
                        //hidedlg:true,
                        //hidden:true

                    },
                    {
                        name:"name",
                        //对齐
                        align:"center",
                        //其否可编辑  添加了可编辑后,在下方显示编辑功能按钮的时候,才有显示输入框进行编辑
                        editable:true,
                        //是否可以改变大小
                        resizable:false,
                        //列的宽度
                        width:300
                    },
                    {
                        name:"age",
                        align:"center",
                        //其否可编辑
                        editable:true,
                        formatter:function(cellvalue, options, rowObject){//用来对数据进二次处理  cellvalue:这列的值 options:这列的Page对象  rowObject:这行的json数据对象
                            //原样渲染
                            //return cellvalue;
                            console.log(cellvalue);
                            console.log(options);
                            console.log(rowObject);
                            //渲染
                            if (cellvalue>23){
                                return "<font color='red'>"+cellvalue+"</font>";
                            }
                            return "<font color='green'>"+cellvalue+"</font>";


                        }
                    },
                    {
                        name:"bir",
                        align:"center",
                        //其否可编辑
                        editable:true
                    },
                    {
                        name:"sex",
                        align:"center",
                        //其否可编辑
                        editable:true,
                        edittype:"select",//性别定义成下拉列表的格式
                        editoptions:{//本地写死的数据 本地数据
                            //multiple:true,//实现下拉列表的多选
                            value:"1:男;2:女"
                        }
                    },
                    {
                        //name:"dep.name",
                        name:"depName",
                        align:"center",
                        //其否可编辑
                        editable:true,
                        //使用formatter进行获取对象数据进行渲染
                        formatter:function(cellvalue, options, rowObject){
                            return rowObject.dep.name;
                        },
                        edittype:"select",//定义成下拉列表的格式  有1.本地写死的数据  2.远程获取
                        editoptions:{
                            dataUrl:"/dep/findAll",//从远端服务器获取数据  返回的数据是html的字符串  <select><option value="">研发部></option>...</select>

                        }
                    }
                ],
                //一旦做了分页处理之后数据的返回格式为:listpage.json的页面显示格式
                pager:"#pager",//用来定义分页工具栏  用来处理分页请求: 后台可以定义Integer page(当前页) Integer rows(每页显示条数)
                page:2,//定义页面初始的页码
                viewrecords:true,//展示总条数
                rowNum:5,//每页展示5条 默认是20
                rowList:[2,5,10,50,100],//用来定义下拉列表,可选页面展示条数
                sortname:"name",//基于那个列进行排序
                caption:"员工列表",//定义表格标题
                hidegrid:false,//禁用表格下拉展示标题隐藏按钮的显示 默认true显示
                autowidth:true,//自适应父容器
                height:400,//指定表格高度
                pagerpos:"center",//设置分页的位置 默认center
                pgbuttons:true,//是否显示分页中翻页按钮 默认是true
                pginput:true,//是否展示跳转页面输入框 默认是true
                editurl:"/user/edit",//编辑时的url 增删改发起的url 后端的接口

                //事件
                //数据加载完之后触发的事件
                gridComplete:function(){
                   // alert();
                },
                //点击单元格触发的事件
                onCellSelect:function(rowid,iCol,cellcontent,e){
                    console.log(rowid);//行的id
                    console.log(iCol);
                    console.log(cellcontent);//点击触发的值
                    console.log(e);//事件对象
                }
            }).navGrid("#pager",//放置的位置
                {add:true,edit:true,del:true,search:true,refresh:true},//展示的配置
                {height:600,width:700,
                    //编辑后关闭掉弹窗并且从新载入表格
                    closeAfterEdit:true,reloadAfterSubmit:true},//编辑面板的配置
                {height:600,width:700,
                    //添加成功关闭面板,刷新表格
                    closeAfterAdd:true,reloadAfterSubmit:true},//添加的配置
                {
                    //删除后关闭面板,刷新表格
                    closeAfterDelete:true,reloadAfterSubmit:true},//删除的配置
                {sopt:['cn','eq','ne','lt','gt']}//搜索配置
                );//快速增加编辑功能按钮  表单的元素需要设置:其否可编辑  editable:true

            //参数1:将看看快速编辑按钮放到那个位置  参数2:展示编辑的配置对象 参数3:代表编辑面板的配置
            // 参数4:添加面板的配置 参数5:删除面板的配置 参数6:搜索面板的配置  参数7:刷新的配置
        });

        //方法
        function testMethod(){
            //jqgrid的方法
            $("#userList").jqGrid('clearGridData',false);//清除数据
            $("#userList").jqGrid('setCaption',"小陈");//更改标题
        }
    </script>

</head>
<body>
<!--表格标签 1.jquery插件 属性:(文档中是初始化参数大全) 对象{}  事件:  方法:  -->
<table id="userList"></table>

<!--定义分页工具栏-->
<div id="pager"></div>

<!---->
<button class="btn btn-danger" onclick="testMethod()">测试方法</button>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/67690.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

#分支语句详解

第一章 C语言&#xff1a;分支语句 文章目录第一章 C语言&#xff1a;分支语句前言1、什么是语句&#xff1f;2.分支语句&#xff08;选择结构&#xff09;2.1 if语句2.1.1 悬空else2.1.2 if书写形式的对比2.2 switch语句2.2.1 在switch语句中的 break2.2.2 default子句2.2.3 练…

基于频谱的GCN的数学原理

参考链接&#xff1a;如何理解GCN&#xff1f;知乎回答&#xff1a;从热传导模型到GCN从CNN到GCN的联系与区别——GCN从入门到精&#xff08;fang&#xff09;通&#xff08;qi&#xff09; GCN问题本质 图中的每个结点无时无刻不因为邻居和更远的点的影响&#xff0c;而在改…

基于linux的操作系统的通用启动流程(一)

这篇我们讲解linux的通用启动流程,按照我们一贯的方式总分总的节奏,因为后面的每个子系统也很大,所以我们讲解子系统的时候也是按照总分总的方式。注意因为基于linux的各式各样的操作系统绝对不下100个,像嵌入式,然后我们的桌面有fedora,redhat,centos,debian,ubuntu以…

如何定位线上CPU占用过高的问题

系列文章目录 文章目录系列文章目录前言一、定位CPU的流程是什么&#xff1f;二、实操1.测试代码样例2.定位问题实践过程总结前言 一、定位CPU的流程是什么&#xff1f; 项目上线&#xff0c;CPU飙高不下&#xff0c;触发报警&#xff0c;如何定位排查问题。有两种办法1、通过…

JVM内存布局及GC原理

“java的内存布局以及GC原理”是java开发人员绕不开的话题&#xff0c;也是面试中常见的高频问题之一。 java发展历史上出现过很多垃圾回收器&#xff0c;各有各的适应场景&#xff0c;很多网上的旧文章已经跟不上最新的变化。本文详细介绍了java的内存布局以及各种垃圾回收器的…

著名运动员刘诗雯从政,迎来人生高光时刻,张继科还般配吗

曾经有这么一句话&#xff1a;中国男足谁都踢不过&#xff0c;中国乒乓球谁都打不过。也间接地说明了国球队伍人才济济。在众多优秀乒乓球队员当中&#xff0c;刘诗雯最近相当耀眼&#xff0c;听说她已经高升当官了&#xff0c;也和张继科拉开了距离。 据悉&#xff0c;公元202…

Java高效率复习-数据类型和运算符[Java]

第一篇关于JavaSE内容的文章 文章的风格比较涣散&#xff0c;但是都是干货&#xff0c;关于Java系列的&#xff0c;还有就是&#xff0c;我认为只有MySQL基础和JavaSE基础是可以做到可操作性和可执行性较强的。 如果像JavaWeb或者SSM框架这些&#xff0c;光看文章你是根本执行…

tensorflow的GPU加速计算

参考 tensorflow的GPU加速计算 - 云社区 - 腾讯云 一、概述 tensorflow程序可以通过tf.device函数来指定运行每一个操作的设备&#xff0c;这个设备可以是本地的CPU或者GPU&#xff0c;也可以是某一台远程的服务器。tensorflow会给每一个可用的设备一个名称&#xff0c;tf.…

PaO2/FiO2在临床中的应用 氧合指数

主任提问:患者呼吸衰竭时的“氧合指数”大约多少?如何计算?_腾讯新闻 (qq.com) 在 ARDS 柏林定义中,诊断低氧血症需要 PaO2/FiO2≤ 300 mmHg,并可以分为轻中重三个等级(下表)。 ARDS 患者的 PaO2/FiO2越低,死亡率越高,其中重度 ARDS 死亡率高达 45%。需要注意这里 …

生产报工管理系统可以帮助企业解决哪些问题?

随着时代的变迁和信息化技术的发展&#xff0c;市场对制造企业在产品价格、质量以及生产成本等方面提出了更高的要求&#xff0c;车间生产也逐渐向着实时化、透明化和可视化方向发展。其中产报工与跟踪是生产管理中重要的环节&#xff0c;自然是不可缺少信息化的。 企业在报工…

Linux基本命令

目录操作 格式&#xff1a;指令 -[参数] [目录] 1. pwd (Print Working Direcotry) 查看当前工作路径 2. cd (Change Direcotry) 改变 shell 工作目录 3. ls (List Files) 列出当前目录下的文件和目录 ls -[参数] [目录] ls的参数均是短命令&#xff0c;可以使用-后添…

经过物联网技术的设备改造有“大脑”,更智能

物联网是通讯网与互联网的拓展应用和网络延伸&#xff0c;通过网络传输互联&#xff0c;进行计算、处理和知识挖掘&#xff0c;实现人与物、物与物的信息交互和无缝链接&#xff0c;达到对物理世界的实时控制、精确管理和科学决策是目的。而物联网设备是一种非标准计算设备&…

【微信小程序】使用npm并引入vant-weapp组件库

0 前言 vant文档与微信小程序文档写得弯弯绕绕&#xff0c;你引用我&#xff0c;我引用你&#xff0c;还给出了多种不同情况下的选项&#xff0c;甚至有步骤缺失&#xff0c;导致踩了一点小坑&#xff0c;浪费了一些没必要的时间&#xff0c;这里给出完整可行的实现方法&#…

Android Studio详细的安装下载教程

一、下载Android Studio 1、进入官网在这个位置&#xff0c;点击左下角下载Android Studio 官网&#xff1a;www.Android.com 中国大陆版网站&#xff1a;&#xff1a;https://developer.android.google.cn/ 2、Android Studio会自带自动下载Android SDK&#xff0c;如果有版本…

SIM8100、SIM8800CE、SIM8800E 车规级模组 特性

1、SIM8100 是一个C-V2X模块&#xff0c;通过PC5接口支持C-V2X功能&#xff0c;实现车对车(V2V)、车对人(V2P)、车对基础设施(V2I)等应用。 SIM8100具有强大的扩展能力和丰富的接口&#xff0c;包括USB, UART, SDIO,I2C,I2S,SPI, GPIO等。 该模块为客户的应用程序提供了很大的灵…

Vue--》动态组件和插槽的使用讲解

目录 动态组件 keep-alive使用 keep-alive的include和exclude属性 插槽 动态组件 动态组件指的是动态切换组件的显示与隐藏&#xff0c;vue提供了一个内置的<component>组件&#xff0c;专门用来实现动态组件的渲染。什么意思呢&#xff1f;接着往下看&#xff1a; …

类和对象之 封装 继承 与 多态

1.进行类继承的前提是我们要有两个类&#xff0c;且已经确定好了这两个类谁为父类谁为子类 2.先创建父类然后再创建子类 3.创建子类的时候我们要使用继承语法&#xff0c;使用的方式是在创建子类时的第一条代码的最后面加上冒号 : 和父类的类名 4.继承的本质就是将父类中的…

[附源码]Python计算机毕业设计Django药品仓库及预警管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

【Vue基本功】权限路由(1)

1 初始化项目 1.1 安装 yarn create vite … yarn 依赖&#xff1a; yarn add axios yarn add vuexnext vue-router4 -D yarn add typesvue-router -D vuex有ts支持&#xff0c;所以不需要安装类型文件 1.2 配置 1.2.1 别名 引入path时&#xff0c;发现有警告&#x…

Spring MVC 高级框架的核心

目录 1. 什么是 Spring MVC 1.1 如何理解 MVC 1.2 Spring MVC 和 MVC 的关系 2. 如何学习 Spring MVC 2.1 将浏览器和服务器连接起来 2.1.1 RequestMapping, GetMapping, PostMapping 三个注解的区别 2.2 在程序中获取前端传递过来的参数 2.2.1 传递单个参数 2.2.2 传…