EasyUI datagrid插件 loader属性使用详解

梦里梦外; 2022-02-03 00:43 775阅读 0赞

## intro ##

`loader` 定义如何从远程服务器加载数据，如果返回false则取消动作。  
`loader`属性指向一个函数表达式：`function(param, succcess(data), error) {...}`。

另：[loadFilter][]属性用于过滤返回的分页数据的格式(必须包含`total`和`rows`)。

## code ##

*  打印loader方法的三个参数

// 定义如何从远程服务器加载数据。返回false则取消动作。一般与$.ajax(settings)等方法结合使用。
    loader: function(param, success, error) {
      console.info("loader(param, success(data), error)方法的三个参数：");
      for (let e of arguments) {
          console.log(Object.prototype.toString.call(e), e);
      }
    }

打印结果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_222222_t_70]

*  loader中的AJAX操作

// loader内部一般执行AJAX操作，如果AJAX操作成功(执行AJAX中的success方法)，则执行loader的succes方法。
    // 如果AJAX操作error，则执行loader的error方法。
    $.ajax({
        type: opts.method,
        url: opts.url,
        data: opts.param,   // param
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
            console.info("AJAX请求成功");
            for (let e of arguments) {
                console.log(Object.prototype.toString.call(e), e);
            }
            success(data);  // loader(param, success, error)中的参数：success方法。
            // 调用loader(param, success, error)方法传入的success(data)方法。
            // 向这个方法传入的data参数，会继续传给loaderFilter(data)。
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // ...
        }
    });

如果loader(param, success(data), error)中的AJAX操作成功，会调用AJAX的success方法，  
在其中调用loader的第二个参数success(data)，data会传给loaderFilter(data)，  
在loaderFilter中查看传入的数据是否包含total和rows属性(数据过滤)。

loadFilter: function(obj) {
        console.log("响应数据：total = ", obj.total);
        console.log("响应数据：rows = ", obj.rows);
        return obj;
    }

打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70]

*  loader的error参数
    
     *  修改后端，设置响应的HTTP状态码为404(在写回响应数据之前设置)。
    
        response.setStatus(404);    // 设置响应的状态码
        
        // 可以不写回响应数据
        // response.setContentType("text/json");
        // PrintWriter writer = response.getWriter();
        // writer.write(JSON.toJSONString(result, prettyFormat));
        // writer.close();
    
     *  前端再次发出请求，loader内的AJAX操作失败，执行error方法。  
        AJAX的error方法：
    
        error: function(jqXHR, textStatus, errorThrown) {
          console.info("AJAX请求 error");
          for (let e of arguments) {
              console.log(Object.prototype.toString.call(e), e);
          }
        
          // AJAX操作失败，必须调用loader的error方法。否则页面会一直刷新(无法向下执行)。
          error();
        }

如果分页请求失败，如何向前端用户反馈？

*  请求失败的反馈
    
     *  后端设置HTTP响应状态码，然后将错误提示信息写回到response中。
    
        try {
          // DB操作
        } catch (Exception e) {
          response.setStatus(404);  // 先设置HTTP状态码
        
          response.setContentType("text/json");
          PrintWriter writer = response.getWriter();
          writer.write(JSON.toJSONString(e.getMessage()));    // 写回错误信息(如异常信息)
          writer.close();
        }
    
    ![在这里插入图片描述][20190508144439700.png]
    
     *  异常信息前端如何拿到？  
        `$.ajax(settings)`中的`error(jqXHR, textStatus, errorThrown)`中的jqXHR有很多成员。  
        其中`responseText`或`responseJSON`可以用于获取AJAX操作失败(error)后获取响应数据。  
        如图：`jqXHR`对象中有我们想要的东西。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 1]
     *  前端的反馈  
        修改`loader`中AJAX操作失败(error)方法中的代码，添加消息提示框。
    
        error: function(jqXHR, textStatus, errorThrown) {
          // console.info("AJAX请求 error");
          // for (let e of arguments) {
          //     console.log(Object.prototype.toString.call(e), e);
          // }
        
          // 通过jqXHR拿到请求错误后的响应数据
          var sqlMsg = jqXHR.responseText;
          // 弹出消息提示框
          $.messager.confirm({
              title: "查询分页出错",
              msg: sqlMsg,
              width: "auto",
          });
        
          // AJAX操作失败，必须调用loader的error方法。否则页面会一直刷新(无法向下执行)。
          error();
        }
    
    如图：查询分页数据错误，前端有提示(提示的具体信息，可自定义)。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 2]

