• Bootstrap-jqgrid学习（十六）

     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是否显示跳转页面的输入框

     

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>jqgrid第一个Demo</title>
    6.     <!--css-->
    7.     <!--引入bootstrap的css-->
    8.     <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    9.     <!--引入jqgrid的核心css-->
    10.     <link rel="stylesheet" href="../static/jqgrid/ui.jqgrid-bootstrap.css">
    11.  
    12.     <!--js-->
    13.     <!--引入jQuery的文件-->
    14.     <script src="../static/jq/jquery-3.6.0.js"></script>
    15.     <!--引入jqgrid的核心js-->
    16.     <script  src="../static/jqgrid/jquery.jqGrid.min.js"></script>
    17.     <!--引入jqgrid的国际化js-->
    18.     <script  src="../static/jqgrid/grid.locale-cn.js"></script>
    19.     <!--引入bootstrap的js文件-->
    20.     <script src="../static/js/bootstrap.min.js"></script>
    21.  
    22.     <script>
    23.         $(function(){
    24.             /*
    25.             * jqgrid属性使用方式：将属性以对象的方式作为jqgrid的参数进行传递即可，对象中的属性名：属性值书写  ---对应网站初始化参数大全
    26.             * 2.jqgrid中的列属性方式 列属性使用也是以对象的形式作为colModel的参数进行传递即可  --对应网站ColModel参数大全
    27.             * */
    28.  
    29.             $("#userList").jqGrid({//属性
    30.                 //初始化表格
    31.                 styleUI:"Bootstrap",//用来指定jqgrid的主题样式
    32.                 url: "./listpage.json",//用来远程获取数据的地址 json格式的数据   相当于$.post（） ajax请求后台控制器  这里模仿后台让它访问json文件
    33.                 datatype: "json", //用来指定数据返回的数据类型默认是xml
    34.                 mtype:"POST",//请求方式，默认get请求
    35.                 colNames:["编号","姓名","年龄","生日","部门"],//用来指定标题列的名称  colNames必须和colModel成对出现  一个表名对应一个{}
    36.                 colModel:[
    37.                     {
    38.                         name:"id",
    39.                         align:"center",
    40.                         //列隐藏
    41.                         //hidedlg:true,
    42.                         //hidden:true
    43.  
    44.                     },
    45.                     {
    46.                         name:"name",
    47.                         //对齐
    48.                         align:"center",
    49.                         //其否可编辑
    50.                         editable:true,
    51.                         //是否可以改变大小
    52.                         resizable:false,
    53.                         //列的宽度
    54.                         width:300
    55.                     },
    56.                     {
    57.                         name:"age",
    58.                         align:"center",
    59.                         formatter:function(cellvalue, options, rowObject){//用来对数据进二次处理  cellvalue:这列的值 options：这列的Page对象  rowObject：这行的json数据对象
    60.                             //原样渲染
    61.                             //return cellvalue;
    62.                             console.log(cellvalue);
    63.                             console.log(options);
    64.                             console.log(rowObject);
    65.                             //渲染
    66.                             if (cellvalue>23){
    67.                                 return ""+cellvalue+"";
    68.                             }
    69.                             return ""+cellvalue+"";
    70.  
    71.  
    72.                         }
    73.                     },
    74.                     {
    75.                         name:"bir",
    76.                         align:"center"
    77.                     },
    78.                     {
    79.                         //name:"dep.name",
    80.                         name:"depName",
    81.                         align:"center",
    82.                         //使用formatter进行获取对象数据进行渲染
    83.                         formatter:function(cellvalue, options, rowObject){
    84.                             return rowObject.dep.name;
    85.                         }
    86.                     }
    87.                 ],
    88.                 //一旦做了分页处理之后数据的返回格式为：listpage.json的页面显示格式
    89.                 pager:"#pager",//用来定义分页工具栏  用来处理分页请求： 后台可以定义Integer page（当前页） Integer rows（每页显示条数）
    90.                 page:2,//定义页面初始的页码
    91.                 viewrecords:true,//展示总条数
    92.                 rowNum:5,//每页展示5条 默认是20
    93.                 rowList:[2,5,10,50,100],//用来定义下拉列表，可选页面展示条数
    94.                 sortname:"name",//基于那个列进行排序
    95.                 caption:"员工列表",//定义表格标题
    96.                 hidegrid:false,//禁用表格下拉展示标题隐藏按钮的显示 默认true显示
    97.                 autowidth:true,//自适应父容器
    98.                 height:400,//指定表格高度
    99.                 pagerpos:"left",//设置分页的位置
    100.                 pgbuttons:true,//是否显示分页中翻页按钮 默认是true
    101.                 pginput:true,//是否展示跳转页面输入框 默认是true
    102.             });
    103.         });
    104.     </script>
    105.  
    106. </head>
    107. <body>
    108. <!--表格标签 1.jquery插件 属性：（文档中是初始化参数大全） 对象{}  事件：  方法：  -->
    109. <table id="userList"></table>
    110.  
    111. <!--定义分页工具栏-->
    112. <div id="pager"></div>
    113. </body>
    114. </html>

     listpage.json：

    1. {
    2.   "page": "1",
    3.   "total": 2,
    4.   "records": "13",
    5.   "rows": [
    6.     {
    7.       "id": "21",
    8.       "name": "xiaochen",
    9.       "age": 23,
    10.       "bir": "2012-12-12",
    11.       "dep": {
    12.         "id": "222",
    13.         "name": "财务部"
    14.       }
    15.     },
    16.     {
    17.       "id": "22",
    18.       "name": "张三",
    19.       "age": 40,
    20.       "bir": "2012-12-12",
    21.       "dep": {
    22.         "id": "222",
    23.         "name": "研发部"
    24.       }
    25.     },
    26.     {
    27.       "id": "23",
    28.       "name": "王五",
    29.       "age": 33,
    30.       "bir": "2012-12-12",
    31.       "dep": {
    32.         "id": "222",
    33.         "name": "技术部"
    34.       }
    35.     },
    36.     {
    37.       "id": "24",
    38.       "name": "李四",
    39.       "age": 50,
    40.       "bir": "2012-12-12",
    41.       "dep": {
    42.         "id": "222",
    43.         "name": "外交部"
    44.       }
    45.     }
    46.   ]
    47. }

     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对象设置表格的标题

     写一个按钮：

    写方法：调用：

     

     点击测试方法：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>jqgrid第一个Demo</title>
    6.     <!--css-->
    7.     <!--引入bootstrap的css-->
    8.     <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    9.     <!--引入jqgrid的核心css-->
    10.     <link rel="stylesheet" href="../static/jqgrid/ui.jqgrid-bootstrap.css">
    11.  
    12.     <!--js-->
    13.     <!--引入jQuery的文件-->
    14.     <script src="../static/jq/jquery-3.6.0.js"></script>
    15.     <!--引入jqgrid的核心js-->
    16.     <script  src="../static/jqgrid/jquery.jqGrid.min.js"></script>
    17.     <!--引入jqgrid的国际化js-->
    18.     <script  src="../static/jqgrid/grid.locale-cn.js"></script>
    19.     <!--引入bootstrap的js文件-->
    20.     <script src="../static/js/bootstrap.min.js"></script>
    21.     <style>
    22.         th{
    23.             text-align: center;
    24.         }
    25.     </style>
    26.  
    27.     <script>
    28.         $(function(){
    29.             /*
    30.             * jqgrid属性使用方式：将属性以对象的方式作为jqgrid的参数进行传递即可，对象中的属性名：属性值书写  ---对应网站初始化参数大全
    31.             * 2.jqgrid中的列属性方式 列属性使用也是以对象的形式作为colModel的参数进行传递即可  --对应网站ColModel参数大全
    32.             * 3.jqgrid中事件的使用，将对应的事件以对象的方式作为jqgrid的参数进行传递即可
    33.             * 4.jqgrid中方法的使用 对应jqgrid组件选择器.jqgrid（‘方法名’，参数列表）
    34.             * */
    35.  
    36.             $("#userList").jqGrid({//属性
    37.                 //初始化表格
    38.                 styleUI:"Bootstrap",//用来指定jqgrid的主题样式
    39.                 url: "./listpage.json",//用来远程获取数据的地址 json格式的数据   相当于$.post（） ajax请求后台控制器  这里模仿后台让它访问json文件
    40.                 datatype: "json", //用来指定数据返回的数据类型默认是xml
    41.                 mtype:"POST",//请求方式，默认get请求
    42.                 colNames:["编号","姓名","年龄","生日","性别","部门"],//用来指定标题列的名称  colNames必须和colModel成对出现  一个表名对应一个{}
    43.                 colModel:[
    44.                     {
    45.                         name:"id",
    46.                         align:"center",
    47.                         search:false,//不作为搜索条件
    48.                         //列隐藏
    49.                         //hidedlg:true,
    50.                         //hidden:true
    51.  
    52.                     },
    53.                     {
    54.                         name:"name",
    55.                         //对齐
    56.                         align:"center",
    57.                         //其否可编辑  添加了可编辑后，在下方显示编辑功能按钮的时候，才有显示输入框进行编辑
    58.                         editable:true,
    59.                         //是否可以改变大小
    60.                         resizable:false,
    61.                         //列的宽度
    62.                         width:300
    63.                     },
    64.                     {
    65.                         name:"age",
    66.                         align:"center",
    67.                         //其否可编辑
    68.                         editable:true,
    69.                         formatter:function(cellvalue, options, rowObject){//用来对数据进二次处理  cellvalue:这列的值 options：这列的Page对象  rowObject：这行的json数据对象
    70.                             //原样渲染
    71.                             //return cellvalue;
    72.                             console.log(cellvalue);
    73.                             console.log(options);
    74.                             console.log(rowObject);
    75.                             //渲染
    76.                             if (cellvalue>23){
    77.                                 return ""+cellvalue+"";
    78.                             }
    79.                             return ""+cellvalue+"";
    80.  
    81.  
    82.                         }
    83.                     },
    84.                     {
    85.                         name:"bir",
    86.                         align:"center",
    87.                         //其否可编辑
    88.                         editable:true
    89.                     },
    90.                     {
    91.                         name:"sex",
    92.                         align:"center",
    93.                         //其否可编辑
    94.                         editable:true,
    95.                         edittype:"select",//性别定义成下拉列表的格式
    96.                         editoptions:{//本地写死的数据 本地数据
    97.                             //multiple:true,//实现下拉列表的多选
    98.                             value:"1:男;2:女"
    99.                         }
    100.                     },
    101.                     {
    102.                         //name:"dep.name",
    103.                         name:"depName",
    104.                         align:"center",
    105.                         //其否可编辑
    106.                         editable:true,
    107.                         //使用formatter进行获取对象数据进行渲染
    108.                         formatter:function(cellvalue, options, rowObject){
    109.                             return rowObject.dep.name;
    110.                         },
    111.                         edittype:"select",//定义成下拉列表的格式  有1.本地写死的数据  2.远程获取
    112.                         editoptions:{
    113.                             dataUrl:"/dep/findAll",//从远端服务器获取数据  返回的数据是html的字符串  <select><option value="">研发部></option>...</select>
    114.  
    115.                         }
    116.                     }
    117.                 ],
    118.                 //一旦做了分页处理之后数据的返回格式为：listpage.json的页面显示格式
    119.                 pager:"#pager",//用来定义分页工具栏  用来处理分页请求： 后台可以定义Integer page（当前页） Integer rows（每页显示条数）
    120.                 page:2,//定义页面初始的页码
    121.                 viewrecords:true,//展示总条数
    122.                 rowNum:5,//每页展示5条 默认是20
    123.                 rowList:[2,5,10,50,100],//用来定义下拉列表，可选页面展示条数
    124.                 sortname:"name",//基于那个列进行排序
    125.                 caption:"员工列表",//定义表格标题
    126.                 hidegrid:false,//禁用表格下拉展示标题隐藏按钮的显示 默认true显示
    127.                 autowidth:true,//自适应父容器
    128.                 height:400,//指定表格高度
    129.                 pagerpos:"center",//设置分页的位置 默认center
    130.                 pgbuttons:true,//是否显示分页中翻页按钮 默认是true
    131.                 pginput:true,//是否展示跳转页面输入框 默认是true
    132.                 editurl:"/user/edit",//编辑时的url 增删改发起的url 后端的接口
    133.  
    134.                 //事件
    135.                 //数据加载完之后触发的事件
    136.                 gridComplete:function(){
    137.                    // alert();
    138.                 },
    139.                 //点击单元格触发的事件
    140.                 onCellSelect:function(rowid,iCol,cellcontent,e){
    141.                     console.log(rowid);//行的id
    142.                     console.log(iCol);
    143.                     console.log(cellcontent);//点击触发的值
    144.                     console.log(e);//事件对象
    145.                 }
    146.             }).navGrid("#pager",//放置的位置
    147.                 {add:true,edit:true,del:true,search:true,refresh:true},//展示的配置
    148.                 {height:600,width:700,
    149.                     //编辑后关闭掉弹窗并且从新载入表格
    150.                     closeAfterEdit:true,reloadAfterSubmit:true},//编辑面板的配置
    151.                 {height:600,width:700,
    152.                     //添加成功关闭面板，刷新表格
    153.                     closeAfterAdd:true,reloadAfterSubmit:true},//添加的配置
    154.                 {
    155.                     //删除后关闭面板，刷新表格
    156.                     closeAfterDelete:true,reloadAfterSubmit:true},//删除的配置
    157.                 {sopt:['cn','eq','ne','lt','gt']}//搜索配置
    158.                 );//快速增加编辑功能按钮  表单的元素需要设置：其否可编辑  editable:true
    159.  
    160.             //参数1：将看看快速编辑按钮放到那个位置  参数2：展示编辑的配置对象 参数3：代表编辑面板的配置
    161.             // 参数4：添加面板的配置 参数5：删除面板的配置 参数6：搜索面板的配置  参数7：刷新的配置
    162.         });
    163.  
    164.         //方法
    165.         function testMethod(){
    166.             //jqgrid的方法
    167.             $("#userList").jqGrid('clearGridData',false);//清除数据
    168.             $("#userList").jqGrid('setCaption',"小陈");//更改标题
    169.         }
    170.     </script>
    171.  
    172. </head>
    173. <body>
    174. <!--表格标签 1.jquery插件 属性：（文档中是初始化参数大全） 对象{}  事件：  方法：  -->
    175. <table id="userList"></table>
    176.  
    177. <!--定义分页工具栏-->
    178. <div id="pager"></div>
    179.  
    180. <!---->
    181. <button class="btn btn-danger" onclick="testMethod()">测试方法</button>
    182. </body>
    183. </html>

  • 相关阅读:
    用 Flutter 的 Canvas 画点有趣的图形
    Android学习笔记 1.1 Android的发展和历史
    MyBatisPlus-多记录操作及逻辑删除
    程序员在技术之外，还要掌握一个技能——自我营销能力
    webpack5基础--08_处理字体图标资源
    河工计院ACM2022寒假培训题单以及超详细题解
    Matlab图像处理-HSI模型
    《UnityShader入门精要》学习2
    后端实现跨域的几种方案
    Flask Web框架入门教程
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/128203748