miniUI grid.load({})传值

博客展示了前后台交互的代码示例,前台使用JS进行数据请求,如考勤记录销假列表查询、销假操作、节点操作按钮查询、信息发布保存或更新等;后台使用Java处理请求,返回JSON数据,涉及考勤、流程节点操作、信息发布等业务逻辑。

1.

前台JS
vacationGrid.load({ userName : “”});
后台
/**
* 考勤记录 销假列表
* @param MeetingRoom
* @return
*/
@RequestMapping({"/queryVacationList.do"})
@ResponseBody
public JsonView queryVacationList(@RequestParam(value=“userName”) String userName){
Map<String, String> param = new HashMap<>();
param.put(“userName”, userName);
param.put(“state”, “2”);
List list = this.vacationService.queryVacationList(param);
return new JsonView(list);
}

2.

前台JS
$.ajax({
url: “/oa/vacation/updVacationIsOff.do”,
data : {“taskId”: row.taskId },
dataType:“json”,
async:false,
//contentType : ‘application/json; charset=utf-8’,
success: function(data) {
if(data.success){
alert(“销假完成!”);
vacationGrid.reload();
}else{
alert(“销假失败!”);
vacationGrid.reload();
}
}
});

后台

@RequestMapping({"/updVacationIsOff.do"})
@ResponseBody
public Object updVacationIsOff(@RequestParam(“taskId”)String taskId) throws Exception {
Map<String, Object> resultMap = new HashMap<>();
try {
Vacation input = new Vacation();
input.setTaskId(taskId);
input.setIsOff(“0”);
input.setOffDate(DateUtil.customToString(new Date(),“yyyy-MM-dd”));
int resultStr = this.vacationService.updVacationIsOff(input);
if(resultStr > 0) {
resultMap.put(“success”, true);
resultMap.put(“data”, resultStr);
}else {
resultMap.put(“success”, false);
resultMap.put(“data”, resultStr);
}
} catch (Exception e) {
resultMap.put(“success”, false);
resultMap.put(“msg”, e.toString());
}
return new JsonView(resultMap);
}

3.

**前台 JS** 
$.ajax({
		url: "/oa/flow/queryNodeOPerButton.do",
		data : {nodeId : curNodeId},
		dataType:"json",
		async:false,
		contentType : 'application/json; charset=utf-8',
		success: function(data) {
			if(data.data.length > 0){
				//返回环节操作
				/*根据操作 渲染表单,拼btn*/	
				for(i=0;i<data.data.length;i++){
					innerHtmlStr+='&nbsp;&nbsp;&nbsp;&nbsp;<a class="mini-button" style="width:80px;line-height: 20px" id="submitButton" onclick="doOperation(\''+data.data[i]["NEXT_NODE"]+'\')">'+data.data[i]["OPER_NAME"]+'</a>'					}
				$("#btns").append(innerHtmlStr);
			}
			
		}
	});

后台
@RequestMapping({ “/queryNodeOPerButton.do” })
@ResponseBody
public Object queryNodeOPerButton(String nodeId) throws Exception {
List<Map<String, Object>> list = this.processNodeOperService.queryNodeOPerButton(nodeId);
JSONArray array = new JSONArray();
array.addAll(list);
return new JsonView(array);
}

4.