## sum ##

*  请求成功
    
     *  前端datagrid插件对象的loader方法中发出AJAX请求。
     *  后端操作，无误。写回数据。
     *  前端loader的AJAX方法执行success方法，在其中调用loader的success(data)方法。
     *  调用datagrid的loadFilter方法。  
        过滤数据(data.total作为总记录数，data.rows是多个对象的数组，每个对象存储一条记录的数据)。
     *  数据显示。

查询分页数据成功： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 3]

*  请求失败
    
     *  前端datagrid的loader方法中发出AJAX请求。
     *  后端操作出错(抛出异常等)
        
         *  先设置HTTP状态码异常(如404)
         *  写回错误提示消息(如SQL语句，或自定义)。
     *  loader中的AJAX操作失败，执行AJAX的error()，在其中必须调用loader方法传入的error方法(否则页面一直刷新)。
        
         *  `error(jqXHR, textStatus, errorThrows)`中的jqXHR对象的成员属性中有我们需要的信息。
            
             *  `responseText`或`responseJSON`是我们写回的数据。
             *  其他。
         *  在loader的AJAX操作的error方法中，向用户发出信息回馈。
            
             *  `alert(jqXHR.responseText);`
             *  ·jQuery EasyUI·的`messager`插件。
         *  前端无法刷出列表数据。不过有回馈信息的弹出框。

## Code ##

*  后端(包含部分自定义的工具方法)

// int page = ...;
    // int rows = ...;
    // ...
    
    // int total = ...; // DB查询，结果集行数。
    
    Pagination<Admin> p = new Pagination<>(total);
    String sql = "select id, username, password from aadmin limit ?, ?";
    try {
        Object[] params = {(page - 1) * rows, rows};
        List<Admin> read = DBUtil.read(MapperFactory.getMapper(Admin.class), sql, params);
        p.setRows(read);
    } catch (Exception e) {
        response.setStatus(404);    // 操作失败，设置HTTP状态码。
    
        response.setContentType("text/json");
        PrintWriter writer = response.getWriter();
        writer.write(JSON.toJSONString(e.getMessage()));    // 写回错误信息
        writer.close();
    }
    
    ResultWriter.write(response, p);  // 操作无误，写回分页数据

*  前端  
    `datagrid`插件使用

<table id="t"></table>
    <script>
    $("#t").datagrid({
      columns: [[
        {field: "id", title: "编号"},
        {field: "username", title: "姓名"},
        {field: "password", title: "密码"},
      ]],
    
      pagination: true,
      pagePosition: "top",    // 分页条位置，可以为"bottom, top, both"，默认为"bottom"。
    
      // data: obj,   // 直接把JS对象作为数据源
      // 远程加载数据
      url: "/AdminPage",
      method: "get",
      loadFilter: function(obj) {
        console.log("响应数据：total = ", obj.total);
        console.log("响应数据：rows = ", obj.rows);
        return obj;
      },
    
      loader: function(param, success, error) {
        // 见后
      }
    });
    </script>

其中的`loader`属性：

