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       指定寬度不隨表格的大小而改變

JQGRID使用BootStrap的主題風格

                ```html

1.解壓縮  bootstrap-jqgrid(主題樣式).zip
   2.把對應的css文件及js文件  引入項目中
    <!--引入BootStrap的相關css樣式-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/boot/css/bootstrap.css"/>
    <!--引入BootStrap及JQGRID整合過後的CSS樣式-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/jqgrid/boot/css/trirand/ui.jqgrid-bootstrap.css">
    <!--引入JQuery的js文件-->
    <script type="application/javascript" src="${pageContext.request.contextPath}/boot/js/jquery-3.3.1.min.js"> </script>
    <!--引入BootStrap相關的js文件-->
    <script type="application/javascript" src="${pageContext.request.contextPath}/boot/js/bootstrap.js"> </script>
    <!--引入jqgrid的國際化的js文件-->
    <script type="application/javascript" src="${pageContext.request.contextPath}/jqgrid/js/i18n/grid.locale-cn.js"></script>
    <!--引入jqgrid的基礎js文件-->
    <script type="application/javascript" src="${pageContext.request.contextPath}/jqgrid/boot/js/trirand/jquery.jqGrid.min.js"></script>
    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("請選中一行");
          })

​