学习笔记

学习笔记(有问题及时指正)

前端代码段:

卡片画面

数据初始化事件触发操作

使用afterLoadData进行代码的初始化

viewmodel.on('afterLoadData', function () {
	// TODO 
});
获取页面状态

页面分为新建编辑查看三种状态

通过var mode = viewmodel.getParams().mode;可以获取到这三种状态,mode值分别为addeditbrowse,这样就可以在afterLoadData触发后,根据这几种状态设置不同的属性了

获取表单属性

数据操作都是针对data,可以在debug状态,通过viewmodel._data()查看其属性(当前页面中的按钮和字段信息)

在卡片画面中的data,基本都是form表单中的属性,包括输入框和按钮
表单属性可以通过viewmodel.get("属性名")来获取,如:

viewmodel.get("btnEdit").setVisible(false);// 编辑按钮不显示

if (mode == 'add') {
	viewmodel.get("telephone").setValue("13888888888");
} else if (mode == 'edit') {
	viewmodel.get("telephone").setValue("13999999999");
	
	// 设置会计主体和电话不可修改
	viewmodel.get("accorg_name").setDisabled(true);
    viewmodel.get("telephone").setDisabled(true);
} else if (mode == 'browse') {
	viewmodel.get("telephone").setValue("15555555555");
}

上面代码中,既可以设置按钮的显示和隐藏,也可以给表单属性赋值(或设置不可编辑状态)。因为用的是afterLoadData触发,所以这里面的代码会覆盖掉回显时的值,如上面edit和browse虽然有默认回显值,但会被新值给覆盖掉

注:尝试了下,卡片画面直接可通过viewmodel获取beforeLoad(有params和data)和afterLoadData(只有data)的信息

表单提交

如果要在表单提交前做一些校验,可以在beforeSave事件中触发时写逻辑操作,如下面年龄验证(可能框架能实现通用逻辑)

viewmodel.on('beforeSave', function (args) {
	let age = viewmodel.get("age").getValue();
	if (isNaN(age)||age< 1||!(/^d+$/.test(age)) || age > 200) {
		cb.utils.alert("年龄有误,请重填", 'error');
		return false;
	}
	return true;
});
url请求(类似$.ajax)

下面是一个发送示例:

viewmodel.on('btnTestAll1', function (data) {// btnTestAll1为excel中bill_command的action值,除了点击按钮触发以外,也可以像上面提到的在`beforeSave`中触发该事件
	// 请求url地址
	var url = '/bill/testvouch'
	// 请求方式(POST/GET之类)的定义
	var proxy = cb.rest.DynamicProxy.create({
		ensure: {
			url: url,
			method: 'POST'
		}
	});

	// 请求参数,后端需要什么参数,就直接封装json数据就可以了
	var params = {
		billnum: viewmodel.getParams().billNo,   //"ca_realcolist",// viewmodel.getParams()有很多属性值
		data: "{acctype:0}"
	}

	proxy.ensure(params, function (err, result) {
		// 此处是请求之后的回调函数,可以做请求成功/失败的处理
		if (err) {
			cb.utils.alert(err.message, 'error');
			return;
		} else {
			cb.utils.alert('操作成功!','success');
			return;
		}
	});
});

后端接收参数:

  • GET请求,使用@RequestParam Map<String, String> xxx来接收(对象的话还是用POST吧)
  • POST请求,使用@RequestBody Map<String,Object> xxx来接收

后端数据返回:
成功返回:
renderJson(response,ResultMessage.data(ruleRes));
错误返回:
renderJson(response, ResultMessage.error(e.getMessage()));

前端回调函数中,通过if (err) {判断错误信息中有err字段,来提示错误信息

其它事件
  • afterEdit也可以在页面数据回显后,触发该操作,有点类似afterLoadData,但应该没有afterLoadData灵活,事件的触发也在其之后

列表画面

一些事件
afterEdit 点击编辑触发

相对于编辑页面中的afterEdit,这个页面中的beforeEdit就是在点击编辑按钮之后所触发的操作,可以对选中的行数据进行赋值操作等

viewmodel.on('beforeEdit', function (args) {
	var gridData = viewmodel.getGridModel().getData();
	var schemeid = gridData[args.params.params.index].schemeid;
	args.carry.id = schemeid;
	return true;
});
beforeBatchdelete 点击删除触发
viewmodel.on("beforeBatchdelete",function(args){
	var currentRow = viewmodel.getGridModel().getRow(args.params.params.index);
	if( currentRow.amokind === 0 ){
		// alert(currentRow.amokind);
		cb.utils.alert('适用对象为 {材料费用} 的类别不能被停用和删除','warning');
		return false;
	}
});
beforeClose 点击停用触发
gridModel

从上面两个用法,可以看出:
可以通过
var gridModel = viewmodel.getGridModel();
.getData()[index] 可以获取到某条数据(或者.getRow(index)应该也行)

索引的获取可以通过事件的参数args获取到args.params.params.index,具体其它值可以debug测试下

原文地址:https://www.cnblogs.com/dulinan/p/12030898.html