创建一个数据形状:
-
创建数据形态(datashapes),点击选项右侧”+”号或者右侧界面”新建”按钮
-
在创建页面输入名称,也可以输入说明等,如果有项目等条件,可以在下面选择性输入,然后点击字段定义.
- 在字段定义页面,点击添加按钮,右侧弹出字段输入界面
- 创建完成后显示,点击上方的保存按钮:
创建数据表:
-
在数据存储下面选择数据表选项,点击选项右侧”+”或右侧界面中的新建按钮
-
在弹出的界面中选择datatable选项,点击确定按钮
-
在创建数据表页面输入”名称”等信息,选择数据形状
-
点击保存按钮
- 如果想要在表中添加一些数据,可以点击上面的混搭选项
- 弹出数据添加页面
-
添加最上面的服务按钮,跳转到服务页面,服务(这里的服务对应的是对数据表的一些操作,通过设置输入参数,输出参数,以及一些js脚本,完成对数据表的操作)
- 点击添加按钮,弹出添加服务页面
- 设置服务信息
- 设置输入,点击添加,设置要输入的参数,
- 设置输出
- 设置片段
- 设置我/实体
- 设置js脚本
添加记录并校验的js脚本
// 创建结果集
var result="";
// 添加校验
if(id === null || id === undefined || id.length <= 0){
result = “id的大小是”+id;
//result = “主键不能为null,请填写”;
}else{
// 查询当前id是否存在
var query = {
“filters”:{
“fieldName”:“id”,
“type”:“EQ”,
“value”:id
}
};
var params = {
maxItems: 1 /* NUMBER */,
values: values /* INFOTABLE */,
query: query /* QUERY */,
source: undefined /* STRING */,
tags: undefined /* TAGS */
};
var classInfos = me.QueryDataTableEntries(params);
// 判断主键是否存在
if(classInfos.length >= 1){
result=“主键已存在!”;
}else{
// Values: INFOTABLE dataShape: “”
var values = me.CreateValues();
values.id = id;
var params2 = {
sourceType: undefined /* STRING */,
values: values /* INFOTABLE */,
location: undefined /* LOCATION */,
source: undefined /* STRING */,
tags: undefined /* TAGS */
};
try{
me.AddDataTableEntries(params2);
}catch(e){
result=“添加出现异常!”;
}
logger.info(“名称”+name+“添加成功”);
result = “名称”+ name + “添加成功”;
}}
删除记录的js脚本
var result = “”;
// Values: INFOTABLE dataShape: “”
var values = me.CreateValues();
values.id = id;
var params = {
values: values /* INFOTABLE */
};
me.DeleteDataTableEntries(params);
result = “删除成功”;
修改记录的js脚本
var result = “”;
// Values: INFOTABLE dataShape: “”
var Values = me.CreateValues();
Values.id = id;
Values.name = name;
Values.username = username;
Values.password = password;
me.UpdateDataTableEntries({
sourceType: undefined /* STRING */,
values: Values /* INFOTABLE */,
location: undefined /* LOCATION */,
source: undefined /* STRING */,
tags: undefined /* TAGS */
});
result = “修改成功”;
搜索记录的js脚本
var result = “”;
// Values: INFOTABLE dataShape: “”
var Values = me.CreateValues();
if(username === null || username === undefined || username.length <=
0){
result = “用户名不能为null”;
}else{
Values.username = username;
// Provide your filter using the format as described in the help topic
“Query Parameter for Query Services”
/*var query = {
“filters”: {
“type”: “EQ”,
“fieldName”: “username”,
“value”: username
}
};*/
// result: INFOTABLE dataShape: “”
var user = me.QueryDataTableEntries({
maxItems: undefined /* NUMBER */,
values: Values /* INFOTABLE */,
query: undefined /* QUERY */,
source: undefined /* STRING */,
tags: undefined /* TAGS */
});
// 判断结果是否为null
if(user.length <= 0){
result = “没有查询出记录”;
}else if(user.length === 1){
result = "主键是 : " + user.id + " 姓名是 : " + user.name + " 账户是 : " +
user.username + " 密码是 : " + user.password;
}
}
-
设置完成后,添加保存并继续,然后点击完成,最后点击上面的保存
创建混搭:
-
混搭主要是用来显示的页面,通过拖拽控件完成显示的布局
-
在左侧可视化界面中选择混搭选项右侧的”+”或右侧界面中的新建按钮,跳转到创建混搭的页面
- 根据自己的需要选择混搭类型和布局选项,其中布局类型响应式对应的就是布局中的组件可以从左侧组件中拖出来的方式
- 在常规信息中输入混搭的名称,根据需要选填下面几个选项,点击保存,然后点击常规信息旁边的设计按钮,跳转的布局设置页面
-
在设计页面中,首先在左侧小组件中选择面板,拖到右侧幕布中
- 面板布置完成后,在组件中搜索格栅,拖到幕布中
- 点击右侧数据模块中的”+”号,选择之前创建的数据表进行绑定,并分别选择服务
- 点击完成后,会再数据中添加之前创建的数据表
- 给表格绑定数据:
- 绑定完成之后,栅格上回显示创建datashapes的字段,另外还有几个默认的字段,可以通过左上三角形选择配置栅格列设置显示的类名数量和名字
- 添加输入框和标签,在左侧小组件中搜索框中分别输入标签和文本框
- 添加输入框
-
如果是多条输入参数,可以根据上述例子重复
-
添加按钮
-
给按钮和文本框绑定服务
-
数据表名字右侧,点击”+”号,添加服务
- 文本框绑定服务
- 绑定按钮
- 绑定点击按钮后事件(用于重新加载数据表)
- 设置消息
- 绑定消息(点击消息框右上角倒三角,选择配置绑定)
- 在弹出的页面message选择绑定源
- 选择绑定的数据源
- Showmessage绑定事件触发器
- 绑定showmessage
- 点击完成,然后点击保存
测试
-
点击最上面的查看混搭按钮,弹出之前布局的页面
-
显示的页面
