列表设计
# 一、概念
1、列表：某一功能的数据列
(1) 查询列表：菜单进来的列表
(2) 树列表：左边是树，右边是列表，点击不同的树节点，列表呈现不同的数据。树数据维护的界面称为树表单，列表数据维护界面称为树列表表单
(3) 参照列表：用于选择的列表（表单文本框选择按钮所打开的页面）,参照列表不允许有操作按钮
# 二、列表配置
菜单位置：系统管理—列表管理—列表设计
配置界面
新增：新增列表
批量删除：同时删除选中的多个列表
批量发布：同时发布选中的列表
全部发布：一键发布所有列表
导出：将选中的列表以json格式导出
导入：导入其他环境导出的列表
# 1 新增列表
- 属性：主配置界面，主要配置数据相关内容
- 列表：主要配置需要显示的列
- 查询：主要配置查询字段
- 页签：主要实现树结构下的多页签显示
- 按钮：主要配置列表的操作按钮
- 导出：主要配置需要导出EXCEL的列
- 行属性：配置列表显示样式
- Sql管理：管理js脚本中需执行的sql语句
# 1.1 属性
列表名称：列表的名称
列表分类：列的类别，该类别在数据字典中定义。如果选择了流程分类，可以指定流程
表单类型：列表下的表单所在的菜单类型
表单：列表需要绑定的表单，设置固化的增、改、查操作所打开的界面
数据连接：数据库的连接
按钮位置：按钮所在的位置（新行和查询行后面）
是否分页：设置是否分页。只要用到分页的必须加ROW_NUMBER () OVER (ORDER BY xxx) AS PagerAutoRowNumber,（分页显示的语句系统会自动带出）
起始页：列表刚加载时显示的页码
页码：设置一页显示数据行数
列样样式：设置列的样式
弹框方式：不选或默认，列表按默认大小打开；选择自定义，出现【弹框宽度】【弹框高度】，可以自定义列表打开的表单宽高
弹出框宽度：设置打开的表单宽度（百分比）
弹出框高度：设置打开的表单高度（百分比）
是否树形列表：如果勾选，会多一个树页签
保存后刷新：如果勾选，则在弹出界面保存后刷新列表。
复制分页SQL：点击即可复制，复制的内容如下
,ROW_NUMBER () OVER (ORDER BY xxxx.CreateTime DESC ) AS PagerAutoRowNumber1查询sql：数据获取的sql逻辑 。选择表单后能在sql区域自动生成sql样例。
注：当列表设计时选择表单并且查询sql为空白，查询sql时会自动生成以下语句： 其中xxxx为表单的主表
select xxxx.*,u.USER_Name, ROW_NUMBER () OVER (ORDER BY xxxx.CreateTime desc) AS PagerAutoRowNumber from xxxx left join Smart_UserInfo u on xxxx.Creater=u.SYSID
- 进入sql：菜单进入时的查询sql。进入sql和查询sql的规则是
a) 如果指定了进入sql则：菜单进入按照进入sql，查询按查询sql
b) 如果没指定进入sql则：菜单进入与查询都按查询sql
- 页面脚本：是列的onload区域，可以在这里用js/jquery设置一些方法，供后面的按钮调用
- 查询条件：用于自定义查询条件，语法JS/Jquery
# 1.2 列表
1.2.1 添加字段：添加显示列
(1) 字段：选择sql中输出的字段，即select后的字段。这里允许不选字段，以支持一些特殊列（如序号列、按钮列等）。“显示”复选框勾选去掉则只输出，不显示的情况下通常用于一些参照页面
(2) 标题字段：数据库字段所对应的标题（可忽略）
(3) 显示标题：列标题设置
(4) 显示类型：设置列数据的显示方式，比较常用的包括
直接输出：普通的输出方式，查询到什么数据就输出什么数据
序号：输出为序号列
时间日期：如果数据本身为时间日期数据，可以选择此显示类型然后设置输出的格式
数字：如果数据本身为数字数据，可以选择此显示类型然后设置输出的格式。
按钮列：如果有按钮需要放到列中，需要提供一个按钮列
复选按钮：不显示实际的数据，而是显示复选框效果
枚举：列表显示数据与数据库实际存的字段值不一致时可以用到枚举，多用于表单下拉框控件绑定的字段。选择枚举后会新增【数据来源】属性
数据字典：使用数据字典中设置的值作为下拉选项，可在菜单【系统管理==>数据字典】 中设置所需的选项值。数据字典名称作为显示值，数据字典id匹配查询的字段值
自定义：用于自定义数据字段匹配显示值。格式为【值1,显示值1;值2,显示值2;】，前面为字段值，后面为显示值，必须使用英文逗号和分号。例如，录入【1,是;0,否】：字段值为1、0，显示是、否。
SQL语句：用sql查询出自己想要的字段作为选项值，查询的第一个字段用于匹配列表字段值，第二个字段用于实际显示
-- 字段值等于sysid的值，则显示对应的name值 select sysid,name from conp_DataSource1
2
图1是利用数据自定义的格式来输入；图2是用SQL语句（两者前面字段都是数据库保存字段，后面为列表保存字段）
- 进度条：选择进度条类型时，格式是进度条上数字的格式，颜色是进度条的颜色，可以
i. 选择固定的颜色，如果选择了这个，颜色字段设为空
ii. 也可以用sql中的字段作为颜色字段(采用RGB颜色代码,具体值可见http://www.114la.com/other/rgb.htm)，如果选择了这个，固定颜色选择无效
(5) 对齐方式：列的对齐方式
(6) 列宽度：列的宽度
(7) 显示顺序：列的显示顺序
(8) 计算方式：小计和合计
(9) 是否显示：列是否在列表中显示
(10) 是否App隐藏：设置移动端该列是否显示
1.2.2 删除：删除已添加的列
1.2.3 同步到导出：一键将选择的列同步到【导出】页签
# 1.3 查询
1.3.1 添加字段
(1) 字段：选择查询时绑定的表字段
(2) 显示标题：显示查询字段的标题
(3) 控件名称：给控件赋予一个ID值，用于后续的一些JS逻辑调用
(4) 匹配类型：查询类型支持模糊查询、比较符、等于符号等查询方式
(5) 输入类型：
- 文本框：普通的输入
- 日期：日期控件
- 日期时间：日期时间控件输入
- 日期范围：只要匹配类型选择了>并且输入类型是日期范围，系统会自动添加一个“至”的查询字段，用于搜索时间范围
- 下拉选择：下拉的输入框，设置方式和【属性】页签里的枚举一致
(6) 默认值：设置列表加载时默认查询条件
(7) 显示顺序：查询控件的排序顺序
1.3.2 删除：删除选中的列
# 1.4 页签
- 列表地址：设置页签显示的列表
- 列表名称：选择列表地址后会自动回填列表名称
- 标题：页签显示名称
- 排序号：设置页签显示顺序
点击一个页签会切换一个列表
# 1.5 按钮
1.5.1 添加按钮
按钮库：选择由系统固化的按钮，如果是自定义按钮，可不选择（包含修改、删除、查看、添加、导出、打开窗口）
按钮名称：按钮的名称
执行脚本：点击按钮时执行的脚本（在按钮库中会自动带出该按钮的脚本），可调用【属性】页签里【页面脚本】中的方法
图标：按钮的图标
图标前景色：图标的颜色，
图标背景色：图标包围的颜色，推荐使用 #F5F5F5
按钮类型：设置按钮放置位置，普通按钮是放在列表头上，列表按钮是放在列表按钮列中。如果是选择系统提供的修改、删除、查看按钮，按钮类型自动为列表按钮，添加按钮默认为普通按钮
过滤条件：满足设置的条件按钮将不会显示，只能用于过滤列表按钮，条件语法与sql条件一致。例如：
-- 查询sql中name字段值中以张开头的数据不显示改按钮 name like '张%' -- sex字段值为男，且age字段值小于18的数据不显示改按钮 sex='男' and age < 181
2
3
4
5显示顺序：按钮的显示顺序
树按钮：勾选后将在树中显示
1.5.2 添加增删改查按钮
一键新增【添加】【删除】【修改】【查看】按钮
1.5.3 删除
删除已添加的按钮
1.5.4 编辑
修改已添加的按钮信息
# 1.6 导出
设置需要导出的数据
- 字段：选择导出的字段
- 列标题：设置导出列在文件中显示的标题
- 单元格格式：设置导出数据字段显示格式
# 1.7 行属性
设置列表行样式。选择字段则根据所选字段值进行显示。（注：背景色设置的是行背景色，前景色设置的是列表字体颜色）
例如：选择了背景后的颜色字段为a，则根据字段a的值设置每行对应的行背景色
# 1.8 Sql管理
与表单设计里Sql管理用法一致
# 2 树列表
树数据维护的界面称为树表单，列表数据维护界面称为树列表表单。树列表查询sql必须有treeid字段
树的应用案例如：设备管理==>档案管理==>设备档案
属性页签中勾选【是否树形列表】，此时会多一个【树】页签
表单：选择树表单，既左边树按钮操作的表单，选择项来源于配置的树表单
表名：树表单绑定的表名，选择树表单后自动·带出表名
过滤条件：过滤树内容的Sql条件，通过and拼接！比如：and a='123' ，a是字段名称
根目录标题：设置树列表根目录名称
组合条件：树列表的情况下，默认根据树节点ID去过滤列表数据，如果列表要跟树做关联查询【列表必须要有一个字段treeId跟树节点关联】，这个 treeId是通过点击树节点时获取的！ 比如：a='123' and b='23'， a、b分别表示列表sql中某个字段名称
[^表单]: 树表单必须有ParentID/OrderBy/isEnable字段。添加、修改按钮会把该值以parentid为参数名传入，只要将表单中的ParentID设为隐藏字段并获取URL参数值为默认值即可； 树列表表单必须有TreeID字段。添加、修改按钮会把该值以treeid为参数名传入，只要将表单中的TreeID设为隐藏字段并获取URL参数值为默认值即可。
# 三、常用事件
# 1 获取选中行数据
window.getlistChecked(a)，a为false单选，a为true多选
// 单选案例
function danXuan()
{
var rows=window.getlistChecked(false);
console.log("aaa ",rows);
if(rows!=false){
var row=rows[0];
var sysid=row.SYSID; // 获取SYSID字段值
}
}
// 多选案例
function duoXuan()
{
var arr=[];
var checkRows=window.getlistChecked(true);
checkRows.forEach(row => {
arr.push(row.SYSID); // 获取所有选中数据的SYSID字段值
});
if(checkRows!=false){
var sysid = arr.join("','"); // 获取以','隔开的字符串，例如： 1','2','3 用于批量操作数据（修改、删除）
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 2 刷新列表
window.reportReload.call()
# 3 确认框
// 案例
function share()
{
var target = $(event.target); // 必须有 否则确认事件无效 用于删除或修改列表数据
TentaiUI.Alert({
message: "确定要删除吗",
type: "confirm",
level: "warn",
callback:function(r){
if(r){
// 点击确认执行事件
var sql="updValid@ids="+'123456'; // 调用sql管理
RoadUI.AjaxRequest(sql,"",target);
}
}
});
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
sql管理案例
# 4 接口调用
平台在jQuery的Ajax基础上进行了封装修改，已方便平台使用。API如下：
POST请求：post_not_async（异步请求）、post（同步请求）
GET请求：get_not_async（异步请求）、get（同步请求）
// post
function aaa(){
// API/CM/ModifyTagRealValue 接口url
TentaiUI.Common.post_not_async("API/CM/ModifyTagRealValue","请求参数", function(res){
if (res.Result) {
console.log(res);
// 成功执行脚本
} else {
// 失败执行脚本
TentaiUI.Alert({
message: res.Info,
type: "alert",
level: "error"
});
}
},"","application/json");
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
JQUERY原生ajax请求，通常调用非平台接口
$.ajax( {
type : 'POST',
url : 'http://127.0.0.1:8080/ec/view/datagrid_save.action',
data : {
'view.id' : objMe.id,
'property.code' : $("#datagrid_model_type").val()
},
success : function(msg) {
console.log(msg);
}
});
2
3
4
5
6
7
8
9
10
11