// 定义如何从远程服务器加载数据。返回false则取消动作。一般与$.ajax(settings)等方法结合使用。
    loader: function(param, success, error) {
      // console.info("loader(param, success(data), error)方法的三个参数：");
      // for (let e of arguments) {
      //   console.log(Object.prototype.toString.call(e), e);
      // }
    
      // 如果datagrid插件对象的options中的URL未定义，则返回false。
      let opts = $(this).datagrid("options");
      if (! opts.url) {
        return false;   // 没有URL，阻止动作。
      }
    
      // loader内部一般执行AJAX操作，如果AJAX操作成功(执行AJAX中的success方法)，则执行loader的succes方法。
      // 如果AJAX操作error，则执行loader的error方法。
      $.ajax({
        type: opts.method,
        url: opts.url,
        data: param,	// 注意opts.queryParams和param的区别
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
          console.info("AJAX请求成功");
          // for (let e of arguments) {
          //   console.log(Object.prototype.toString.call(e), e);
          // }
    
          success(data);  // loader(param, success, error)中的参数：success方法。
          // 调用loader(param, success, error)方法传入的success(data)方法。
          // 向这个方法传入的data参数，会继续传给loaderFilter(data)。
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.info("AJAX请求 error");
          for (let e of arguments) {
            console.log(Object.prototype.toString.call(e), e);
          }
    
          // 通过jqXHR拿到请求错误后的响应数据
          var errorTitle = errorThrown;    // 或jqXHR.textStatus
          var errorMsg = jqXHR.responseText;
          // 弹出消息提示框
          $.messager.confirm({
            title: errorTitle,
            msg: errorMsg,
            width: "auto",
          });
    
          // AJAX操作失败，必须调用loader的error方法。否则页面会一直刷新(无法向下执行)。
          error();
        }
      });
    }

## Tips ##

*  `opts.quueryParams`和`loader`方法的第一个参数`param`的区别。
    
     *  `$(selector).datagrid("options").queryParams` 是插件对象的成员属性，表示**额外的**查询参数(除page, rows之外的查询参数对)。
     *  `loader(param, success(data), error)`中的`param`就是所有的查询参数对(包括page和rows)。
 *  请求参数`rows`和响应对象的属性`rows`
    
     *  EasyUI的分页插件`pagination`的请求参数至少包含两个：
        
         *  `page` 要查询第几页
         *  `rows` 查询多少行(pageSize，页面大小)
     *  响应数据`obj`的规范形式：`{total: 整数, rows: 数组}`，其中
        
         *  `total`是`pagination`插件的`total`的值，表示总记录数。
         *  `rows`是一个数组，每个数组元素是一个对象，每个对象存储一行的数据。
     *  `datagrid`和`pagination`插件共有的属性。
        
         *  `pageList: [5, 10, 20]`，页面尺寸的的可选项。
         *  `pageNumber: 1`，默认页码，即请求参数的`page`。
         *  `pageSize: 10`，默认的页面大小即请求参数的`rows`，默认为10(这个值必须在`pageList`数组中有)。
     *  `rowStyler(rowIndex, rowData)`和`styler(value, rowData, rowIndex)`
        
         *  `datagrid`的成员属性`rowStyler`用于定义行的样式。
         *  `column`的`styler`属性用于定义单元格的样式。
     *  `editors`属性和`editor`属性。
        
         *  `editors`是`datagrid`插件对象的成员属性，用于定义编辑行时的编辑器们。
         *  `editor`是`columns`中单个`column`对象的属性，用于定义单元格的编辑器。

[loadFilter]: https://blog.csdn.net/wuyujin1997/article/details/89856609
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_222222_t_70]: /images/20220203/04892586d4f54b8f9f9f5bdc6fe9cfa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70]: /images/20220203/ffd92ae1388f46aaaa7eac378e82c709.png
[20190508144439700.png]: /images/20220203/e626f49afdb14fc583fb659f803227fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 1]: /images/20220203/7e68d85e1b4b463985a9d2fa9980fb9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 2]: /images/20220203/9849df57c97349eb9deafeed5d0cb01b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 3]: /images/20220203/7202381375f64388b3c59a5d6e52ff67.png