EasyUI datagrid插件 loader属性使用详解

最新推荐文章于 2020-05-25 08:38:53 发布

锦天

最新推荐文章于 2020-05-25 08:38:53 发布

阅读量6.2k

点赞数 1

分类专栏： jQuery 文章标签： EasyUI datagrid 分页 loader 错误提示

本文链接：https://blog.csdn.net/wuyujin1997/article/details/89952820

版权

jQuery 专栏收录该内容

27 篇文章

订阅专栏

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