前台js
sdcl.ajax({
url : “/oa/infoDiffusion/saveOrUpdateInfoDiffusion.do?nextNodeId=”+nextNodeId + “&curNodeId=”+curNodeId + “&curUserId=”+curUserId +"&opinion="+opinion,//后台需要依次创建 任务记录,业务记录,待办
data : JSON.stringify(saveData),
contentType : ‘application/json; charset=utf-8’,
dataType:“json”,
success : function(data) {
// alert(JSON.stringify(data));
if(data.success){
// addform.setData(data.data);
// window.close();
alert(“发送成功!”);
$("#btns").hide();
}
}
});
后台
@RequestMapping({"/saveOrUpdateInfoDiffusion.do"})
@ResponseBody
public JsonView saveOrUpdateInfoDiffusion(@RequestBody InfoDiffusion saveData,
String nextNodeId,String curNodeId,String curUserId,String opinion,String fiid){
Map<String, Object> resultMap = new HashMap<>();
Map<String, String> busMap = new HashMap<>();
busMap.put(“process_id”, “00000000000000000004”);
busMap.put(“process_name”, “信息发布”);
busMap.put(“url”, “pages/pc/html/infoDiffusion/infoDiffusionAuditForm.html”);
busMap.put(“curUserId”, curUserId);
busMap.put(“sendUserId”, saveData.getUserId());
busMap.put(“curNodeId”, curNodeId);
busMap.put(“nextNodeId”, nextNodeId);
busMap.put(“opinion”, opinion);
busMap.put(“fiid”, fiid);

<think>我们面对的问题是如何在使用表格或数据展示组件时,在grid.load回调函数中取消默认的setData行为。根据提供的引用内容,我们可以看到一个名为ClientPagination的类,它通过拦截load和setData方法来实现客户端分页。在引用中,有一个onBeforeLoad方法,其中有一行代码:e.cancel = true; 这行代码用于取消默认的加载行为。 根据引用中的代码,我们可以推断出,在EasyUI或者其他类似的表格组件中,当触发load事件时,可以通过设置事件对象的cancel属性为true来取消默认的setData行为。然后,我们可以手动处理数据的加载和显示。 具体步骤: 1. 我们需要在表格的load事件中取消默认行为。 2. 然后,我们手动设置当前页的数据。 在引用中的onBeforeLoad方法是这样实现的: ```javascript onBeforeLoad(e) { e.cancel = true; // 取消默认的加载行为 let pageIndex = e.data.pageIndex; let pageSize = e.data.pageSize; this.setPageData(pageIndex, pageSize); } ``` 因此,回答用户的问题:在grid.load回调中,可以通过事件对象(通常为e或event)的cancel属性来阻止默认的setData操作。具体做法是在回调函数中设置e.cancel = true。 但是,请注意,这个事件对象的结构和可用属性取决于具体的UI库。在引用中,使用的是类似EasyUI的框架。如果用户使用的是其他框架,可能需要查看对应框架的文档。 下面,我们按照用户要求的结构进行回答: 首先,我们需要明确用户使用的表格组件是什么。根据引用内容,我们假设是EasyUI的DataGrid组件。在EasyUI中,DataGrid的onBeforeLoad事件可以取消加载操作。 步骤: 1. 为DataGrid组件绑定onBeforeLoad事件。 2. 在该事件处理函数中,将入的事件对象e的cancel属性设置为true,这样就会阻止默认的加载行为(包括默认的setData)。 3. 然后,我们可以根据分页信息(pageIndex和pageSize)从我们缓存的数据中取出当前页的数据,并手动设置到表格中。 示例代码(基于引用中的ClientPagination类): ```javascript // 假设我们已经有了一个DataGrid实例,并且我们创建了ClientPagination实例 var dg = $('#dg').datagrid(); var clientPager = new ClientPagination(dg); // 在ClientPagination类中,我们重写了load方法,并处理了onBeforeLoad事件 ``` 具体到用户的问题:如何在grid.load回调中阻止表格组件的默认setData操作? 答案:在grid的onBeforeLoad事件中,设置e.cancel=true即可。 但是,请注意,load事件和onBeforeLoad事件是不同的。通常,onBeforeLoad事件在加载数据之前触发,我们可以在这里取消加载。而load事件是在加载数据之后触发的,此时已经完成了setData。 因此,正确的做法是在onBeforeLoad事件中取消。 如果用户没有使用EasyUI,而是其他框架,比如jQuery DataTables等,那么方法可能不同。但思路类似:找到在数据加载之前触发的事件,然后取消默认行为,手动设置数据。 由于用户的问题中提到了“grid.load回调函数”,所以我们需要确认这个回调函数是在什么时候执行的。根据引用中的代码,在load方法中,我们可以实现自己的加载逻辑,然后调用自己的setData方法。 总结:要阻止默认的setData行为,可以在onBeforeLoad事件中设置e.cancel=true,然后手动设置数据。 下面我们生成相关问题: §§相关问题§§ 1. 如何为EasyUI DataGrid实现客户端分页? 2. 在EasyUI中,onBeforeLoad事件和onLoad事件有什么区别? 3. 除了取消默认的setData行为,还有哪些方法可以实现自定义数据加载?</think>### 如何在 grid.load 回调中阻止表格的默认 setData 操作 在表格组件(如 EasyUI DataGrid)中,当调用 `grid.load()` 方法时,组件会默认执行 `setData` 操作将返回数据渲染到表格。要阻止此行为,需通过事件拦截和自定义数据处理实现: #### 核心解决方案 1. **拦截 `onBeforeLoad` 事件** 在加载前取消默认行为: ```javascript grid.on('onBeforeLoad', function(e) { e.cancel = true; // 关键:阻止默认加载逻辑 const { pageIndex, pageSize } = e.data; // 手动处理数据(见步骤2) }); ``` 2. **自定义数据加载逻辑** 在 `load` 方法中接管数据处理: ```javascript const cachedData = []; // 存储完整数据集 grid.load = function(params, success, fail) { // 1. 发起异步请求 fetch('/api/data', params).then(res => { cachedData = res.data; // 缓存完整数据 // 2. 手动分页处理(非默认setData) const pageData = getPageData(cachedData, currentPage, pageSize); // 3. 调用原始setData显示当前页 originalSetData.call(grid, pageData); success?.(); }).catch(fail); }; ``` 3. **实现分页逻辑** 从缓存数据中提取当前页数据: ```javascript function getPageData(fullData, pageIndex, pageSize) { const start = pageIndex * pageSize; return fullData.slice(start, start + pageSize); } ``` #### 完整实现框架 ```javascript class ClientPagination { constructor(grid) { this.grid = grid; this.cachedData = []; this.originalMethods = {}; this.interceptMethods(); this.setupEvents(); } interceptMethods() { // 备份原始方法 this.originalMethods.setData = this.grid.setData.bind(this.grid); this.originalMethods.load = this.grid.load.bind(this.grid); // 重写load方法 this.grid.load = (params, success, fail) => { // 自定义加载逻辑(见步骤2) }; } setupEvents() { this.grid.on('onBeforeLoad', (e) => { e.cancel = true; // 取消默认加载 this.setPageData(e.data.pageIndex, e.data.pageSize); }); } setPageData(pageIndex, pageSize) { const pageData = this.cachedData.slice( pageIndex * pageSize, (pageIndex + 1) * pageSize ); this.originalMethods.setData(pageData); // 手动渲染 } } // 初始化 const grid = $('#datagrid').datagrid(); new ClientPagination(grid); ``` #### 关键说明 1. **`e.cancel=true` 的作用** 在 `onBeforeLoad` 事件中阻止内置的数据处理和渲染流程,使组件不执行默认的 `setData`[^1]。 2. **数据流控制** - 完整数据缓存在 `cachedData` 中 - 分页时仅提取当前页数据 - 通过备份的 `originalMethods.setData()` 渲染 3. **适用场景** 此方案适用于需实现以下功能的场景: - 客户端分页 - 前端数据过滤/排序 - 避免重复请求的缓存机制 > ⚠️ **注意事项**:不同UI框架事件名称可能略有差异(如 `beforeLoad`/`onBeforeLoad`),需参考具体组件文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值