mini-datagrid 中url请求

Subfire

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

MiniUI只是前端控件，不处理后台，你后台只要返回符合我们需要格式的数据就可以显示
datagrid后台返回的数据格式是这样的{total:"",data:[{},{},{}]};

13407315255

你用@RequestBody的时候，是要求你的前端必须给json串的。而miniui自动封装的并不是json串，一般很少使用@RequestBody的

duanluan

我也是这个问题，表格 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

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

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

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

felt

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

load只是多做了加载数据的活，填充还是setData干的

duanluan

最新封装：

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

复制代码