jQuery MiniUI

标题: mini-datagrid 中url请求 [打印本页]
作者: Subfire    时间: 2017-6-15 18:57:03     标题: mini-datagrid 中url请求

mini-datagrid 中url请求数据时，后端包含@RequestBody时不成功。去掉@RequestBody就可以正常：
@RequestMapping(value = "/xxxx", method = RequestMethod.POST)
public List<LogInfo> getLogs(@RequestBody(required = false) LogInfoParam param) {
    return logService.getLogs(param);
}
这miniui该怎么设置啊？
作者: felt    时间: 2017-6-16 09:15:47

MiniUI只是前端控件，不处理后台，你后台只要返回符合我们需要格式的数据就可以显示
datagrid后台返回的数据格式是这样的{total:"",data:[{},{},{}]};
作者: 13407315255    时间: 2017-6-22 11:59:53

本帖最后由 13407315255 于 2017-6-22 12:39 编辑

你用@RequestBody的时候，是要求你的前端必须给json串的。而miniui自动封装的并不是json串，一般很少使用@RequestBody的
作者: duanluan    时间: 2020-7-28 15:36:00

本帖最后由 duanluan 于 2020-7-28 15:40 编辑

我也是这个问题，表格 load 要用 @ResponseBody 传参，想要前端有些参数直接传递数组，免得后端再处理。超级版主不是很懂 Java，至少不懂 Spring MVC 请求这块，看了多个帖子都答不在点子上。
如果后端要用 @ResponseBody 接收数据的话，首先后端要改成 @RequestMapping 或 @PostMapping，然后前端把要传的参数放在 ajaxOptions 里，请求也要改成 POST：

// 请求参数
const params = { pageIndex: 0, pageSize: 10, a: "123"};
datagrid.load({
    // 其他配置忽略
    ……,
    ajaxOptions: {
        contentType: 'application/json',
        type: 'post',
        data: JSON.stringify(params)
    }
});


datagrid 二次 load 的话可以这样写：

// datagrid 是 mini.get 获取的对象
const ajaxOptions = datagrid.getAjaxOptions();
ajaxOptions.data = JSON.stringify(params);
datagrid.setAjaxOptions(ajaxOptions);
datagrid .load();




作者: felt    时间: 2020-7-28 16:14:49

duanluan 发表于 2020-7-28 15:36
我也是这个问题，表格 load 要用 @ResponseBody 传参，想要前端有些参数直接传递数组，免得后端再处理。超 ...

miniUI只是前端控件，通过ajax进行交互
grid.load({obj})
=>相当于
$.ajax({
   url:"",
   databj,
   success:function(text){
        var data=mini.decode(text);
        grid.setData(data);
   }
})
这个方式的ajax后台怎么接收怎么返回，就正常的接收返回就可以了
作者: duanluan    时间: 2020-7-28 22:42:17

felt 发表于 2020-7-28 16:14
miniUI只是前端控件，通过ajax进行交互
grid.load({obj})
=>相当于

我觉得这方面扩展性可以补充下，用 setData 的话，比如我后续还要请求多次比较麻烦，用 load 就稍微方便点，因为我还封装了 datagrid 的加载。
miniui 的 JS 混淆了我看不到，想问下 load 的底层是不是也是获取到 data，再 setData 的？如果是的话，我不介意换种方式写，如果不是的话，setData 相比 load 会不会有性能问题？
作者: felt    时间: 2020-7-29 11:00:35

duanluan 发表于 2020-7-28 22:42
我觉得这方面扩展性可以补充下，用 setData 的话，比如我后续还要请求多次比较麻烦，用 load 就稍微方便 ...

load只是多做了加载数据的活，填充还是setData干的
作者: duanluan    时间: 2020-11-11 18:25:40

最新封装：
  1. $.extend({
  2.     // 表格：http://miniui.com/docs/api/index.html#ui=datagrid
  3.     dataGrid: {
  4.       init: function (myOptions, successFn) {
  5.         // 默认配置
  6.         const options = {
  7.           style: 'height:100%',
  8.           ajaxType: 'get',
  9.           dataType: 'json',
  10.           contentType: 'application/x-www-form-urlencoded;charset=utf-8',
  11.           pageSize: 10,
  12.           sizeList: [10, 20, 30, 50, 100],
  13.           // 允许单元格编辑。此模式下，行编辑 API 将失效。
  14.           allowCellEdit: true,
  15.           allowCellSelect: true,
  16.           // 显示斑马纹
  17.           allowAlternating: true,
  18.           // 允许选择行
  19.           allowRowSelect: true,
  20.           // 数据为空时显示提示文本
  21.           showEmptyText: true,
  22.           // 数据为空时的提示文本
  23.           emptyText: '未查询到匹配数据',
  24.           // 是否显示修改的红色小三角
  25.           showModified: false,
  26.           // 显示列菜单。实现显示、隐藏列。
  27.           showColumnsMenu: true,
  28.         };
  29.         // 将默认配置合并到新配置对象中
  30.         $.extend(true, options, myOptions);

  32.         const _datagrid = mini.get(options.selectorId);
  33.         // 将配置赋值给表格，参数不直接用 options，因为此方法会修改参数的值
  34.         _datagrid.set(jQuery.extend(true, {}, options));
  35.         /**
  36.          * 重写 reload 方法
  37.          * @param params 请求参数
  38.          * @param isAppend 是否追加请求参数
  39.          */
  40.         _datagrid.reload = function (params, isAppend) {
  41.           // 是否覆盖参数
  42.           if (params) {
  43.             if (isAppend === true) {
  44.               if (typeof params === 'string') {
  45.                 const newParams = JSON.parse(options.params);
  46.                 options.params = JSON.stringify($.extend(true, newParams, JSON.parse(params)));
  47.               } else {
  48.                 $.extend(true, options.params, params);
  49.               }
  50.             } else {
  51.               options.params = params;
  52.             }
  53.           }
  54.           // 请求列表数据
  55.           $.ajax({
  56.             url: options.url,
  57.             data: options.params,
  58.             dataType: options.dataType,
  59.             contentType: options.contentType,
  60.             type: options.ajaxType,
  61.             success: function (data, code, msg) {
  62.               if (code === 0) {
  63.                 $.jBox.showNotice({ color: 'red', content: msg });
  64.               } else {
  65.                 // 将列表数据赋值给表格
  66.                 _datagrid.setData(data);
  67.                 // 执行参数事件
  68.                 if (successFn) {
  69.                   successFn();
  70.                   // _datagrid.on('load', successFn);
  71.                 }
  72.               }
  73.             }
  74.           });
  75.         };
  76.         _datagrid.reload();
  77.       }
  78.     }
  79. });
复制代码




欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2