[轉]UAP studio基礎使用技巧
作者：渣成沙
來源：CSDN
原文：https://blog.csdn.net/github_34367377/article/details/82253763
找到前輩寫的uap使用技巧，解決了獲取當前登入使用者問題，開心
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路徑白名單
3config下配置xfire
4config下配置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
/**
* 匯出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
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%”
一.uap初級使用
1.佈局控制元件
建立一個佈局控制元件主要包括以下步驟：
匯入所需的js類。
建立例項。
將例項新增到容器中。
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.4Tab頁
(1)建立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.6panel
//去除panel2右側的檢視
me.view.vsplit2.removeControl(me.view.vsplit2.controls[4]);
me.view.vsplit2.addControl( me.getSingleIdx(),1);
2. 建立一個表格
建立一個表格主要也包括以下步驟：
匯入建立表格所需的js類。
定義與表格互動資料的伺服器url。
建立表格資料容器。
建立表格例項
呼叫表格load方法。
將表格新增到容器中。
//1.匯入類程式碼
$import("mx.datacontainers.GridEntityContainer");
$import("mx.datacontrols.DataGrid");
//2.定義服務端url
var restUrl = "~/mxdemo/rest/uapsb/";
/* 初始化表單資料容器EntityContainer */
me.gridEntityContainer=new mx.datacontainers.GridEntityContainer({
baseUrl : restUrl,
iscID : "-1", // iscID 是資料元素的統一許可權功能編碼。預設值為 "-1" ，表示不應用許可權設定
loadMeta :false //不會更新資料庫驗證欄位
primaryKey: "objId"
});
//3. 建立表格例項
//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.1ToorBar
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型別：獲取或設定編輯器的型別
CheckEditor
TextEditor 文字框
DateTimeEditor DATETIME 日期時間。例如：2007-07-01 14:28:32
DropDownEditor 下拉框
LinkEditor
NumberEditor 數字編輯器
TimeEditor TIME 時間。例如：14:28:32
預設值：TextEditor
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.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.2Toolbar方法
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)
{
node