EasyUI datagrid插件 loader属性 使用详解

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);
  }
}

打印结果如图：

• 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;
}

打印结果：

• 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();
  }
  

  

  • 异常信息前端如何拿到？
    $.ajax(settings)中的error(jqXHR, textStatus, errorThrown)中的jqXHR有很多成员。
    其中responseText或responseJSON可以用于获取AJAX操作失败(error)后获取响应数据。
    如图：jqXHR对象中有我们想要的东西。
    

  • 前端的反馈
    修改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();
  }
  

  如图：查询分页数据错误，前端有提示(提示的具体信息，可自定义)。
  

sum

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

查询分页数据成功：

• 请求失败
  • 前端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 p = new Pagination<>(total);
String sql = "select id, username, password from aadmin limit ?, ?";
try {
    Object[] params = {(page - 1) * rows, rows};
    List 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插件使用

其中的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对象的属性，用于定义单元格的编辑器。