{{π型人才培养计划}}JQGRID

JQGRID 数据表格

引言

概念：数据表格 渲染数据

第一个JQGRID程序

                        
      环境搭建
        1.下载jqgrid的相关文件  zip
              解压缩
         2.把对应的jqgrid相关的js文件  css文件引入项目中
         3.在网页中引入相关css及js文件
         <!--引入BootStrap的相关css样式-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/boot/css/bootstrap.css"/>
<!--引入JQGRID的相关css样式-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jqgrid/css/css/cupertino/jquery-ui-1.8.16.custom.css"/>
<!--引入JQGRID的基础CSS样式-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jqgrid/css/ui.jqgrid.css">
 <!--引入JQuery的js文件-->
<script type="application/javascript" src="${pageContext.request.contextPath}/boot/js/jquery-3.3.1.min.js"/>
<!--引入BootStrap相关的js文件-->
<script type="application/javascript" src="${pageContext.request.contextPath}/boot/js/bootstrap.js"/>
<!--引入jqgrid的国际化的js文件-->
<script type="application/javascript" src="${pageContext.request.contextPath}/jqgrid/js/i18n/grid.locale-cn.js"/>
<!--引入jqgrid的基础js文件-->
<script type="application/javascript" src="${pageContext.request.contextPath}/jqgrid/js/jquery.jqGrid.src.js"/>
           4. //jqgrid与后台交互的方式  ajax
        $(function () {
            $("#list").jqGrid({
                //获取后台具体的数据
                url:"${pageContext.request.contextPath}/users.json",
                //设置后台响应给后台的格式
                datatype:"json",
                //指定对应的列名
                colNames:["用户ID","用户名","密码","年龄"],
                //给列渲染数据
                colModel:[
                    {name:"id"},
                    {name:"username"},
                    {name:"password"},
                    {name:"age"}
                ]
            });
        });
                           

初始化参数

colNames 列显示名称，是一个数组对象
url    获取数据的地址
pager  分页效果
rowNum  传递给后台每页显示的条数
rowList  用来显示改变显示记录数 传递给后台显示的条数
sortname 指定发送给后台的排序列
viewrecords 展示表格中的总条数
caption    指定表格名称
height     设置表格高度
page       设置初始化页码

colModel

name        获取后台传递给前台的值
align       指定列值的放置位置
classes 	设置列的css。多个class之间用空格分隔，如：'class1 class2' 
editable    单元格是否可编辑  需要结合初始化参数中 cellEdit使用
edittype    可以编辑的类型。可选值：text, textarea, select, checkbox, password, button
editoptions  编辑edittype的可选值
formatter    对于后台传递的数据 进行再加工  cellvalue 该列值, options 该jqgrid对象, rowObject 该行对象
hidden      在初始化表格时是否要隐藏此列
width       设置列的宽度
fixed       指定宽度不随表格的大小而改变

分页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c36e1Hal-1582713964459)(F:\框架阶段\JQGRID\图片\分页.png)]

JQGRID使用BootStrap的主题风格

                ```html

1.解压缩 bootstrap-jqgrid(主题样式).zip
2.把对应的css文件及js文件 引入项目中






3.设置初始化属性
styleUI：“Bootstrap”
```

JQGRID对数据进行增删改

1.jqGrid("navGrid","#pager",{edit:true}); //激活jqgrid的工具栏
2. editurl:  "${pageContext.request.contextPath}/employee/edit.do"  ,  //增删改  都是此URL
3. 区分对应的操作  通过接收oper字符串
  oper为 add    后台调用添加的Service
  oper 为del    后台调用删除的Service
  oper 为edit   后台调用修改的Service
//插入
    @RequestMapping("/edit")
    @ResponseBody
    public  void edit(Employee employee,String oper) throws  Exception{
         //添加操作
        if ("add".equals(oper)){
            employeeService.add(employee);
            //修改操作
        }else  if ("edit".equals(oper)){
            employeeService.update(employee);
            //删除操作
        }else  if ("del".equals(oper)){
                                      //对象接收ID
            employeeService.delete(employee.getId());
        }
    }

JQGRID中的事件

事件的使用： 属性的使用方式一样
//事件的使用方式和属性的使用方式一致
onCellSelect: 选中单元格时触发的事件
                onCellSelect: function (rowid,iCol,cellcontent,e) {
                      console.log(rowid);
                      console.log(iCol);
                      console.log(cellcontent);
                      console.log(e);
                }
rowid: 当前行的id
iCol: 当前单元格的索引
cellcontent: 当前单元格的具体内容
e:   当前的事件对象



onSelectRow：选中改行时触发的事件
onSelectRow:function (rowid,status) {
                   console.log(rowid);
                   console.log(status);
                }
rowid：代表改行的ID
status: 代表当前行的选中状态

jqGrid 方法的使用

方法的使用方式
如果使用新的API： 
jQuery("#grid_id").jqGrid('method', parameter1,...parameterN ); 
 $("#add").click(function () {
              //添加
              $("#list").jqGrid('editGridRow', "new", {
                  height : 300,
                  reloadAfterSubmit : true //添加完数据后   重新发起请求
              });
          });
          
          $("#edit").click(function () {
              //该行的ID
              var gr = $("#list").jqGrid('getGridParam', 'selrow');
              if (gr != null)
                  $("#list").jqGrid('editGridRow', gr, {
                      height : 300,
                      reloadAfterSubmit : true
                  });
              else
                  alert("请选择一行");
          });
          
          $("#del").click(function () {
              var gr = $("#list").jqGrid('getGridParam', 'selrow');
              if (gr != null)
                  $("#list").jqGrid('delGridRow', gr, {
                      reloadAfterSubmit : true
                  });
              else
                  alert("请选中一行");
          })

     $("#list").jqGrid('delGridRow', gr, {
                  reloadAfterSubmit : true
              });
          else
              alert("请选中一行");
      })

​