【转载】原文来源： https://blog.csdn.net/github_34367377/article/details/82253763
Part 1
1.表格翻页方法的重写
me.gridView.getDataGrid().onpageindexchanged.clear();
me.gridView.getDataGrid().onpageindexchanged.addEventListener(me.controller.pageIndexChanged);
2.获取登陆人信息
@RequestMapping(value = "/getuserinfo")
public @RawResponseBody Object getuserinfo(){
Map<String, String> data = new HashMap<String, String>();
//得到用户id，登录名
String userId = ClientContextHolder.getInstance().getClientContext().getUserID();
String name = ClientContextHolder.getInstance().getClientContext().getUserName();
try {
List<User> users = AdapterFactory.getIdentityService().getUserByIds(new String[]{userId});
User user = ((User) users.get(0));
String userName = user.getName();
String userMobile = user.getMobile();
String userEmail = user.getEmail();
Department dept = AdapterFactory.getIdentityService().getDepartmentById(user.getBaseOrgId());
//可以去的部门的unicode 去o_org表中 判断org_type 02省 03地市
//在前台判断页面的展现即可
String departementName = dept.getName();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return WrappedResult.successWrapedResult(data);
}
3.uap压缩模式启动
#前端展现框架是否使用调试模式，默认为 true，生产环境下建议设置为 false
MX_DEBUGMODE=true
#前端展现框架是否使用压缩模式加载到浏览器端，默认不启用，建议生产模式启用
MX_COMPRESSMODE=false
前者设置为false，后者设置为true即可 。
4.jquary方法的使用
jquary
find 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("p").find("span").onfocus = function(){}
可以转化为document对象.
5.控制台打印信息
console.log()
6.uap错误日志
window show View others 里面的 error log 就有
D:\Users\Administrator\workspace.metadata中的.log日志
7.uap添加log日志文件
1）uap项目下修改log4j.properties配置文件，添加sql所在文件包路径节点及输出方式(文件)。
set sql log
log4j.additivity.com.sgcc.mds.lcam=false
log4j.logger.com.sgcc.mds.lcam=debug, lcam
log4j.appender.lcam=org.apache.log4j.RollingFileAppender
log4j.appender.lcam.File=${LOG_DIR}/lcam.log
log4j.appender.lcam.MaxBackupIndex=100
log4j.appender.lcam.MaxFileSize=5000000
log4j.appender.lcam.layout=org.apache.log4j.PatternLayout
log4j.appender.lcam.layout.ConversionPattern=[%d{ISO8601}][%p] %c{1}:%L) %n %m%n
2）模块项目添加如下log4j依赖：
3）Java类里添加如下标红两行：
4）Sql生成位置添加日志输出代码：
8.uap白名单配置-越过登陆直接访问
Applicationconfig.proerties
ISC_EXCLUDEPAGES=/sguap-client/workbench/workbench/login.jsp,\
/mds/portal/portal/login.jsp,\
/ImsBusiness/services,\--wsdl
/mds/smfxjpj/isc_tree/index.jsp,\--页面
/mds/portal/fromMds/index.jsp
9.uap接入统一认证
ISC_ADAPTER_URL = http://192.168.0.32:7002/isc_frontmv_serv
ISC_LOGINURL = http://192.168.0.32:7002/isc_sso/login
ISC_AUTHMODE = ISC
10.uap中wsdl实现
1）配置org.codehaus.xfire白名单 modulelist的
2）applicationconfig中wsdl路径白名单
3）config下配置xfire
4）config下配置service
http://IP地址:端口号/lcamIMS /ImsBusiness/services/MDSWebService?wsdl
5）测试新建webservice项目 导入xfire包
String urlString = "http://localhost:9000/mds/ImsBusiness/services/MDSWebService?wsdl";
Client client;
try {
client = new Client(new URL(urlString));
Object[] results= client.invoke("getKPIValue", new Object[]{xml});
// System.out.println(results[0].toString());
for(Object o : results){
System.out.println(o);
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
11.uap中生成42位uuid
12.uap过滤器–用于审计和sql注入校验
1）config下filter注册
2）过滤配置
3）过滤实现
13.uap配置文件配置常量
public static final String ISC_APPID =
PlatformConfigUtil.getString("ISC_APPID");
14.uap与chart图集成
首先导入include(/mds/gg/fusionCharts/FusionCharts.js);
1）初始化容器
me.chaichuChart = new mx.containers.Container({
height:"250px",
width:"650px",
// border:"1px solid #6EC5B9",
left: "300px",
top:"0px",
id :"chaichuChart"
});
2）初始化数据
var params = new Object();
params.items = new Array();
params.items.push({
"stratDate" : me.timeEditor3.value,
"endDate" : me.timeEditor4.value,
"orgNo" : me.controller.drop1_value,
"startAge" : me.drop5.value,
"endAge" : me.drop6.value,
"statusCode" : me.controller.drop2_value
});
// debugger
var client = new mx.rpc.RESTClient({
async : false
});
client.post(chdnbfjqk.mappath("~/rest/removeHomePage/EquipPickPie3D"),
JSON.stringify(params), function(result) {
me.JsonData = result;
});
3）放置chart
me.setChartA = function() {
me.chart1 = new FusionCharts("/mds/gg/fusionCharts/Pie3D.swf",
"chartA", "570", "230");
me.chart1.setJSONData(me.JsonData);
me.chart1.render("chaichuChart");
}
15.uap容器添加html代码
获取容器jquary对象的append方法
me.hsplit2.$panel1.append(
"<table style='width: 100%;'><tr><td align='center'>" +
"<div style='position: relative; float: left;width: 100%;padding-left: 33px; top:10px;'>" +
"<div style='position: relative; float: left; margin-left: 70px;'>单位：只</div>" +
"</div>" +
"<div id='chartContainer1' style='width: 100%; height: 100%;'></div>" +
"</td></tr></table>"
);
16.表格onload方法 设置表格数据样式
onload:me.controller._dataGrid_onload
me._dataGrid_onload = function(e){
var v_dataGrid = e.target;
v_dataGrid.$e.find("table>tbody>tr>td").css({"border":"#6ec5b9 1px solid"});
v_dataGrid.$e.find("div#body").css({"overflow-y":"auto","top":"23px"});
v_dataGrid.$bodyTable.find("#rownumber").css("backgroundColor","#E7F8F2");
if(v_dataGrid.displayStatisticRow){
var statist = v_dataGrid.$statisticRow;
//改变统计行的样式
statist.css({
position:"absolute",
bottom:v_dataGrid.pageNaviBar.height,
border:"1px solid #1B9974"
});
statist.find("tr").css({"backgroundColor":"#E7F8F2"});
statist.find("#rownumber").text("合计");
//移除统计行
statist.remove();
//将统计行重新加载到grid下面
statist.insertAfter("#grid");
//重置grid的bottom样式
v_dataGrid.$grid.css("bottom",statist.height()+v_dataGrid.pageNaviBar.height);
//统计
var items = v_dataGrid.items;
//申请报废数
var runQty = 0;
for(var i=0;i<items.length;i++){
runQty += items[i].getValue("appRetQty");
}
//设置统计值
v_dataGrid.columns["appRetQty"].setStatisticValue(runQty);
v_dataGrid.columns["appRetQty"].setStatisticAlign("center");
//已报废数
var ybfs = 0;
for(var i=0;i<items.length;i++){
ybfs += items[i].getValue("finishRetQty");
}
//设置统计值
v_dataGrid.columns["finishRetQty"].setStatisticValue(ybfs);
v_dataGrid.columns["finishRetQty"].setStatisticAlign("center");
}
17.uap导出功能
1）导出方法1
/**
* 导出Excel
*/
//导出时间
var date = new Date();
//年份
var year = date.getFullYear();
//月份
var month = date.getMonth()+1;
//第几日
var day = date.getDate();
var time = year+"-"+month+"-"+day;
//过滤条件
var v_dataGrid = me.view.getDataGrid();
//列名
var columns = "";
//列标题
var columnCaptions = "";
//列宽度
var columnWidths = "";
//文件名称
var fileName = "报废数量单位分布";
//文件标题
var fileTitle = "报废数量单位分布";
//获取列名，列标题，列宽度
for(var i=0;i<v_dataGrid.columns.length-1;i++){
if(v_dataGrid.columns[i].name == v_dataGrid.primaryKey){
continue;
}
columns += v_dataGrid.columns[i].name + ",";
columnCaptions += v_dataGrid.columns[i].caption + ",";
columnWidths += "100,";
}
columns = columns.substring(0,columns.length-1);
columnCaptions = columnCaptions.substring(0,columnCaptions.length-1);
columnWidths = columnWidths.substring(0,columnWidths.length-1);
//查询条件
var filter = new Object();
filter.orgNo = me.orgNo;
filter.mdType = me.mdType;
filter.bidBatchNo = me.bidBatchNo;
filter.arriveNo = me.arriveNo;
filter.supplierNo = me.supplierNo;
filter.tjksrq = me.tjksrq;
filter.tjjzrq = me.tjjzrq;
//选中的列名
filter.columns = me.columns;
//导出标记，使用它便于区分导出还是查询
filter.exportFlag = true;
//导出 com.sgcc.mds.lcam.lcEquipRetired.LcEquipRetiredController.exportExcel
var jsonObject = {
id : "equipInstGuidOut",//不重复的ID
className:"equipInstController",//相应的.java文件
queryMethod:"exportExcel",//查询方法 autoFilter:true,
queryMethodParamType:1,
columns:columns,
columnCaptions:columnCaptions,
columnWidths:columnWidths,
fileName:fileName,
fileTitle:fileTitle,
fileTime:time,
isMerge:"false",
statisticCols:"appRetQty,finishRetQty",
filter:filter
};
//导出控件
me.exportXSLUtil = new common$util.excel.ExportXSLUtils({
jsonObject:JSON.stringify(jsonObject)
});
me.exportXSLUtil.exportExcel();
}
Config下
后台controller
/**
* 导出表格
* @param params 查询条件
* @param p_request
* @return QueryResultObject 列表数据
*/
@RequestMapping("/exportExcel")
public @ItemResponseBody
QueryResultObject exportExcel(@QueryRequestParam("params") RequestCondition params,HttpServletRequest p_request){
return query(params);
}
2）导出方法2
me.btn_daochu_click = function(){
var itemCount = me.view._dataGrid.itemCount;
if(itemCount==0){
mx.indicate("info","无查询结果，查询后再进行操作！");
return;
}/*else if(itemCount>2000){
mx.indicate("info","数据量过大，请缩小查询范围！");
return;
}*/else{
var pathName = window.document.location.pathname;
var projectName = pathName.substring(0,pathName.substr(1).indexOf('/')+1);
var baseUrl = projectName+"/zczt/test/Zc_Servlet?" +
"wd="+wd+"&rmv_reason="+me.view.drop1.value+"&type_code="+me.view.drop2.value+"&OrgNo="+me.view.drop3.value
+"&asset_sort="+me.view.drop4.value+"&bid_batch_name="+me.view.drop5.value+"&arrive_no="+me.view.drop6.value+"&biaozhiwei="+"chqk"+
"&supplier_no="+me.view.drop7.value+"&stat_ymQS="+me.view.timeEditor8.value+"&stat_ymJZ="+me.view.timeEditor9.value;
// window.location.href = baseUrl;
var httpurl=sheiBeizk.mappath(baseUrl);
window.open(httpurl,
"显示窗口","height=1px, width=1px, top=10000px, left=100px, toolbar=no, menubar=no, scrollbars=yes, resizable=no, location=no, status=no");
}
};
18.uap下载功能
Uap项目下webcontent下建文件夹放下载内容 servlet实现
19.tab中text自适应属性
“max-width” : “100%”
Part 2
一.uap初级使用
1. 布局控件
创建一个布局控件主要包括以下步骤：
1）导入所需的js类。
2）创建实例。
3）将实例添加到容器中。
1.1 上下分割窗口布局
//1.导入类代码
$import("mx.containers.HSplit");
//2. 创建实例
me.hsplit = new mx.containers.HSplit({
rows: “300, auto“ ,//窗口的两部分大小
borderThick:”0px”//设置边框粗细
});
//3.将实例添加到容器中
me.addControl(me.hsplit);
1.2 左右分割窗口布局
//1.导入类代码
$import("mx.containers.VSplit");
//2. 创建实例
me.vsplit = new mx.containers.VSplit({
cols: “300, auto“ //窗口的两部分大小
});
//3.将实例添加到容器中
me.addControl(me.vsplit);
**vsplit整体左边距设置，和左边框线的设置
me.vSplit2 = new mx.containers.VSplit({
cols:"12%,88%",
width:"50%",
top:"0%",
position:"absolute",
borderThick:2
});
vsplit整体左边距设置，和左边框线的设置
me.vSplit2.setLeft("50%");
me.vSplit2.$panel1[0].style.borderLeftWidth = "1px";
1.3 手风琴式菜单
//1.导入类代码
$import("mx.containers.Accordion");
//2. 创建菜单实例
me.accordion = new mx.containers.Accordion(
{
"height":"60%",
"width":"20%",
panels:[
{ title: "综合评价", name: "zhpj" },
{ title: "参建队伍", name: "cjdw" }
],
onselectionchanged:me.controller.accordionChanged
}
);
//3.将实例添加到容器中
me.addControl(me.accordion);
me.addControl.appendPanel({name:"panel3", title:"面板3"});
var text = new mx.editors.TextEditor({ value: "bruce" });
me.addControl.panels[0].addControl(text);
1.4 Tab页
//创建tablePage加入tabCotrol
//自己生成新的页面加入显示
$import("mx.containers.TabControl");//记得导包
me.tab = new mx.containers.TabControl({
pages:[
{ text: "常规", name: "general" },
{ text: "角色", name: "role" }
],
onselectionchanging: me.controller._selection_changing,
onselectionchanged: me.controller._selection_changed
});
if(me.pageTwo == null){ //如果第二个page不存在
//创建第二个tablePage加入tableCotrol
me.pageTwo=me.view.tabControl.appendPage(text,text);//,true;
initTableTwo();
me.pageTwo.init();//非第一个页面记得要先初始化一下
me.pageTwo.addControl(me.hSplit);
//显示第二个
me.view.tabControl.selectPage(1);
1.5 lable
Label5.$e[0].style.cursor="pointer";
//定义点击事件：
Label5.$e.on("mouseenter",me._onmousemove);
//@.或onclick:
me.controller.detailOnclick
autoWrap :true, //表示标签文本是否自动换行
1.6 panel
//去除panel2右侧的视图
me.view.vsplit2.removeControl(me.view.vsplit2.controls[4]);
me.view.vsplit2.addControl( me.getSingleIdx(),1);
2. 创建一个表格
创建一个表格主要也包括以下步骤：
1）导入创建表格所需的js类。
2）定义与表格交互数据的服务器url。
3）创建表格数据容器。
4）创建表格实例
5）调用表格load方法。
6）将表格添加到容器中。
//1.导入类代码
$import("mx.datacontainers.GridEntityContainer");
$import("mx.datacontrols.DataGrid");
//2.定义服务端url
var restUrl = "~/mxdemo/rest/uapsb/";
//3. 创建表格数据容器
/* 初始化表单数据容器EntityContainer */
me.gridEntityContainer=new mx.datacontainers.GridEntityContainer({
baseUrl : restUrl,
iscID : "-1", // iscID 是数据元素的统一权限功能编码。默认值为 "-1" ，表示不应用权限设置
loadMeta :false //不会更新数据库验证字段
primaryKey: "objId"
});
//4. 创建表格实例
me.dataGrid = new mx.datacontrols.DataGrid({
columns:[
{name: "objId", caption: "主键" , editorType: "TextEditor"},
{name: "mc", caption: "设备名称 " , editorType: "TextEditor"},
{name: "sbxh", caption: " 设备型号" , editorType: "TextEditor"},
{name: "bdz", caption: "变电站 " , editorType: "TextEditor"},
{name: "jgdy", caption: "间隔单元" , editorType: "TextEditor"},
{name: "azrq", caption: "安装日期" , editorType: "TextEditor"},
{name: "sblx", caption: "设备类型" , editorType: "DropDownEditor"},
{name: "sfzy", caption: "是否在用" , editorType: "DropDownEditor"},
{name: "ssbm", caption: "所属部门" , editorType: "DropDownEditor"},
{name: "sfwx", caption: " 是否已维修" , editorType: "DropDownEditor"},
{name: "sysm", caption: "使用说明" , editorType: "TextEditor"}
],
displayCheckBox: true,
displayPrimaryKey:false,//列表是否显示主键
allowEditing: true, //列表默认不可编辑
entityContainer: me.gridEntityContainer({
type : "local",
primaryKey : "objId",
onload : me.controller._datagridEntityContainer_onload // 列表容器加载数据
}),
onpageindexchanged : me.controller._datagrid_onpageindexchanged//分页
onitemclick ：me.controller._dataGrid_onClick //定义 表格点击事件
});
//5.调用表格load方法
me.dataGrid.load();
//6.将表格添加到页面上
me.addControl(me.dataGrid);
controller：
// 列表容器加载数据（不常用）
me._datagridEntityContainer_onload = function(e) {
if(me.view.danwei.value!=me.orgcode){
e.target.dicts = me.organdict1;//数据字典
e.itemCount = me.itemCountCx;
e.items = me.dataCx;
}else{
e.target.dicts = me.organdict;//数据字典
e.itemCount = me.itemCountCx;
e.items = me.dataCx;
}
}
// 分页
me._datagrid_onpageindexchanged = function(e) {
Query(me.filtercx, e.target.pageIndex, e.target.pageSize,true);
}
2.1 ToorBar
mx.controls.ToolBar
var toolBar = new mx.controls.ToolBar(
{
items :
[
{
name : "menuGroup",//菜单项的唯一标识
toolTip : "菜单分组",
imageKey : "new",
text : "菜单分组",
items :
[
{
name : "childMenu1",
toolTip : "子菜单1",
imageKey : "new",
text : "子菜单1"
},
{
name : "childMenu2",
toolTip : "子菜单2",
imageKey : "new",
text : "子菜单2"
}]
},
"-",//横线表示显示分隔线
{
name : "menu1",
toolTip : "主菜单1",
imageKey : "new",
text : "主菜单1"
},
{
name : "menu2",
toolTip : "主菜单2",
imageKey : "new",
text : "主菜单2"
}]
});
例：
var toolBar = new mx.controls.ToolBar(
{
items :
[{ name : "menuGroup",//菜单项的唯一标识
toolTip : "保存",
imageKey : "save",
text : "保存"
}]
});
//将toolBar置为空白 setDisplay or setVisible
me.proView.getDataGrid().toolBar.setDisplay("none");
//将toolBar高度设为空
me. proView.getDataGrid().toolBar.resizeTo("100%", "0%");
//调整高度
me. proView.getDataGrid().$grid.animate({top : 1},"fast"); （26为:距上边框距离）
/** 增添：*/
_dataGrid.toolBar.insertItem(2,"-",true); //分割线
_dataGrid.toolBar.insertItem(3,{ name: "edit", text: mx.msg("EDIT"), toolTip: mx.msg("EDIT"), imageKey : "edit", onclick: me.controller._btnEdit_onclick}, true); //添加编辑按钮
_dataGrid.toolBar.insertItem(4,{ name: "fqlc", text: "发起流程", toolTip:"发起流程", imageKey : "edit", onclick: me.controller._btnFqlc_onclick}, true);
/** 删除：*/
_dataGrid.toolBar.removeByIndex(1);
_dataGrid.toolBar.removeByName("save");
Editor类型：获取或设置编辑器的类型
1）CheckEditor
2）TextEditor 文本框（默认值）
3）DateTimeEditor DATETIME 日期时间。例如：2007-07-01 14:28:32
4）DropDownEditor 下拉框
5）LinkEditor
6）NumberEditor 数字编辑器
7）TimeEditor TIME 时间。例如：14:28:32
2.2 隐藏searchBox
//将searchBox置为空白 setDisplay or setVisible
me.projunitDetailView.getDataGrid().searchBox.setDisplay("none");
//将searchBox高度设为空
me.projunitDetailView.getDataGrid().searchBox.resizeTo("100%", "0%");
//调整高度
me.projunitDetailView.getDataGrid().$grid.animate({top : 26},"fast"); （26为:距上边框距离，消除toolBar时，方法类似，此值可设为1 ）
2.3 单元格浮动提示框
//表格加载完事件
me._dataGrid_onLoad = function(p_item, $p_cell)
{
//鼠标移动时的提示框
me.qxmsDiv = $("<div style='padding:2px;background-color:#ffffff;border:1px solid;position:absolute'></div>");
me.view.append(me.qxmsDiv);
//绑定鼠标经过移出事件
me.view.getDataGrid().$bodyTable.find('#biaoti').on("mouseover",me._jymsonmouseover);
me.view.getDataGrid().$bodyTable.find('#biaoti').on("mouseout",me._jymsonmouseout);
}
//鼠标经过事件
me._jymsonmouseover = function(e){
if(e.target.innerText!=null&&e.target.innerText.length>0){
me.qxmsDiv[0].style.display = "";
me.qxmsDiv[0].innerText = e.target.innerText;
me.qxmsDiv[0].style.left=e.clientX+"px";
me.qxmsDiv[0].style.top=e.clientY+"px";
}else{
me.qxmsDiv[0].style.display = "none";
}
}
//鼠标移出
me._jymsonmouseout = function(e){
me.qxmsDiv[0].style.display = "none";
}
//(1)得到DataGrid选择行的第二列的值
var proid = me.view.getDataGrid().selection.getValue(1);
//(2)点击DataGrid行事件
function(e)
var proid = e.item.getValue(1);
2.4 表格渲染，超链接
renderCell(p_item, $p_cell) 方法：
将p_item 中该列的值渲染到 $p_cell 指定的单元格中。可通过重写该方法实现自定义渲染的效果，例：
columns:[
{name: "objId", caption: "员工OBJ_ID" , editorType: "TextEditor"},
{name: "ssbm", caption: "所属部门", editorType: "DropDownEditor"},
{name: "xm", caption: "姓名" , editorType: "TextEditor"
//有个问题：点击上面的张三，传的是下面的李四//解决：将全局改为局部，然后在方法中传参
,renderCell:function(p_item, $p_cell){
var value = p_item.getValue("xm");// 获取xm字段的显示值。
var itemId = p_item.id; //获取行item的标示值
if (value != null){
// 根据 value 的值，决定 $p_cell 中的 HTML 内容。
$p_cell.text(value);
$p_cell[0].style.color="blue";
$p_cell[0].style.textDecoration="underline";
$p_cell[0].style.cursor="hand";
$p_cell[0].onclick=function(){
me.controller._item_onclick(itemId);
}
}else{
// 如果该值为空，则清空单元格的内容。
$p_cell.empty();
}
}
}
]
例：
{ name: "goodsPrice", caption: "价格" , editorType: "TextEditor",
renderCell:function(p_item,$p_cell)
{
var price = p_item.getValue("goodsPrice"); // 获取 goodsPrice 字段的值。
var id = p_item.getValue("goodsId");
me.itemId = p_item.id;//获取行item的标示值
if (price != null)
{
// 根据 value 的值，决定 $p_cell 中的 HTML 内容。
$p_cell.text(price);
$p_cell.css({"backgroundColor":"#9FC",color:"blue","cursor":"hand","textDecoration":"underline"});
$p_cell[0].onclick=function(){
me.controller._item_onclick(id,price);
};
}
else
{
// 如果该值为空，则清空单元格的内容。
$p_cell.empty();
}
}
}
// me.controller._item_onclick
me._item_onclick=function(id,price){
var id1=id;
var options = {title:"价格",reusable: true, width:"400", height:"50%",
displayMaxButton:true,resizable:false
};
me.win= new mx.windows.WindowManager().create(options);
me.win.showDialog();
me.labelmc = new mx.controls.Label({
text : "价格：",
textAlign : "center",
verticalAlign : "middle",
top : "60px",
left : "10px"
});
var toolBar = new mx.controls.ToolBar({});
var numberEditor = new mx.editors.NumberEditor({
value:price,
top : "60px"
});
numberEditor.init();
me.win.addControl(toolBar);
me.win.addControl(me.labelmc);
me.win.addControl(numberEditor);
me.win.showDialog(function(){
me.view.getDataGrid().load();
});
/////
var btnSave = toolBar.appendItem("save", mx.msg("SAVE"));
btnSave.alias = "goodsDetailViewBtnSave";
btnSave.setImageKey("save");
btnSave.on("click",function(){
var text=numberEditor.getValue();
var _dView = me._getDetailFromView();
var datailForm =_dView.getForm();
datailForm.load(id1,function(){
datailForm.entityContainer.setValue("goodsId",id1);
datailForm.entityContainer.setValue("goodsPrice",text);
datailForm.entityContainer.save();
me.win.close();
// me.view.getDataGrid()._columns[2]=numberEditor.getValue();
mx.indicate("info","保存成功");
});
});
2.5 表格选中事件
//表格选中事件
me.itemChecked = function(e){
var items = me.view._dataGrid.getCheckedItems();
if(items.length > 1){ //只能选择一行，
items.removeAt(0);
me.view._dataGrid.uncheckAll();
}
e.item.setChecked(true);
me.bar_code = e.item.values.bar_code;
// me.ARRIVE_BATCH_NO = e.item.values.ARRIVE_BATCH_NO;
}
3. 创建一个表单
创建一个表单主要包括以下步骤：
- 导入创建表单所需的js类。
- 定义与表单交互数据的服务器url。
- 创建表单数据容器。
- 创建表单实例。
- 切记表单要load才能显示。
- 将表单添加到容器中。
//1.导入类代码
$import("mx.datacontrols.DataForm");
$import("mx.datacontainers.FormEntityContainer");
//2.定义服务端url
var restUrl = "~/mxdemo/rest/uapsb/";
//3.创建表单数据容器
/* 初始化表单数据容器EntityContainer */
me.formEntityContainer = new mx.datacontainers.FormEntityContainer({
baseUrl : （weblet的ID值）.mappath(restUrl),
primaryKey: "objId" });
//4. 创建表单实例
me.form = new mx.datacontrols.DataForm({
fields: [
{name: "objId", caption: "主键", editorType: "TextEditor", visible:false},
{name: "mc", caption: "设备名称 ", editorType: "TextEditor"},
{name: "sbxh", caption: "设备型号", editorType: "TextEditor"},
{name: "bdz", caption: "变电站 ", editorType: "TextEditor"},
{name: "jgdy", caption: "间隔单元", editorType: "NumberEditor","width":"145px"},
{name: "azrq", caption: "安装日期", editorType: "DateTimeEditor","width":"145px"},
{name: "sblx", caption: "设备类型", editorType: "DropDownEditor","width":"145px"},
{name: "sfzy", caption: "是否在用", editorType: "DropDownEditor","width":"145px"},
{name: "ssbm", caption: "所属部门", editorType: "DropDownEditor","width":"145px"},
{name: "sysm", caption: "使用说明", editorType: "TextEditor"}
],
entityContainer: me.formEntityContainer
});
// 5.表单要load才能显示
me.form.load();
//6.将表单添加到页面上
me.addControl(me.form);
3.1 表单弹窗视图
- 列表显示数据。
- 列表新增数据，以表单形式新增。
- 列表编辑数据, 以表单显示数据。
新增数据:
// 新增按钮点击事件
me._btnNew_onclick = function()
{
//通过视图控制器获取视图对象
var mvc = new form.views.FormDetailViewController();
var _detailView = new mvc.getView();
_detailView.objID = null;
//将视图对象展现出来
me._showView(_detailView);
};
me._showView = function(p_view)
{
//TODO: 表单视图保存后事件处理。
p_view.formEntityContainer.on("saved", function(e){
mx.indicate("info","保存成功");
me.view.dataGrid.load();
me.view.hsplit.removeControl(p_view);
});
//加载详细信息页面对象。
p_view.load();
if(me.view.hsplit.controls.length<3){
//将表单视图对象添加到hsplit中
me.view.hsplit.addControl(p_view,1);
}
}
3.2 表单皮肤
定制一个表单皮肤主要包括以下步骤：
- 导入创建表单皮肤所需的js类。
- 定义与表单交互数据的服务器url。
- 创建表单数据容器。
- 创建表单实例,注册皮肤所在目录url。
- 切记表单要load才能显示。
- 将表单添加到容器中。
//1.导入类代码
$import("mx.datacontainers.FormEntityContainer");
$import("mx.datacontrols.SkinDataForm");
//2.定义服务端url
var restUrl = "~/mxdemo/rest/uapsb/";
//3.创建表单数据容器
/* 初始化表单数据容器EntityContainer */
me.formEntityContainer = new mx.datacontainers.FormEntityContainer({
baseUrl : （weblet的ID值）.mappath(restUrl),
primaryKey: "objId" });
//4. 创建表单皮肤实例
me.skinForm=new mx.datacontrols.SkinDataForm({
skinUrl:“~/mxdemo/form/resources/skins/form.html”, //参见项目文件
entityContainer: me.formEntityContainer
});
// 5.表单要load才能显示
me. skinForm.load();
//6.将表单添加到页面上
me.addControl(me. skinForm);
3.3 在表单中 文件上传
JavaScript 代码
var dataForm = new mx.datacontrols.DataForm( {
fields: [ {
name: "deptId",
caption: "DEPT_ID",
editorType: "TextEditor",
visible: false
}, {
name: "deptName",
caption: "DEPT_NAME",
editorType: "FileEditor",//类型为文件编辑器
type: "form",//类型声明为 form
uploadMode: "file",//保存方式为file，文件会保存到服务器指定磁盘路径；为blob会保存到数据库的BLOB类型字段中。
tableName: "DEPT",//数据对应的表名，必须是数据库中的物理表名
primaryKey: "DEPT_ID",//数据表的主键字段名
colName: "DEPT_NAME"//当前字段在数据库中的物理名称
} ],
entityContainer: me.formEntityContainer
});
(1)回调函数
me._btnNew_onclick = function()
{
var _detailView = me._getDetailFromView();
//获得电站所属网省proid(tree显示值)
var proid = me.controller.getTreeText();
//此处调用的是_detailView中的load方法，见下
_detailView.load(function(){
//给proid这行赋值
_detailView.getForm().editors["proid"].setValue(proid,true);
//设置proid这行只读
_detailView.getForm().getEditor("proid").setReadOnly(true);
//设置proid这行不可见
_detailView.getForm().getEditor("proid ").setVisible(false);
});
//设置对象id
_detailView.objID = null;
_showDetailFormView(_detailView,"表单填写");
};
//_detailView中的load方法(需要加入参数)
me.load = function(callback)
{
debugger;
//_form.editors["proid"].setValue(e);
//加载表单信息
_form.load(me.objID,function(){
if(callback && callback instanceof Function){
callback();
}
});
}
3.4 加载 表单 赋值/ 赋 时间值
//MainView.js
//员工 视图
me.empMvc = new emp.views.MainViewController();
me.empView = me.empMvc.getView();
//MainViewController.js
//树 节点 改变
me._tree_selectionchanged = function(e)
{
me.id = e.selection.id;
//员工 详细页面 me.ssbm 变量赋值
me.empDetailView = new me.view.depMvc._getDetailFromView;
me.empDetailView.ssbm = depId;
}
//DetailView.js
me.load = function()
{
//加载表单信息
_form.load(me.objID,
function ()
{
//时间 赋值
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var time = year+"-"+month+"-"+day;
_form.editors.skmc.setValue(me.skmc);
_form.editors.ksrq.setValue(time);
_form.editors.jsrq.setValue(time);
//不可修改
_form.editors.skmc.setReadOnly(true);
_form.entityContainer.setValue("skmc",me.skmc);
_form.entityContainer.setValue("ksrq",time);
_form.entityContainer.setValue("jsrq",time);
}
);
}
3.5 表单打印
var printCon = new mx.utils.PrintUtil({
dataControl : me.view.getForm(),
maxCols : 2,
printHideFields : true
});
printCon.printControl();
3.6 表单验证
var numberEditor = new mx.editors.NumberEditor({
min: 10,
increment: 1,
onchanged: _numberEditor_changed
});
_form = new mx.datacontrols.DataForm({
width: 500,
fields:
[ { name: "bdzbh", caption: "变电站编号", readOnly: true , nullable: false} ],
onvalidate : form_validate,
entityContainer: formEntityContainer // 绑定表单数据容器
});
function form_validate()
{
alert("validate:" + mx.utils.CheckUtil.isEmail(_form.editors["bdzbh"].value));
}
{name: "note", caption: "备注" , editorType: "NumberEditor", formatString:"0.00",
customValidate:function(p_editor){
var check = new mx.utils.CheckUtilClass();
var result = check. isDigit (p_editor.value);
return { successful: result, hint:"验证失败！" }
}
},
{name: "email", caption: "邮箱", editorType: "TextEditor", validType:"EMAIL",validateMessage :"请输入有效邮箱"},
{name: "phone", caption: "手机", editorType: "TextEditor", validType:"MOBILE",lineBreak:false},
{name: "identitycardId", caption: "身份证号", editorType: "TextEditor",validType:"IDCARD",onchanged:birth}//自定义方法
//身份证 号码 改变事件
function birth(e)
{
var idcard = e.target.value;
var year = idcard.substring(6,10);
var mouth = idcard.substring(10,12);
var day = idcard.substring(12,14);
var birthday = year+"-"+mouth+"-"+day;
_form.editors.birthday.setValue(birthday);
_form.entityContainer.setValue("birthday",birthday);
}
3.7 表单样式设置
<DIV class=container style="MARGIN-LEFT: 15px; MARGIN-RIGHT: 5px">
<LABEL title=图例位置: style="WIDTH: 120px">图例位置:</LABEL>\r\n
<DIV class=editor style="MARGIN-LEFT: 120px">\r\n
<div class=comboEditor style="HEIGHT: 21px; WIDTH: 100%" >\r\n
<DIV id="inputContainer"><INPUT type="text" value="图形上方" ></DIV>
//加载表单信息,
_form.load(me.objID,function(){
//设置 行 高度
_form.$e.find("td").css({
"padding-top":"12px",
"text-align":"left"
});
//右边距
_form.$e.find("td>div").css({
"margin-right":"20px"
});
//上边距
_form.$e.find("td:eq(1)").css({
"padding-top":"30px",
});
//文字标题
_form.$e.find("label").css({
"width":"105px",
"text-align":"right"
});
//输入框
_form.$e.find(".editor").css({
"width":"130px",
"margin-left": "110px"
});
me.form.$e.find(".editor input").css({
"border":"1px solid lightgray"
});
});
//dataForm整体左边距
_form.setCss({"marginLeft":"10px"});
3.8 修改表单样式
function _setFormStyle(form) {
form.$e.find("table").find("#jsgs")[0].style.paddingTop="29px";
form.$e.find("table").find("#jsgs")[0].style.paddingBottom="29px";
// var flag = 0;
// for ( var i = 0; i < form.$e.find("table").find("tr").length; i++) {
// // Label右对齐
// form.$e.find("label").css("text-align", "right");
// // 隔行变色
// if (i % 2 == 0) {
// form.$e.find("table").find("tr")[i].style.backgroundColor = "#E4F2F6";
// }
//// flag = flag
//// + form.$e.find("table").find("tr")[i]
//// .getElementsByTagName("label").length;
// }
}
//////////////////////////////////////////
var perwidth = document.body.clientHeight*0.08;
{ name: "wscgbm", caption: "网省采购申请编号",editorType: "TextEditor",height:perwidth,textMode : "multiline",readOnly: true},
{ name: "zbms", caption: "指标描述", editorType: "TextEditor",textMode : "multiline",colSpan:3,width : "80%",readOnly:true},
{ name: "jsgs", caption: "计算公式", editorType: "TextEditor", textMode : "multiline",colSpan:3,width : "80%",readOnly:true},
//textMode:文本框类型 normal（默认）,password,multiline(多重线)
//colSpan: 获取和设置字段列跨度属性(默认1),即长度，
//textMode : "multiline",colSpan:3表示上下占三行
height:perwidth,textMode : "multiline",lineBreak:false (上下占两行,并能换行，)
var labels = me.form.$e.find("label");
var length = labels.length;
for(var i=0; i<length; i++)
{
var labelName = labels[i].innerText;
var labelName2 = labelName.substring(0,labelName.length-1);
labels[i].innerText = labelName2;
}
4 创建树
创建一棵树主要包括以下步骤：
- 导入所需的js类。
- 定义与树交互数据的服务器url。
- 调用树的load方法。
- 将树实例添加到容器中。
//1.导入类代码
$import("mx.datacontainers.TreeEntityContainer");
$import("mx.datacontrols.DataTree");
//2.定义服务端url
var restUrl = "~/mxdemo/rest/uapbm/tree”;//路径为树场景 生成的java 后台方法
//3. 创建树实例
me.treeView = new mx.datacontrols.DataTree({
baseUrl: restUrl,
displayCheckBox: true, // 是否需要在树中显示选中框
onselectionchanged: me.controller._tree_selectionchanged
});
//4. 调用树的load方法
me.treeView.load();
//5.将树实例添加到页面上
me.addControl(me.treeView);
/******** 树节点选中事件 **********/
me._tree_selectionchanged = function(e)
{
if(e.selection.hasChildren){ //如果选中节点有子节点,则展节点
e.selection.expand(); //展开该节点
}
switch(e.selection.itemType) //根据返回的itemType，设置不同的业务逻辑
{
case “uapbm”: //选中节点为部门节点,则初始化部门表
_initDepartView(e.selection.id);
break;
case “uapsb”: //选中节点为设备节点,则初始化设备视图
_initDeviceView(e.selection.id);
break;
}
};
4.0 在别的场景里调用树场景
/////// 示例1
me._depTree=new mx.datacontrols.DataTree({
baseUrl:main.mappath("~/rest/depttree/tree"),//生成树场景路径
displayCheckBox: false,// 是否需要在树中显示选中框
onselectionchanged: me.controller._tree_selectionchanged
//在mainviewcontroller中添加方法
});
me._depTree.load(); //**
me.vSplit.addControl(me._depTree,0);
/////// 示例2
idxTreeView = new zhibiaoxz.views.TreeViewController().getView();
idxTreeView.getTreeView().displayCheckBox = true;
4.1 实现树节点示例定位
实现树节点示例定位主要包括以下步骤：
- 创建一颗树。
- 前端发送输入请求数据到服务器端。
- 服务器端接收数据并处理、返回。
- 前端接收并处理
前端发送请求数据到服务器端:
me._btnLocate_click=function(){
//获取输入值
var nodeValue=me.view.textEditor.value;
//创建ESTClient实例,用于发送请求
var restClient=new mx.rpc.RESTClient();
restClient.get(
“~/mxdemo/rest/uapbm/tree/check”, //请求url
{ nodeName: nodeValue}, // 将 appSuite 先转换为 JSON 字符串，然后作为 POST 参数 传递到服务端
function(p_context) // 回调函数,p_context为返回数据
{
if(p_context!=null){
for(var i=0;i<p_context.length;i++){
var node = me.view.treeView.findNode(“#”+p_context[i]); //查找节点
node.expand(); //展开节点
me.view.treeView.selectNode(node, false); //选中节点
}
}else{
alert("REST 服务调用失败。");
}
} // End of callback function
); // End of client.post
}
服务端Controller层接收并处理前端请求 :
@RequestMapping(value="/tree/check",method=RequestMethod.GET)
@RawResponseBody
public Object findNode(@RequestParam("nodeName") String nodeName){
List idList = treeBizc.findNodeId(nodeName);
if(idList.size()!=0){
return idList;
}
else{
return null;
}
}
服务端Biz层访问数据库:
public List findNodeId(String nodeName){
String sql="select obj_id from uap_bm where bmmc like '%"+nodeName+"%'";
List idList = hibernateDao.executeSqlQuery(sql);
return idList;
}
mx.utils.CheckUtilClass提供一个检查字符串格式的工具类。该类在运行时唯一静态实例是 mx.utils.CheckUtil 对象。
$import("mx.utils.CheckUtilClass");
check=new mx.utils.CheckUtilClass();
alert(check.isEmail(a));
alert(check.isDigit(a));
if(check.isDigit(a)==true){
me.view.form.save();
}else{
alert("注册资金必须是数字");
me.view.form.getEditor("regMoney").focus();
}
4.2 树节点刷新
me.view._depTree.getNode(selId).refresh();
// me.view._depTree.getNode(selId).expand();
// me.view._depTree.selection.parent.refresh();
// me.view._depTree.selection.parent.expand();
// me.view._depTree.selection.refresh();
// me.view._depTree.selection.select();
me.view._depTree.selection.refresh();
me.view._depTree.selection.select()
5. 各种动态效果的方法
5.1 树表联动 tab页切换
//定义全局变量
var selId = null; //方法外定义变量 或 方法内定义 me.selId
me._tree_selectionchanged = function(e)
{
//节点 id
selId = e.selection.id;
//树节点 员工
if(e.selection.itemType == "emp")
{
var empId = e.selection.id;
me.view.tabControl.pages[1].hide();
me.view.tabControl.pages[0].show();
me.view.tabControl.selectPage(me.view.tabControl.pages[0],true);
//员工 详细信息 显示
me.view.tabControl.pages[0].removeControl(me.view.depDetailView);
me.view.tabControl.pages[0].addControl(me.view.empDetailView);
//加载 员工详细信息
me.view.empDetailView.objID = empId;
me.view.empDetailView.load();
}
//树节点 部门
if(e.selection.itemType == "dept")
{
me.view.tabControl.pages[0].show();
me.view.tabControl.pages[1].show();
var depId = e.selection.id;
var text = e.selection.text;
//部门视图 上级部门 变量
me.view.depDetailView.ssbm = depId;
var tabControl = me.view.tabControl.selection;
if(tabControl.name == "emp")
{
//员工列表 显示
me.view.tabControl.pages[1].addControl(me.view.empView);
me.view.empView.getDataGrid().setFilter({ssbm:depId});
me.view.empView.getDataGrid().load();
}
else
{
me.view.tabControl.pages[0].removeControl(me.view.empDetailView);
me.view.tabControl.pages[0].addControl(me.view.depDetailView);
//加载 部门详细信息
me.view.depDetailView.objID = depId;
me.view.depDetailView.load();
}
}
}
5.2 Toolbar方法
5.2.1 重置新建方法 新建插入行
//重新定义新建事件
me.empGrid.toolBar.items["#new"].off("click", me.controller._btnNew_onclick);
me.empGrid.toolBar.items["#new"].on("click", me.controller._btnNew1_onclick);
//去除新建按钮
me.empView.getDataGrid().toolBar.removeByIndex(0);
me.empView.getDataGrid().toolBar.removeByName("new");
//插入新建按钮
me.empView.getDataGrid().toolBar.insertItem(0,"-",true);
me.empView.getDataGrid().toolBar.insertItem(0,{
name: "new",
text: mx.msg("NEW"),
toolTip: mx.msg("NEW"),
imageKey : "new",
onclick: me.controller._empView_onclick},true);
//新建 插入行
me._empView_onclick = function()
{
//selId 树节点Id
var _ssbm = selId;
//插入行 所属部门 赋值
me.view.empView.getDataGrid().appendItem({
"ssbm" : _ssbm
});
}
5.2.2添加导出按键
me.empView.getDataGrid().onload.addEventListener(me.controller._empView_onload);
me.empDetView.getForm().entityContainer.onsaved.addEventListener(me.controller._empDetView_saved);
_dataGrid.searchBox.searchButton.onclick.clear();
_dataGrid.searchBox.searchButton.onclick.addEventListener(me.controller.searchButtom_onClick);
//添加导出按键
me.empView.getDataGrid().toolBar.insertItem(10, "-", true);
me.empView.getDataGrid().toolBar.insertItem(11,{
name : "exportExcel",
text : "导出",
toolTip : "导出",
//imageKey : "export",
imageUrl :"~/main/resources/images/excel.gif",//图片
onclick : me.controller. _idxinfoView_exportExcel
}, true);
//导出表格
me._idxinfoView_exportExcel = function()
{
me.view.idxinfoView.getDataGrid().exportExcel({
tableName:" mw_app.mwt_yyjc_idx_tab",
columnNames:"IDX_NODE_CODE,IDX_NODE_NAME,DUTY_DEPT_NAME,IDX_FREQ,CALC_FORMU",
columnCaptions:"指标编码,指标名称,责任部门名称,指标频度,计算公式",
filter:"grp_id = '"+me.selId+"'",
fileName:"指标信息"
});
}
//查询 多表导出 字段前不能 用表 别名
me._btnEdit_exportExcel = function()
{
me.view.empView.getDataGrid().exportExcel({
tableName:"emp,dept",
columnNames:" emp.obj_id, emp.mc, emp.sex, emp.ssbm,d.mc, emp.createtime",
columnCaptions:"编号,姓名,性别,所属部门,时间",
filter:" emp.ssbm='"+selId+"' and emp.ssbm = dept.obj_id",
fileName:"部门员工"
});
}
例子：
me._exportExcel = function()
{
me.view.getDataGrid().exportExcel({
tableName:" exam_power_consumption,exam_company",
columnNames:"exam_company.company_name,power_Month,power_Value",
columnCaptions:"公司名称,月份,电量",
filter:"exam_power_consumption.power_company_id=exam_company.company_id",
fileName:"用电量"});
}
5.2.3 添加按键
var btnSend = _toolBar.appendItem("cancel", "中止");
btnSend.setImageKey("moveDown");
//btnSend.setImageUrl(mx.mappath("~/todo/resources/images/draw.png"));
btnSend.on("click", btnClick);
_toolBar.appendSeparator();
5.3 自定义 查询
//引入包
$import("mx.rpc.RESTClient");
me._btnSearch_onclick = function()
{
var nodeValue = me.view.textEditor1.value;
var nodeValue2 = me.view.dropDownEditor.value;
if(nodeValue2 == null)
{
nodeValue2 = "";
}
//封装 变量
var params=new Object();
params.items=new Array();
params.items.push({"mc":nodeValue},{"ssbm":nodeValue2});
//创建ESTClient实例,用于发送请求
var restClient = new mx.rpc.RESTClient();
restClient.post(
main.mappath("~/rest/emp/search"),//main 为当前视图ID
JSON.stringify(params),
function(p_context) //回调函数，p_context为返回数据
{
if(p_context.successful)
{
var items=p_context.resultValue.items;
//返回数据 为普通集合 需要 重新组装 赋给表格
// var data=[];
// for(i=0;i<items.length;i++)
// {
// var obj=new Object();
// obj.objId=items[i][0];
// obj.mc=items[i][1];
// obj.sex=items[i][2];
// obj.ssbm=items[i][3];
// obj.createtime=items[i][4];;
// data.push(obj);
// }
// me.view.empView.getDataGrid().setItems(data);
//按照 一定格式返回的集合 直接赋予表格
me.view.empView.getDataGrid().setItems(items);
}
else{
mx.indicate("fail", "无此节点！");
}
}
);
}
//控制层
@RequestMapping(value = "/search2", method = RequestMethod.POST)
public @ItemResponseBody
QueryResultObject search(@ItemsRequestBody List<Map> list)
{
QueryResultObject query = new QueryResultObject();
List<Emp> idList = empdbcjBizc.searchEmp(list);
query.setItems(idList);
return query;
}
//接口
public List<Emp> searchEmp(List<Map> list);
//逻辑层
@SuppressWarnings("unchecked")
public List<Emp> searchEmp(List<Map> list) {
QueryCriteria qc = new QueryCriteria();
List<Emp> result = null;
qc.addFrom(Emp.class);
if (list != null)
{
String mc = (String) list.get(0).get("mc");
String ssbm = (String) list.get(1).get("ssbm");
if(mc != "")
{
qc.addWhere(" mc like '%"+mc+"%' ");
}
if(ssbm != "")
{
qc.addWhere(" ssbm = '"+ssbm+"'");
}
result = hibernateDao.findAllByCriteria(qc);
}
5.4 模糊查询 更改系统查询方法
逻辑层 查询方法
/**
* 根据输入条件查询记录
* @param queryCondition
* @return
*/
public QueryResultObject query(RequestCondition queryCondition) {
QueryCriteria qc = new QueryCriteria();
List<MwtYyjcIdxTab> result = null;
int count = 0;
qc.addFrom(MwtYyjcIdxTab.class);
if (queryCondition != null) {
qc = wrapQuery(queryCondition, qc);
count = getRecordCount(qc);
qc = wrapPage(queryCondition, qc);
result = hibernateDao.findAllByCriteria(qc);
} else {
result = hibernateDao.findAllByCriteria(qc);
count = getRecordCount(qc);
}
return RestUtils.wrappQueryResult(result, count).addDicItems(wrapDictList());
}
private QueryCriteria wrapQuery(RequestCondition queryCondition,
QueryCriteria qc) {
List<QueryFilter> wheres = queryCondition.getQueryFilter(MwtYyjcIdxTabVO.class);
if (wheres != null && wheres.size() > 0) {
//解析 wheres条件 更改 内容
int size = wheres.size();
for(int i=0;i<size;i++)
{
String filedName = (String)wheres.get(i).getFieldName();
if("grpId".equals(filedName))
{
String value = (String) wheres.get(i).getValue();
if("CD8E302C-4345-4236-A4EA-64D76BB700A7-01579".equals(value))
{
wheres.get(i).setValue("null");
wheres.get(i).setOperator("!=");
}
}
if("idxNodeName".equals(filedName))
{
String value = (String) wheres.get(i).getValue();
value = "%"+value+"%";
wheres.get(i).setValue(value);
wheres.get(i).setOperator("like");
}
if("idxNodeCode".equals(filedName))
{
//简便方法 与上一个同样结果
wheres.get(i).setOperator("like");
}
}
CrudUtils.addQCWhere(qc, wheres, MwtYyjcIdxTab.class.getName());
}
String orders = queryCondition.getSorter();
if (orders != null) {
qc.addOrder(orders.replaceAll("&", ","));
}
return qc;
}
weblet引用
$import("xmjc.views.MainViewController");
mx.weblets.WebletManager.register({
id: "xmjc",
name: "",
requires: ["chart","promgr","rightgrid"],
onload: function(e)
{ },
});
5.5 后台定义数据字典
//query 方法
RestUtils.wrappQueryResult(result,count).addDicItems(wrapDictList());
/**
* 初始化字典值
*
* @return QueryResultObject
*/
public QueryResultObject initDict() {
QueryResultObject query = new QueryResultObject();
return query.addDicItems(wrapDictList());
}
// 将字典对象封装为list
private List<DicItems> wrapDictList() {
List<DicItems> dicts = new ArrayList<DicItems>();
dicts.add(translateFromDB("mc", "com.sguap.empdbcj.po.Emp", "mc", "mc"));
dicts.add(translateFromFile("sex", "EMP.SEX"));
return dicts;
}
// 从属性文件中查询字典
private DicItems translateFromFile(String fieldName, String dicId) {
List<Map<String, String>> list = dataDictionaryBizC.translateFromFile(
dicId, "value", "text");
DicItems dict = new DicItems();
dict.setName(fieldName);
dict.setValues(list);
return dict;
}
// 从数据库中查询字典
private DicItems translateFromDB(String fieldName, String poName,String keyField, String valueField) {
List<Map<String, String>> list = dataDictionaryBizC.translateFromDB(
poName, "value", "text", keyField, valueField,"1=1");
DicItems dict = new DicItems();
dict.setName(fieldName);
dict.setValues(list);
return dict;
}
/**
*注入数据字典构件
*
* @param dataDictionaryBizC
*/
public void setDataDictionaryBizC(IDataDictionaryBizC dataDictionaryBizC) {
this.dataDictionaryBizC = dataDictionaryBizC;
}
5.6 前后台 交互 传参
1、集合：
前台js：
var params = new Object();
params.items = new Array();
params.items.push({"cdmc":me.view.cdmc.value,"deptid":_deptID});
var restClient = new mx.rpc.RESTClient({async:false});
restClient.post(
zhutwh.mappath("~/rest/applychangeyd/getApplyInfo"),
JSON.stringify(params),
function(p_context) //回调函数，p_context为返回数据
{
var items = p_context.resultValue.items;
if(items.length > 0){
mx.indicate("info","此要点的申请流程启动中");
return;
}
});
//如：
var params = new Object();
params.items = new Array();
params.items.push({
xzhousjlx : xzhousjlx,
xzhousj : xzhousj,
yzhousjlx : yzhousjlx,
yzhousj : yzhousj,
idx_code : me.zbbm,
pd : pd, //频度（最小频度编码）
tjDate : tjDate, //要查询的统计日期
dw : dwjs, //要查询的单位
stepfrq : stepfrq, //步频
steplength : steplength //步长
});
/* 走后台获取解析后的数据 */
var client = new mx.rpc.RESTClient({async : false});
client.post(
SingleIdx.mappath("~/rest/SingleIdx/getSj"),
JSON.stringify(params),
function(p_context) {
if (p_context.successful) {
resultValue = p_context.resultValue.items;
}
});
后台java代码：
控制层：
/**
* 根据id获取申请工作项信息
* @param recordid 申请修改业务主键
* @return 申请修改业务信息
*/
@RequestMapping(value = "/getApplyInfo", method = RequestMethod. POST)
public @ItemResponseBody
List getApplyInfo(@ItemsRequestBody List<Map> list) {
return applychangeBizc.getApplyInfo(list);
}
逻辑层：
/**
* 根据id获取申请工作项信息
* @param recordid 申请修改业务主键
* @return 申请修改业务信息
*/
public List getApplyInfo(List<Map> list) {
List<Map<String,String>> result = new ArrayList<Map<String,String>>();
if(list.size() > 0){
String idxCode = (String) list.get(0).get("idxCode");
StringBuffer sql = new StringBuffer();
sql.append(" select idx.idx_node_code ");
sql.append(" from MWT_YYJC_IM_IDX ");
sql.append(" where idx.idx_node_code = '"+idxCode+"' ");
result = hibernateDao.queryForListWithSql(sql.toString());
}
return result;
}
2、数组：
前台js：
var bd = new Array();
bd.add(eddy);
bd.add(dytz);
var param = {params:bd.join(",")};
var rest = new mx.rpc.RESTClient({baseUrl:"~/rest/condition"});
rest.get("/save",param,function(p_context){
if(p_context.successful){
alert("测点新建成功！");
}
});
后台java代码：
@RequestMapping("/save")
public @ItemResponseBody
QueryResultObject save(@RequestParam(value="params") String[] params){
String[] statis = params[0].split(",");
}
3、单个参数：
前台js：
var restClient = new mx.rpc.RESTClient({async:false});
restClient.get(
main.mappath("~/rest/emp/search"),
{emp:nodeValue},
function(p_context) //回调函数，p_context为返回数据
{});
后台java代码：
@RequestMapping("/getZzxh")
public @ItemResponseBody
QueryResultObject queryZzxh(@RequestParam(value="emp",required=false) String emp)
单个参数传参：
前台：
var params={itemType:me.view.getForm().editors.yhm.value};//里面的
var client =new mx.rpc.RESTClient();
client.get(user.mappath("~/rest/testuser/yzxx"),
{params:JSON.stringify(params)},
function(p_context){//前面的params是固定的格式，后边括号内的params可以随意起名
});
后台：
@RequestMapping(value = "/yzxx", method = RequestMethod.GET)
public @RawResponseBody
boolean yzxx(@ItemRequestParam("params") String itemType){
}
单个传参时，注意get或post用法(用post接收不到值)
4、多个参数：
前台js：
var cdlb = "";
var dydj = "";
var param = {cdlb:cdlb,dydj:dydj};
后台java代码：
@SuppressWarnings("unchecked")
@RequestMapping("/getDydj")
public @ItemResponseBody
QueryResultObject queryDydj(@RequestParam(value="cdlb") String cdlb,@RequestParam(value="dydj") String dydj)
5、通过URL传递参数：
前台js：
me.treeView = new mx.datacontrols.DataTree({
baseUrl: "~/rest/mwtpdscdeps/tree/"+deptId+"",
displayCheckBox: false, // 是否需要在树中显示选中框
onselectionchanged: me.controller._tree_selectionchanged
});
后台java代码：
@RequestMapping(value = "/tree/{id}", method = RequestMethod.GET)
public @TreeResponseBody
List<TreeNode> getNodes(@PathVariable String id,
@ItemRequestParam("params") String itemType
5.8 Grid 单元格 方法
1、数值格式 两位小数
//数值 两位小数
{ name: "zcsw", caption: "正常水位(米)" , editorType: "NumberEditor",valueType:"NUMBER",formatString :"0.00" },
//输入水位时检测输入的是不是数字，最大不能超过10位，精度最大为2
{ name: "fee", caption: "报销费用" , editorType: "NumberEditor",
renderCell:function(p_item, $p_cell)
{
var value = p_item.getValue("fee");
if(value != null)
{
if(me.empLevel != null)
{
if(me.empLevel == 0)
{
if(value > 5000)
{
$p_cell[0].style.color="red";
}
}
else if(me.empLevel == 1)
{
if(value > 10000)
{
$p_cell[0].style.color="red";
}
}
}
$p_cell.text(value);
}
else
{
$p_cell.text("");
}
}
},
2、数值改变 字体变红/值大小限定
oncelledited:me.controller._feeGrid_oncelledited
//费用 编辑 数字改变字体变为红色。 根据级别 限定 费用限度
me._feeGrid_oncelledited = function(e)
{
var column = e.column.name;
if(column == "fee")
{
// 数值 是否 改变
var changed = me.view.getDataGrid().entityContainer.changed;
if(changed)
{
var fee = e.item.values.fee;
if(fee != null)
{
if(me.view.empLevel != null)
{
if(me.view.empLevel == 0)
{
if(fee > 5000)
{
alert("报销费用不能大于5000");
e.item.values.fee = 0;
e.target.entityContainer.editingItem.fee = 0;
return;
}
else
{
e.cell[0].style.color = "red";
}
}
if(me.view.empLevel == 1)
{
if(fee > 10000)
{
e.cell[0].style.innerHTML= "";
e.cell[0].style.innerText= "";
alert("报销费用不能大于10000");
return;
}
else
{
e.cell[0].style.color = "red";
}
}
else
{
e.cell[0].style.color = "red";
}
}
}
}
me.view.getDataGrid().entityContainer.changed = false;
}
}
3新建插入行 赋值 不可改变
//新建插入行 员工ID 赋值 不可修改
me.view.feeView.getDataGrid().appendItem({
"empId" : empId
});
me.view.feeView.getDataGrid().columns.empId.readOnly = true;
4加链接
//加链接
{ name: "mc", caption: "部门名称" , editorType: "LinkEditor",
renderCell:function(p_item, $p_cell)
{
var value = p_item.getValue("mc");
if(value != null)
{
$p_cell[0].style.color="blue";
$p_cell[0].style.textDecoration="underline";
$p_cell[0].style.cursor="hand";
$p_cell[0].onclick=function(){
p_item.checked = true;
me.controller._btnEdit_onclick(p_item.getValue("objId"));
};
$p_cell.text(value);
}
else
{
$p_cell.text("");
}
}
},
me._btnEdit_onclick = function(selObj){}
//ling例子
var column = dataGrid.appendColumn(
{
name: "GENDER",
caption: "性别",
renderCell: function(p_item, $p_cell)
{
var value = p_item.getValue("GENDER"); // 获取 GENDER 字段的值。
if (value != null)
{
// 根据 value 的值，决定 $p_cell 中的 HTML 内容。
var icon = (value == 'M' ? "male" : "female");
$p_cell.html("<img src='" + $mappath("~/icons/" + icon + ".png") + "'>");
} else {
// 如果该值为空，则清空单元格的内容。
$p_cell.empty();
}
}
});
5.9 声明/重定义 方法
1、列表点击事件
MainView.js
_dataGrid = new mx.datacontrols.ComplexGrid({
create: me.controller._btnNew_onclick,
remove: me.controller._btnDelete_onclick,
onitemclick:me.controller._unitGid_onItemClick
});
MainViewController.js
me._unitGid_onItemClick = function()
{
}
//其他 视图 重新 定义方法
me.unitView.getDataGrid().onitemclick.clear();
me.unitView.getDataGrid().onitemclick.addEventListener(me.controller._unitGid_onItemClick);
2、列表选择事件
//datagrid 定义事件
_dataGrid = new mx.datacontrols.ComplexGrid({
…
autoSelect:true,
onselectionchanged:changed
})
function changed(e)
{
}
//其他 视图 重新 定义方法
me.unitView.getDataGrid().onselectionchanged.clear();
me.unitView.getDataGrid().onselectionchanged.addEventListener(changed);
3、查询 方法 重写
_dataGrid.searchBox.searchButton.onclick.clear();
_dataGrid.searchBox.searchButton.onclick.addEventListener(me.controller.searchButtom_onClick);
4、新建，编辑方法重写
//去除新建按钮
me.chartrqView.getDataGrid().toolBar.removeByIndex(0);
me.chartrqView.getDataGrid().toolBar.removeByName("new");
//插入新建按钮
me.chartrqView.getDataGrid().toolBar.insertItem(0,"-",true);
me.chartrqView.getDataGrid().toolBar.insertItem(0,{
name: "add",
text: mx.msg("NEW"),
toolTip: mx.msg("NEW"),
imageKey : "add",
onclick: me.controller._chartrqAdd_onclick},true);
//重置 编辑方法
me.chartrqView.getDataGrid().toolBar.items["#edit"].onclick.clear();
me.chartrqView.getDataGrid().toolBar.items["#edit"].onclick.addEventListener(me.controller._chartrqEdit_onclick);
me.chartrqView.getDataGrid().toolBar.items["#edit"].on("click", me.controller._btnView_onclick);
5.10 方法
1、统计周期时间判断
//统计周期 起始时间
me._time1_changed = function(e)
{
//清除 验证信息
e.target.$e.removeClass("error");
e.target.$e.toolTip("destroy")
//yyyy-MM-dd
var time1 = e.target.value;
var searchDate1 = time1.replace(/\-/g,"");
//今天
var date = new Date();
date = Date.format(date,"yyyyMMdd");
if(searchDate1 > date)
{
mx.indicate("info", "查询时间大于今天");
e.target.markError(true, "查询时间大于今天");
return;
}
var time2 = me.view.dataTimeEditor2.value;
if($notEmpty(time2))
{
var searchDate2 = time2.replace(/\-/g,"");
if(searchDate1 > searchDate2)
{
mx.indicate("info", "起始时间小于终止时间");
e.target.markError(true, "起始时间小于终止时间") return;
}
}
}
2、添加、清除验证信息
//添加 验证信息
e.target.markError(true, "查询时间大于今天");
//清除 验证信息
formEditors.xzhousj.$e.removeClass("error");
formEditors.xzhousj.$e.toolTip("destroy");
3、查询区，工具条 换位
// 把toolbar放在serachBox之后
_dataGrid.toolBar.$e.insertAfter(_dataGrid.searchBox.$e);
// 通过此方法的重写实现SearchBox收缩，无此方法，收缩后工具栏将看不到
ontoggleShowState : function(e) {
_dataGrid.$grid.css("top", e.height + 26);
},
//此方法写在searchbox 里面
4、隐藏 分页栏
me.idxdimView.getDataGrid().pageNaviBar.hide();
me.idxdimView.getDataGrid().$grid.css({bottom:0})
me.idxdimView.getDataGrid().toolBar.hide();
me.idxdimView.getDataGrid().toolBar.setVisible(false);
5、弹窗 返回值 定义关闭事件
window.open(mx.mappath("http://localhost:9000/testuap/basemanager/zhutiydwh/index.jsp"),"显示窗口", "height=800, width=1200, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes,"resizable=yes, location=yes, status=yes");
var options = {title:"指标与维度关系维护页面",reusable: true, displayMaxButton:true,width:450, height:600};
me.winDim = new mx.windows.WindowManager().create(options);
//me.winDim = jishifx.context.windowManager.create(options);
me.winDim.addControl(button);
me.winDim.setView(me.view.mainIdxdimView);
//返回值 回调函数 获取返回值
me.winDim.showDialog(
function(p_dialog){
var result = p_dialog.dialogResult.saved;
}
);
//me.winDimVal.$e.find(".closeButton");
//窗口关闭me.winDimVal.$e.find("span")[1].attachEvent("onclick",_btnClose_onclick);
//返回值
me.winDimVal.setDialogResult({saved:me.saved });
//加载选择单表页面
var options = {title:"选择单表",reusable: true, width:"500", height:"70%",
displayMaxButton:true,resizable:false
};
me.winDimVal = new mx.windows.WindowManager().create(options);
//整个页面 上下分割
me.hSplit = new mx.containers.HSplit({
rows:"90%,10%",
borderThick:"0"
});
me.winDimVal.addControl(me.hSplit);
me.hSplit.addControl(me.view.bjgView,0);
me.view.bjgView.getDataGrid().load();
var container = new mx.containers.Container({
width:"100%",height:"100%"
});
var label = new mx.controls.Label({
width:"30%",height:"100%"
});
var submit = new mx.controls.Button({
text: "确定",
onclick:next
});
var label2 = new mx.controls.Label({
width:"100",height:"100%"
});
var cancel2 = new mx.controls.Button({
text: "取消"
});
cancel2.on("click", function()
{
me.winDimVal.hide();
});
me.hSplit.addControl(container,1);
container.addControl(label);
container.addControl(submit);
container.addControl(label2);
container.addControl(cancel2);
me.winDimVal.showDialog();
//例：
var _detailWin = SingleIdx.context.windowManager.create({
reusable: false,//是否复用
width:600,
height:500,
title:"指标选择"
});
var btnOK = new mx.controls.Button({
left:"480px",
top:"0px",
position:"absolute",
text: "确定" ,
onclick: me.getIdxclick
});
idxTreeView = new zhibiaoxz.views.TreeViewController().getView();
idxTreeView.getTreeView().displayCheckBox = true;
if(typeof idxTreeView != "undefined"){
_detailWin.setView(idxTreeView);
_detailWin.addControl(btnOK,true);
}
_detailWin.showDialog();
6、表头加复选框
me.chartrqView.getDataGrid().load(function(){
var checkTd = $("<div><span id='checkBox2'/></div>");
// me.chartrqView.getDataGrid().$headTable.find("td")[2].firstChild.appendChild(checkTd[0]);
me.chartrqView.getDataGrid().$headTable.find("td")[2].innerHTML = "<div><span><input id='checkBox2' type='checkbox'/></SAPN><SPAN id=caption>高度</SPAN></div>";
me.chartrqView.getDataGrid().$e.on("click", "#checkBox2", _item_checkBox_click);
});
7、表格第一列 分组 合并单元格
renderCell : function(p_item, $p_cell) {
debugger;
var value = p_item.values.fz;
var newValue = null;
var data = me.gridEntityContainer.data;
if (typeof (value) != "undefined") {
if (tempDept != value)
{
// 统计相同记录条数
for (i = 0; i < data.length; i++)
{
if (data[i].fz == value) {
count++;
}
$p_cell.attr("rowspan", count);
$p_cell.text(value);
num = 1;
}
}
if (tempDept == value && num >= 2) {
$p_cell.hide();
count = 0;
}
num += 1;
$p_cell.css({
"color" : "green",
"background-color" : "#ADD8E6"
});
}
}
8、多表查询
控制层 更改query 查询方法
逻辑层 自定义查询方法myquery
（文件编码UTF-8）
9、查询区 split 背景色修改
//查询区 改颜色
_dataGrid.$e.find(".dataGridSearchBox").css({"background-color":"#D1E9E9"});
_dataGrid.searchBox.$e.find("TD").css({"background-color":"#D1E9E9"});
//split 单个分区 背景色
me.hsplit.$panel1.css({"background-color":"#D1E9E9"});
10、日期时间转换
var searchDate = new Date(temptime);
var firstDate = searchDate.addDays(-6);
searchDate = Date.format(searchDate,"MM月dd日");
firstDate = Date.format(firstDate,"MM月dd日");
11、清空容器
var length = me.view.mainPanel.controls.length;
for(var i=0; i<length; i++)
{
me.view.mainPanel.removeControl(me.view.mainPanel.controls[0]);
}
12、单位查询框填充
// 给查询框赋初始值
me.view.danwei.setValue(me.orgcode);
// 给下方的列表加数据字典
me.organdict = restResult.resultValue.dicts;
//必须添加以下循环，以使数据字典的数据结构与平台的要求相符，否则数据字典无效
for (i=me.organdict.length-1; i>-1; i--){
me.organdict [me.organdict[i].name] = me.organdict[i].values;
}
6.添加div
var div1 = $('<div id="topDiv" style="float:left;background-color:#10AE9E;width:25%;left:0px;height:18px;position:absolute;margin-top:-18px;"> '
+ '<font color="#FFFFFF" style="font-size:13px;font-weight:bold;">'+me.idx_name+'</font>'
+ '</div>');
div1.$e = div1;
container1.addControl(div1);
//-18是边框外18px 距离
二、系统结构
- 界面层：基于AJAX框架自主开发可复用的界面标签，可以灵活组合满足不同客户的需求。
- 交互层：响应用户请求并将请求分发到不同展现构件，由展现构件组织逻辑层来协同处理这些请求，返回结果到界面层。
- 逻辑层：提供通用组件，对通用业务逻辑、工具包以及公共套件提供的服务进行封装，以便业务逻辑的复用和组装。
- 持久层：为业务系统与数据库的交互提供简单一致的接口，并优化了数据库操作性能。实现通用数据访问服务组件，支持多种形式的数据存取，实现数据库相关对象的OR
- Mapping机制及复杂的业务数据获取规则。
MX展现框架可分为6部分：基础层、工具层、控件层、视图层、Weblet小程序以及可视化设计器。
- 基础层：JavaScript语言扩展、JavaScript运行时扩展、国际化以及主题。
- 工具层：通用工具库、安全机制和REST服务客户端。
- 控件层：基础控件、编辑器控件、容器控件、数据控件以及数据实体容器。
- 视图层包括视图、视图控制器、视图容器以及数据实体容器。
- Weblet小程序：是web应用的最小逻辑单元，它将页面文件、脚本文件和资源文件按照一定的目录结构管理。
- 可视化设计器：是为基于MX框架的二次开发人员提供的集成开发工具，方便开发人员快速构建一个web应用。
1. 层次
1.1 持久层
- 提供统一的接口IHibernateDao。
- 接口中封装一系列的持久化方法。
- 在逻辑层中调用持久层的方法完成对业务的逻辑操作。
主要方法：findAll，saveOrUpdate，removeObject，getObject.
1.2 逻辑层
平台的逻辑层主要是编写逻辑构件 。
一个逻辑构件是由接口，实现类和配置文件组成。
例如：接口为IBizc,实现类为Bizc。配置文件为：
<bizc:logic id="treeBizc">
<bizc:implementation type="java" target="com.sgcc.uap.test.bizc. Bizc" />
<bizc:service interface="com.sgcc.uap.test.bizc.IBizc">
</bizc:service>
</bizc:logic>
逻辑构件在控制层中调用，将逻辑构件注入到逻辑层。
@Autowired
private ITreeBizc treeBizc;////配置文件中定义的逻辑构件的ID。
1.3 控制层
- 控制层主要是与前端进行交互。
- 在控制层中定义与前端约定的请求URL地址，参数和请求方法，映射到具体控制类和方法中。
- 接收前端请求，将请求数据拦截通过注解将数据翻译为后台理解的信息，执行相应操作后将返回值翻译为前端理解信息返回给前端显示。
2. 配置文件
2.1 控制类配置文件（testResource.xml）
主要定义要扫描的package，package中存在有注解@Controller标记的java类。配置控制类路径。
<beans xmlns="http://www.springframework.org/schema/beans"
…
<context:component-scan base-package="com.sgcc.uap.test" />
</beans>
2.2 逻辑构件配置文件（testBizc.xml）
配置逻辑构件的接口和实现类，还可以进行事务配置。
<bizc:logic id="bdqxBizc">
<!--配置逻辑构件的接口和实现类 -->
<bizc:implementation type="java" target="com.sgcc.uap.test.bizc.TestBizc" />
<bizc:service interface="com.sgcc.uap. test.bizc.ITestBizc">
</bizc:service>
</bizc:logic>
2.3 持久层配置文件（moduleEntityPersistence.xml）
<beans xmlns="http://www.springframework.org/schema/beans"
…>
<module:entity id="testEntity" sessionFactory="sessionFactory">
<module:mappingFile>
classpath:com/sgcc/uap/test/po/MwtUdSbdyxBdqxjl.hbm.xml
</module:mappingFile>
</module:entity>
</beans>
2.4 配置持久化类的映射文件（***.hbm.xml）
<id name="objId" type="string" length="42">
<column name="OBJ_ID">
<comment>OBJ_ID</comment>
</column>
<generator class="assigned"/>
</id>
<property name="objDispidx" type="big_decimal" length="22" not-null="true">
<column name="OBJ_DISPIDX">
<comment>OBJ_DISPIDX</comment>
</column>
</property>
3. 主题
局部修改主题： 在index.jsp中，<mx:Framework theme="default"/>
整体修改主题： UAP项目下platformconfig.properties添加MX_THEME=default
3.1 名词 相关解释
SG-UAP SERVER
提供SG-UAP平台的模块，整个项目组共用一个，由项目管理人员统一维护，开发人员只需要知道SG-UAP平台服务端的地址。（简称“服务端”）
SG-UAP IDE
SG-UAP集成开发工具（SG-UAP Development Environment）
UAP项目
依赖于SG-UAP平台服务端的标准的空的Web应用
模块
具有OSGi规范（Open Service Gateway Initiative ，开放服务网关规范）特定描述的Java程序包，是OSGi规范定义的模块化实体单元。SG-UAP平台的动态模块框架对标准的OSGi模块进行扩展形成了动态模块，以上两者统称为模块。
Weblet
是种功能独立的部件，页面的最小组成单位。
VO对象
Value Object数据对象，也称为业务对象，存活在业务层的，供业务逻辑使用的。
PO对象
Persistence Object持久对象,是与数据库中表相映射的java对象。是服务端的实体类，与VO对象相对应，两者是通过*Transfer.java建立关联的
任务执行组件
每个任务执行步骤的业务操作的实现组件，具体可包括脚本和插件
报表模板
报表模板由数据连接、数据查询、报表对象及布局信息组成，它在报表设计器中被创建，并且符合XML规范。
报表项
页眉、页脚、数据首、数据体、数据尾、分组首、分组尾、文本、图片及图表。
数据项
数据连接、数据集、参数、系统变量及合计
报表项属性
边框、背景、绑定数据源、位置等几十种属性
报表类型
自由报表、列表、表格、分组报表、交叉报表、图文混合报表等
统一应用平台
State Grid Unified Application Platform，缩写SG-UAP，国家电网公司新一代应用开发与运维平台，提供一套技术统一、架构柔性、性能高效、安全可靠的企业级信息系统基础框架和公共套件集，支撑业务系统的设计、开发、测试、发布、运行的全过程。
Studio
统一应用平台的集成及可视化开发环境，集设计、编码、测试调试和部署于一体，为不同的开发阶段提供了指导和帮助，优化了软件开发过程和团队开发流程。
统一应用平台模块仓库
提供不同版本的统一应用平台的模块，整个项目组公用一个，由项目管理人员统一维护，开发人员只需要知道SG-UAP平台模块仓库的地址。
模块项目
为应用系统中相对独立的功能模块开发一个模块项目
扩展模块
当需要对UAP开发平台的某个模块进行修改时，可以创建扩展模块，在扩展模块中对同路径同名资源进行修改。被扩展的模块称为主模块。
持久模型
数据库中的表在Studio中的体现形式，按照Herbernate配置文件的规范对表进行了封装。
持久模型文件
保存持久模型信息的文件，以.pm后缀结尾。
场景
对用户常用的业务模块进行分析和抽象，发现这些模块的代码在结构上高度类似，具有通用性或定制批量生成特性，因此归纳出了以下常用场景：单表场景、主从表场景、树场景、Tab场景（多表场景）。
Web编辑器
编辑Jsp文件的一个可视化编辑器，用户可以通过拖放的方式来设计Jsp页面。
平台基础设施
统一应用平台中最底层的部分，其中包含核心框架和平台微内核。
平台公共套件
统一应用平台提供的各类公共服务：如任务调度、数据报表、数据缓存、信息通信等。
一体化平台
门户、可视化体系、BPM、统一授权平台、数据中心等服务统称一体化平台。
模块框架
一个控制、管理模块运行的框架。
模块
系统中的某个独立的业务处理功能，可被复用。
延迟加载/懒加载
延迟加载/懒加载（lazy load），为了避免无谓的性能开销，在真正需要数据的时候，才执行数据加载操作。
比较常用的场景：树展现组件，先只加载父节点，展开父节点时再加载子节点； Hibernate3中关联关系对象默认的加载方式，只有在使用的时候，才会发出sql语句进行查询。
透视图
在集成开发工具上的对某个插件的开发模式，如debug透视图。
任务执行组件
每个任务执行步骤的业务操作的实现组件，具体可包括脚本和插件。
三、数据库总结
select * from t_nt_zhibiaoxxb t where t.beizhu = '数据项';
--select * from t_nt_liuchengyzbgxb a where a.beizhu = '数据项' ;
(order by liuchengmc)
--插入sql（标准）
insert into t_nt_liuchengyzbgxb
(id, liuchengid, liuchengmc, zhibiaoid, zhibiaomc, beizhu)
values
(sys_guid() || '0000000000',
(select id from t_nt_liuchengjcxx where liuchengmc = '物资批次需求计划管理流程'),
'物资批次需求计划管理流程',
(select zhibiaoid from t_nt_zhibiaoxxb where zhibiaomc = '物资招标采购计划变更条目数'),
'物资招标采购计划变更条目数',
'数据项');
select id from t_nt_liuchengjcxx where liuchengmc = '应急物资收发货管理流程（区域库调拨）'
----（执行代码）
insert into t_nt_liuchengyzbgxb
(id, liuchengid, liuchengmc, zhibiaoid, zhibiaomc, beizhu)
values
(sys_guid() || '0000000000',
(select id from t_nt_liuchengjcxx where liuchengmc = '库存盘点管理流程'),
'库存盘点管理流程',
(select zhibiaoid from t_nt_zhibiaoxxb where zhibiaomc = '库存盘亏物资条目数'),
'库存盘亏物资条目数',
'数据项') ;
--------检查时
select * from t_Nt_Liuchengjcxx t WHERE t.liuchenglx = 'exercise';
---重复时，添加过滤条件
insert into t_nt_liuchengyzbgxb
(id, liuchengid, liuchengmc, zhibiaoid, zhibiaomc, beizhu)
values
(sys_guid() || '0000000000',
(select id
from t_nt_liuchengjcxx
where liuchengmc = '应急物资收发货管理流程（区域库调拨）'
and shangjilcid = (select id
from t_nt_liuchengjcxx
where liuchengmc = '仓储配送'
and liuchenglx = 'point')),
'应急物资收发货管理流程（区域库调拨）',
(select zhibiaoid
from t_nt_zhibiaoxxb
where zhibiaomc = '出库物资总金额'),
'出库物资总金额',
'数据项');
四、创建流程，发送流程等
1…配置环境，加白名单，导jar包
属性 说明 取值
BPM_UDDI_ADDRESS_ID BPM连接ID 默认为default
BPM_UDDI_ADDRESS_NAME BPM连接名称 默认为BPM
BPM_UDDI_ADDRESS_TYPE BPM连接类型 无
BPM_UDDI_ADDRESS_LOGICNAME BPM连接逻辑名称 默认为default
BPM_UDDI_ADDRESS_DESCRIPTION BPM连接描述
BPM_UDDI_ADDRESS_UUDIHOST BPM服务器的地址 对应BPM default应用下的WEB-INF_srv
config\uddi-config.xml中的
BPM_UDDI_ADDRESS_UUDIPORT BPM服务器端口 对应BPM default应用下的WEB-INF_srv
config\uddi-config.xml中的
BPM_UDDI_ADDRESS_UUDIWEBCONTEXT BPM应用上下文名称 对应BPM default应用下的WEB-INF_srv
config\uddi-config.xml中的< context>，一般
不需要改动
BPM_UDDI_ADDRESS_UUDIUSERID BPM连接用户名 默认为bps
BPM_UDDI_ADDRESS_UUDIPASSWORD BPM连接密码 默认为000000
BPM_UDDI_ADDRESS_UUDIADMINPORT BPM远程端口 对应BPM default应用下的WEB-INF\web.xml中的
AdminPort的
param-value
2…Js处理对流程操作，需要在业务模块的weblet.js中添加对流程JS代理类Weblet依赖
3…通过调用JS实现流程创建
5…通过调用JS实现流程完成页面
6…创建流程实例核心代码
7…完成工作项核心代码
8…前端调用服务端代码实现流程创建
9…前端调用服务端方法完成工作项的实现
var dataForm = new mx.datacontrols.DataForm( {
fields: [ {
name: "deptId",
caption: "DEPT_ID",
editorType: "TextEditor",
visible: false
}, {
name: "deptName",
caption: "DEPT_NAME",
editorType: "FileEditor",//类型为文件编辑器
type: "form",//类型声明为 form
uploadMode: "file",//保存方式为file，文件会保存到服务器指定磁盘路径；为blob会保存到数据库的BLOB类型字段中。
tableName: "DEPT",//数据对应的表名，必须是数据库中的物理表名
primaryKey: "DEPT_ID",//数据表的主键字段名
colName: "DEPT_NAME"//当前字段在数据库中的物理名称
} ],
entityContainer: me.formEntityContainer
});
五、基地.计量中心UAP全寿命周期
1. 赋值时，能用setValue就不用setText;
2. 加数据字典
2.1 前台：
文本类型TextEditor改为DropDownEditor
2.2 后台：
查询sql内，
//添加数据字典的列
String cols = "SORT_CODE,TYPE_CODE,MODEL_CODE,WIRING_MODE,STATUS_CODE,VOLT_CODE,RATED_CURRENT";//grid的列名
String sql=sb.toString();
String count = new String("select count(*) count from ("
+ sql + ")");
List<Object> countList = hibernateDao.executeSqlQuery(count.toString(), sqlParams.toArray());
int bd = Integer.valueOf(countList.get(0).toString());
list=hibernateDao.executeSqlQuery(sql.toString(),
sqlParams.toArray(),Integer.valueOf(params.getPageIndex()),
Integer.valueOf(params.getPageSize()));
for(Object[] obj : list){
Map<String, String> groupMap = new HashMap<String, String>();
groupMap.put("BAR_CODE",obj[0] == null ?"" : obj[0].toString() );
}
return RestUtils.wrappQueryResult(formlist,bd).addDicItems(wrapDictList(cols));
其他具体实现逻辑:
/**
* 将字典对象封装为list
* @return
*/
private List<DicItems> wrapDictList(String cols) {
//String cols = "SORT_CODE,TYPE_CODE,MODEL_CODE,WIRING_MODE,STATUS_CODE,VOLT_CODE,RATED_CURRENT";//grid的列名
//字典项列表
List<DicItems> dicts = new ArrayList<DicItems>();
if(cols == null || cols.trim().length()<1){//如果列名为空，不添加字典项
return dicts;
}else{
//获取列名数组
String[] colArray = cols.split(",");
//获取列名数量
int length = 0;
if(colArray!=null){
length = colArray.length;
}
//遍历数组，为相应的列添加字典项
for(int i=0;i<length;i++){
if("SORT_CODE".equals(colArray[i])){//类别
String sql = "select code, code_name from VW_METER_SORT_CODE order by code";
// String sql = "SELECT org_no CODE,NVL(SHORT_NAME, ORG_NAME) AS CODE_NAME FROM o_org WHERE org_type in ('02','03') ORDER BY org_type";
dicts.add(translateFromDB("SORT_CODE",getData1(sql)));
}else if("TYPE_CODE".equals(colArray[i])){//类型
String sql = "select code, code_name from VW_METER_TYPE_CODE order by code";
dicts.add(translateFromDB("TYPE_CODE",getData1(sql)));
}else if("MODEL_CODE".equals(colArray[i])){//型号
String sql = "select code, code_name from VW_MET_MODEL order by code";
dicts.add(translateFromDB("MODEL_CODE", getData1(sql)));
}else if("WIRING_MODE".equals(colArray[i])){//接线方式
String sql = "select code, code_name from VW_WIRING_MODE VM order by VM.code";
dicts.add(translateFromDB("WIRING_MODE", getData1(sql)));
}else if("STATUS_CODE".equals(colArray[i])){//设备状态
String sql = "select code, code_name from VW_METER_STATUS VM order by VM.code ";
dicts.add(translateFromDB("STATUS_CODE", getData1(sql)));
}else if("VOLT_CODE".equals(colArray[i])){//电压
String sql = "select code, code_name from VW_METER_VOLT_CODE order by code";
dicts.add(translateFromDB("VOLT_CODE", getData1(sql)));
}else if("RATED_CURRENT".equals(colArray[i])){//电流
String sql = "select code, code_name from VW_METER_CURRENT_CODE order by code";
dicts.add(translateFromDB("RATED_CURRENT", getData1(sql)));
}
}
}
return dicts;
}
/**
* 从数据库中查询字典
* @param fieldName 字段名
* @param values 值
* @return
*/
private DicItems translateFromDB(String fieldName,List<Map<String, String>> values) {
DicItems dict = new DicItems();
dict.setName(fieldName);
dict.setValues(values);
return dict;
}
// 将查出的数据封装成符合下拉框格式的数据
@SuppressWarnings("rawtypes")
public List<Map<String,String>> getData1(String sql) {
List<Map<String,String>> list = new ArrayList();
List<Map> list1 = hibernateDao.queryForListWithSql(sql);
Map map1 = new HashMap();
// map1.put("value","-1");
// map1.put("name","--请选择--");
// list.add(map1);
for (int i = 0; i < list1.size(); i++) {
Map map = new HashMap();
if(list1.get(i).get("key") != null){
map.put("key",list1.get(i).get("key").toString());
}
map.put("value", list1.get(i).get("code").toString());
map.put("text", list1.get(i).get("code_name").toString());
list.add(map);
}
return list;
}
3. 按钮处理（规范化）
var btnCss = {
color:"#FFF",
background:"url(/mds/gg/img/other/my_search_btn.gif) no-repeat",
fontWeight:"bold",
cursor:"hand",
border:"medium none"
};
me.searchButton.$("input").css(btnCss);
me.resetButton.$("input").css(btnCss);
4. 表格
/* 初始化 DataGrid */
_dataGrid = new mx.datacontrols.ComplexGrid({
// 构造查询属性。
alias: "purchaseArrive$arriveInfoArriveNumMainViewDataGrid",
columns:[
],
// 构造列排序条件，如果有多列，则以逗号分隔。例sorter: "school ASC, class DESC"
displayCheckBox: false,
displayPrimaryKey:false,//列表是否显示主键
allowEditing: false, //列表默认不可编辑
allowSorting:true,
displayStatisticRow:true,//显示静态行，添加合计行时使用
displayRowNumber:true,
displayColSplitLine:true,
rowNumberColWidth:40,//序号列宽度设置
allowInterlacedRow:false,//取消隔行变色
pageSize : 10,
entityContainer: gridEntityContainer,
onpageindexchanged:me.controller._pageIndexChanged,
onload:me.controller._dataGrid_onload
});
//重置toolBar按钮项
_resetToolBarItems();
me.tabControl.pages[0].addControl(_dataGrid);
//设置dataGrid的head的样式
_dataGrid.$head.css({
"backgroundImage":"url(/mds/gg/img/lc/my_table_thbg.gif)",
"backgroundRepeat": "repeat-x",
"float": "left",
"top": "0px",
"left": "0px",
"height":"24px",
"lineHeight":"24px",
"color":"#1E5848",
"fontFamily":"黑体",
"fontWeight":"bold"
});
//设置序号列的样式
_dataGrid.$bodyTable.find("#rownumber").css("backgroundColor","#E7F8F2");
5. tab页表头设置
function _initTabControl()
{
me.tabControl = new mx.containers.TabControl({
pages:[
{ text: "采购信息", name: "purchaseInfo" }
]
});
me.tabControl.$head.css({"backgroundImage":"url(/mds/gg/img/lc/my_tbtitle_bg.gif)"});
me.tabControl.$head.find("span.tab-text").css({
"color":"#00706B","fontWeight":"bold","fontSize":"14px"
});
me.tabControl.$body.css("padding",0);
me.hsplit2.addControl(me.tabControl,1);
//tab题目显示宽度（标题太长省略是，通过设置max-width最大显示宽度）
me.bot_tab.$head.find("a#yuce.selected").css({
"width":"220px" });
me.bot_tab.$head.find("span.tab-text").css({
"color":"#00706B","fontWeight":"bold","fontSize":"12px","padding":"0","max-width":"210px" });
}
6. 导出按钮
/**
* 重置按钮项
*/
function _resetToolBarItems(){ //导出Excel的toolBar
var toolBar = new mx.controls.ToolBar({
items:[
{ name : "export",
toolTip : "Excel导出",
imageKey : "export",
imageUrl: "/mds/gg/img/lc/table_sendout.gif",
text : "Excel导出",
onclick:me.controller._exportXSL,
css:{"border":"1px solid #6EC5B9"}
}
],
position:"absolute",
right:"3px",
top:"0",
height:"26px",
css:{"backgroundImage":"none","borderStyle":"none","height":"23px"}
});
me.gridHsplit.addControl(toolBar,0);
}
7. 下拉框赋值
不用点击在加载的方式，改用 在controller中 * 初始化“产品类型”下拉框选项（数据字典）
me._initItems_cp = function(){
//给产品类型下拉列表赋值
// var items = [{name:"--请选择--",value:""}];
// me.view.dropdowneditor_cp.setItems(items);
var cplxItems = new Array();
var client_cplx = new mx.rpc.RESTClient({async:false});
client_cplx.get(yszlr.mappath("~/rest/lcsupplierindievent/getCplx"),
function(p_context){
if(p_context.successful){
cplxItems = p_context.resultValue.items;
}
});
me.view.dropdowneditor_cp.setItems(cplxItems);
// me.view.dropdowneditor_cp.setValue("",true);
}
8. log日志
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
class{
private final Log logger = LogFactory.getLog("文件名 比如 XX.java");
public XXXX(){
try{
} catch (Exception e) {
if (this.logger.isErrorEnabled()) {
this.logger.error("一级菜单名字===二级菜单名字===三级菜单名字===按钮名字==", e);
}
throw new RestClientException("一级菜单名字===二级菜单名字===三级菜单名字===按钮名字==", e);
}
}
}
public void setHibernateDao(IHibernateDao hibernateDao) {
this.hibernateDao = hibernateDao;
}
9. 跳转
//1.引入portal包
portal.PortalUtil.addTab("main","模型参数维护","../gyspj/cplx_add/index.jsp");
//2.实现例子
requires:["zczt/common$util","cplx_add","portal/portal"],
//简单的页面跳转
me.button_add.on("click", function() {
//添加增加链接显示在tab栏上面 此处需要做出判断 如果有portal 或者 lcam 的两种情况
var title = "模型参数维护";
var frame = "main";
//此处可能需要获取 服务器ip地址 写绝对路径
var urlStr="../gyspj/cplx_add/index.jsp";
portal.PortalUtil.addTab("main","模型参数维护","../gyspj/cplx_add/index.jsp");
});
//例子：
me.smlc_click = function(){
var barcode = me.view.codeText.value;
if(barcode!=null &&""!=barcode){
// 另外打开页面方式，打开新页面方式
// var url = //"/mds/smfxjpj/SingleZc/smlc/index.jsp?barcode="+barcode;//传参
// window.open(url,"寿命历程");
var title = "寿命历程";
var frame = "smlc";
portal.PortalUtil.addTab(frame,title,"../smfxjpj/SingleZc/smlc/index.jsp?barcode="+barcode);
}else{
alert("抱歉，请安条形码进行查询！");
}
//其余操作，点击后对所选内容取出鼠标经过事件并变色
me.view.smlcurl.setCss({color:"grey"});
me.view.smlcurl.$e[0].onmouseover = "";
me.view.smlcurl.$e[0].onmouseout = "";
}
10. 开启tab方法
需要在 加入 kgbs = 1
11. tab页跳转
requires:["common$util","portal/portal"],
var title = "拆除情况";
var frame = "ccqk";
// alert(url);
portal.PortalUtil.addTab(frame,title,"../zczt/sheiBeizk/index.jsp");
12. 表格触发甘特图
/**
* 表格选择行发生变化时触发,引入gant图页面
* @param e 选中的行
*/
me.selectionChanged = function(e){
if(e.target.selections[0] != null){
var selection = e.target.selections[0].values;
if(me.gantView != null)
{
me.gantView.status = selection.CUR_STATUS;
me.gantView.equipCateg = selection.EQUIP_CATEG;
me.gantView.equipId = selection.EQUIP_ID;
me.gantView.barCode = selection.bar_code;
me.gantView.arriveBatchNo = selection.ARRIVE_BATCH_NO;
me.gantView.setChangeSmzq();
me.gantView.refresh_chart();
}
else{
me.gantMvc = new Dgzccx$Dgzccx_gant.views.Dgzccx_gantViewController();
me.gantView = me.gantMvc.getView();
me.gantView.status = selection.CUR_STATUS;
me.gantView.equipCateg = selection.EQUIP_CATEG;
me.gantView.equipId = selection.EQUIP_ID;
me.gantView.barCode = selection.bar_code;
me.gantView.arriveBatchNo = selection.ARRIVE_BATCH_NO;
//获取gant图页面
me.view.con_gant.addControl(me.gantView);
me.gantView.setSmzq();
me.gantView.initChart();
me.gantView.setChangeSmzq();
}
}
}
13. 表单文字样式
在onload回调函数里设置
//字体加粗样式，大小
me.view.form.editors[9].$input.css({"fontWeight":"bold","fontSize":"12px"});
//批次寿命评价等级，判断并设置样式
if(gradeCode == '一级'){
me.view.form.editors[10].$input.css({'background':'#33CC00','color':'#FFFFFF',"cursor":"pointer","textDecoration":"underline"});
}else if(gradeCode == '二级'){
me.view.form.editors[10].$input.css({'background':'#0066CC','color':'#FFFFFF',"cursor":"pointer","textDecoration":"underline"});
}else if(gradeCode == '三级'){
me.view.form.editors[10].$input.css({'background':'#EEEE00','color':'#FFFFFF',"cursor":"pointer","textDecoration":"underline"});
}else if(gradeCode == '四级'){
me.view.form.editors[10].$input.css({'background':'#FF9933','color':'#FFFFFF',"cursor":"pointer","textDecoration":"underline"});
}
//加跳转链接
me.view.form.editors[10].$input.on("click",me._PjClick);
// 置信度区间
me.view.form.editors[7].$input.css({
"color":"blue",
"cursor":"pointer",
"textDecoration":"underline"
});
//加点击方法
me.view.form.editors[7].$input.on("click",me._Zxdclick);
//鼠标移入,移出
me.ycpdlabel_over = function(){
me.ycpdurl.$e[0].style.color = "orange";
me.ycpdurl.$e[0].style.cursor ="hand";
}
me.ycpdlabel_out = function(){
me.ycpdurl.$e[0].style.color = "blue";
}
14. 添加红星
me.Barcode = new mx.controls.Label({
text: "条形码",
// left:"2px",
width:"115px",
top:"5px",
padding:"0 5px 0 0",
position:"absolute",
css:{color:"#00706B"},
textAlign:"right"
});
var starSpan = "<span style='color:red;display:inline;'>* </span>";
me.Barcode.$e.find("span").prepend(starSpan);
六、后台
1. 创建后台
创建新weblet后，没有后台文件，需出创建新的
选择好包路径，创建Sbgg包——创建Sbggcontroller.java文件——创建Bizc包,至此，再在Bizc包下，创建SbggBizc.Java文件，及ISbggBizc.Java文件；
2. 配置包路径之类
2.0 创建一个单表场景，会自动生成一个配置包文件；如pczcage
2.1 在pczcageBizc.xml中添加配置信息
<bizc:logic id="SbggBizc">
<bizc:implementation type="java" target="com.sgcc.mds.lcam.smfxjpj.SingleZc.Sbgg.bizc.SbggBizc" />
<bizc:service interface="com.sgcc.mds.lcam.smfxjpj.SingleZc.Sbgg.bizc.ISbggBizc">
</bizc:service>
</bizc:logic>
2.2 在pczcageResource.xml中添加配置信息
<context:component-scan base-package="com.sgcc.mds.lcam.smfxjpj.SingleZc.Sbgg" />
2.4 在SbggController.java文件中：
package com.sgcc.mds.lcam.smfxjpj.SingleZc.Sbgg;
@Controller
@RequestMapping("/sbgg")
public class SbggController{
@Autowired
}
2.5 在SbggBizc.java文件中：
package com.sgcc.mds.lcam.smfxjpj.SingleZc.Sbgg.Bizc;
public class SbggBizc implements ISbggBizc{
@Autowired
private IHibernateDao hibernateDao;
}
2.6 在ISbggBizc.java文件中：
package com.sgcc.mds.lcam.smfxjpj.SingleZc.Sbgg.Bizc;
public interface ISbggBizc{
}
作者：渣成沙
来源：CSDN
原文：https://blog.csdn.net/github_34367377/article/details/82253763
版权声明：本文为博主原创文章，转载请附上博文链接！