常見問答

如何在user編輯時讓某一個欄位無法編輯?
首先，請至EEPCloud中點選左側RWD選到你要實作的那個表單，
並點選要做設定的該欄位的dataform或datagrid，然後點選右側的Columns。

接下來請找到你要設定的欄位，並點選Editor進去做設定。

最後勾選"Readonly"即可，這樣即可以達到使該欄位無法被新增修改。
如何在DataForm中，新增一個連結或按鈕打開另表單?
如下的JS範例，在"請假年度"的後方插入一個"請假狀況"的連結，並將申請人與請假年度傳送到"員工休假狀況表"的表當中。

$(function(){
$('<a style="vertical-align:middle;display:table-cell;padding-left:10px;cursor:pointer">請假狀況</ a>').insertAfter($('#dfMaster__請假年度')).click(function(){
if(window.top.addTab){
var user = $('#dfMaster__申請人').refval('getValue');
var year = $('#dfMaster__請假年度').dateselect('getValue');
window.top.addTab('員工休假狀況表','員工休假狀況表', 'bootstrap/員工休假狀況表?year=' + year + '&user=' + user); //打開表單
}
else{
alert('預覽無法打開此網頁')
}
});
})

另一個表單(如員工休假狀況表)的前端js

function dgMaster_onBeforeLoad(param)
{
var year = $.getParameter('year');
var user = $.getParameter('user');
if(year && user){
param.whereStr = "年度 = '" + year + "' AND 員工編號='" + user + "'";
// 設定 Datagrid的Where條件
}
}
如何以程式控制DataForm的關閉或存檔?
$('#dfMaster').form('close'); //關閉dataform
$('#dfMaster').form('submit'); //存檔dataform
如何讓RWD DataForm的欄位隱藏?
//適用欄位類型:textbox/textarea/numberbox/datebox/dateselect/options/combobox/refval
//$('#dfMaster_欄位').parent().parent().hide();
//$('[for="dfMaster_欄位"]').hide();

//適用欄位類型:multiinput
//$('#dfMaster_欄位').parent().parent().parent().hide();
//$('[for="dfMaster_欄位"]').hide();

//適用欄位類型:switch
//$('#dfMaster_欄位').parent().parent().hide();
//$('#dfMaster_欄位').parent().parent().prev().children().hide();

//適用欄位類型:fileupload
//$('#dfMaster_欄位').parent().hide();
//$('[for="dfMaster_欄位"]').hide();
如何更改DataForm欄位的底色?
$(function(){
$('#dfMaster_CustomerID').css('background-color', '#fdd');
})
dfMaster_CustomerID -> 請自行替換DataFormID + 欄位ID
#fdd -> 請自行替換顏色
DataForm中如何控制在存檔前再次檢查條件, 並不讓user保存?
function dfMaster_onApply()
{

var date = $('#dfMaster_進貨日期').datebox('getValue');
date = date.substr(0,4)+date.substr(5,2);

var closeym = $.getVariableValue('closeYM');
if (date <= closeym) {
$.alert("進貨日期小於結帳日, 無法保存",'info');
return false;
}
return true;
}
如何取得DataForm的編輯狀態?
var status = $('#dfMaster').form('status');
status的值如果是 view 代表是編輯狀態為"查看"，
inserted 代表是編輯狀態為"新增"，
updated 代表是編輯狀態為"修改"。
只有DataForm(表單)的情況下，可否一打開表單就進入新增狀態，存擋後並顯示該筆新增的資料。
加入DataForm的onLoad事件:
var firstTime = true;
function dfMaster_onLoad(row)
{
if(firstTime) {
firstTime = false;
$(this).form('insert_row'); // 進入新增
}
}

並在onApplied事件中, 顯示該新增的資料。
function dfMaster_onApplied(data)
{
var key = data[0].inserted[0].F001;
$(this).form('setWhere',"F001='"+key+"'");
$.alert('新增成功!! 編號:'+key,'info');
}
如何讓 DataForm的 Pagination可以隱藏不顯示, 只顯示 ToolItems即可?
貼入Literal 組件, 然後設定 HTML內容如下即可:

<style>
#dfMaster .pagination{
display:none
}
</style>
DataForm中, 如何用JS存取TextBox的內容?
textbox取值的方法為:
var year = $('#dfMaster_請假年月').val();

textbox設值的方法為:
$('#dfMaster_請假年月').val(yymm);
如何在前端的DataForm編輯時顯示時鐘, 且此時鐘為Server端的時間?
可以透過以下的 JS 程式來完成:
var firstTime = true; //僅Load網頁時第一次才執行.
var serverDate = ''; //設定Server端日期時間的共用變數
function dfMaster_onLoad(row) // 讓DataForm自動進入新增狀態
{
if(firstTime) {
firstTime = false;
$(this).form('insert_row'); //新增一筆資料
serverDate = $.getVariableValue('now'); //取得Server端日期間
showtime();
}
}
function showtime()
{
var currtime = new Date(serverDate).Format('yyyy-MM-dd hh:mm:ss'); //取得Server端日期時間變數
$('#dfMaster_日期時間').val(currtime); // 設定打卡的時間日期
if ($('#dfMaster').form('status')=='inserted') {
var systemTime = new Date(serverDate).getTime()+1000; //將serverDate轉成數值+1000毫秒
serverDate = new Date(systemTime); //重新存回serverDate
setTimeout('showtime()',1000); //1秒以後重新執行showtime()
}
}
在DataForm中, 如何取得 #O Options的選擇內容?
如下, 可以透過以 selectoptions()的方法來取得:
function dfMaster_onApply()
{
var date1 = $('#dfMaster_申請日期').datebox('getValue');
var date2 = $('#dfMaster_請假日期').datebox('getValue');
var type = $('#dfMaster_請假類型').selectoptions('getValue');
if (type=='特休假' && date1 < date2) {
$.alert("特休假至少需前1日申請之",'info');
return false;
}
return true;
}
DataForm輸入時, 如何控制不同的欄位條件, 要自動控制那些欄位可以輸入(控制Readonly)?
如下例, 用戶選擇 Options條件後, 可以控制另一個欄位是否可以輸入, 設定其Readonly屬性:
function dfMaster_請假類型_onSelect(value)
{
if (value=='特休假') {
$('#dfMaster_特休假年度').setReadonly(false);
}
else {
$('#dfMaster_特休假年度').setReadonly(true)
}
}
DataForm有多個頁簽, 如何控制不同的人可以編輯不同的頁簽? (頁簽如何隱藏)
可以透過DataForm的onLoad事件來控制, 並判斷沒有權限的人, 將頁簽隱藏即可, 如下JS程式:
function dfMaster_onLoad(row)
{
var groups = $.getVariableValue('groups');
if (groups.indexOf("80")<0) { // 找不到"80"的群組角色
var tabID = 'tabMaster'; // 設定要隱藏的 Tab
var index = 1; // 第幾頁要隱藏 (從0開始算)
$('[href="#'+ tabID + '_'+ index +'"]').hide();
}
}
如何針對#G Group群組裡的所有欄位進行ReadOnly處理?
var fs = $('#dpgroup_借用資訊_M_CU').closest('fieldset');//取得欄位群組
fs.find('.form-control').setReadonly(true);
//設所有欄位為readonly，反之設成false即可
如何取得DataForm欄位Refval的TextValue的值?
Refval的取值方式為:
$(target).closest('.row').find('.refval-text').val();

例如:
$('#dfMaster_客戶編號').closest('.row').find('.refval-text').val();

DataForm中的各種欄位讀取值與設定值方法都不一樣，如下:

類型	取值	給值
TextBox	$(target).val();	$(target).val(value);
TextArea	$(target).val();	$(target).val(value);
Combobox	$(target).combobox('getValue');	$(target).combobox('setValue',value);
Refval	$(target).refval('getValue');	$(target).refval('setValue',value);
Optons	$(target).selectoptions('getValue');	$(target).selectoptions('setValue',value);
Numberbox	$(target).val();	$(target).val(value);
Datebox	$(target).datebox('getValue');	$(target).datebox('setValue',value);
Datetimebox	$(target).datebox('getValue');	$(target).datebox('setValue',value);
Timebox	$(target).timebox('getValue');	$(target).timebox('setValue',value);
Switch	$(target).switch('getValue');	$(target).switch('setValue',value);
Slider	$(target).slider('getValue');	$(target).slider('setValue',value);
DateSelect	$(target).dateselect('getValue');	$(target). dateselect ('setValue',value);

如何使DataForm所有欄位caption位置都靠左?
先於工具箱拉出一個Literal，並於HTML中寫下CSS:
<style>
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: left;
}
}
</style>
如何調整某一個DataForm欄位caption位置靠左?
舉例如下:
$('[for="dfMaster_員工編號"]').css('text-align', 'left');
DataForm如何動態更換標題及欄位顏色?
舉例如下:
DataForm標題顏色
$('[id="modalLabel"]').css('color', 'red');

欄位標題
$('[for="dfMaster_員工編號"]').css('color', 'blue');

欄位值
$("#dfMaster_員工編號").css('color', 'green');
DataForm中的DefaulValue通常是新增的時後帶入預設值, 如果想要更改的時後也帶入值, 要如何處理?
可以用 DataForm的onLoad事件來處理, 如下:
function dfMaster_onLoad(row)
{
var memo = $('#dpMaster2_常規準備事項').val();
if (memo.length == 0) {
var def = $('#dfMaster').form('getDefaultValues').常規準備事項;
$('#dpMaster2_常規準備事項').val(def);
}
}
DataForm輸入後, 如何取得自動編號或存檔之後的值?
可以使用 onApplied() 事件來處理, 如下:
function dfMaster_onApplied(data)
{
if (data[0].inserted.length > 0) // 新增才處理
{
var row=data[0].inserted[0]; // 取得剛剛insert的那一筆資料
var repno = row.報修編號; // 取得報修編號
var date = row.報修日期;
var man = row.報修人;
$.callMethod('報修服務紀錄','sendMail',{repno1:repno,date1:date,man1:man},function(err,result)
{
if(err)
{
alert(err);
}
else $.alert('已報修並發送給管理中心','info');
}
});
}
return true;
}
請問如何更換 DataForm 的Title標題?
可以利用 onLoad事件即可, 如下:
function dfMaster_onLoad(row)
{
$('#dfMaster').find('.modal-title').html(row.F001); // F001為欄位名稱
}
如何控制 DataForm的欄位標題與內容的寬度?
原來DatForm在sm模式下(電腦或平板頁面), 標題佔2/12, 欄位佔 4/12, 所以可以左右可以放2個欄位，如果想把標題加大到 3/12, 欄位縮小到 3/12(兩個一樣寬), 如下的程式:
* 更換DataForm的Title與欄位寬度
function dgMaster_onLoad(data)
{
$('#dfMaster').find(".col-sm-4").removeClass("col-sm-4").addClass("col-sm-3"); //把所有的 col-sm-4 換成 col-sm-3
$('#dfMaster').find(".col-sm-2").removeClass("col-sm-2").addClass("col-sm-3"); //把所有的 col-sm-2 換成 col-sm-3
}
DataForm使用到了ToolItems時會順便把導航條(操作上下筆)給顯示出來, 可否將導航條給隱藏?
可以, 請貼入一個 Literal組件, 在Html中設定以下的CSS即可:
<style>
#dfMaster .pagination{
display:none
}
</style>
可以控制 DataForm存檔後不關閉嗎? 為了能及時存檔並取得最新的資料。
可以，如下的JS程式:
$(function(){
$('#dfMaster').on('hide.bs.modal', function(e) { // DataForm關閉時執行
if($(this).data('isApply')){ // 判斷 isApply是否為True
e.preventDefault(); //取消關閉DataForm的動作
$(this).removeData('isApply'); // 再把isApply變數清除
}
});
})
function dfMaster_onApply()
{
$(this).data('isApply', true); //存檔前設定 isApply變數為True
return true;
}
如何透過JS動態控制DataGrid的Where條件?
舉例如下:
function dfMaster_onLoad()
{
$('#dgMaster ').datagrid('setWhere',"你的where條件");
}
如何透過JS動態控制Refval的Where條件?
舉例如下:
function dfMaster_onLoad()
{
$('#dfMaster_欄位').refval('setWhere',"你的where條件");
}
如何透過JS動態控制Combobox的Where條件?
舉例如下:
function dfMaster_onLoad()
{
//Combobox選項來源必須來自RemoteName而非Item
$('#dfMaster_欄位').combobox('setWhere',"你的where條件");
}
DataForm新增資料後如何自動匯出Word?
透過DataForm的OnApplied事件來處理，程式碼如下：

function dfMaster_onApplied(data)
{
if (data.inserted.length>0) { // 當Insert時才處理
$('#dgMaster').children("tbody").children("tr").removeAttr("class"); //離開選中哪一筆
$('#dgMaster').children("tbody").children("tr:last").attr("class", "selected info"); // 選中目前頁最後一筆
$('#dgMaster').datagrid('exportWord'); //調用輸出Word的功能
}
}
如何控制使用者的游標進入DataForm的某個欄位？
舉例如下:
$('#dfMaster_英文姓名').focus(); // 進入英文姓名編輯
如何針對整個DataForm或指定頁籤底下的所有欄位ReadOnly?
如下的程式:
//如何Tab頁籤底下的所有欄位設為ReadOnly
$("#tabMaster_1").find('.form-control').setReadonly(true);
//如何將DataForm底下的所有欄位設為ReadOnly
$("#dfMaster").find('.form-control').setReadonly(true);
Signature簽名組件簽名時，可否自動設定簽名日期時間?
可以利用 Sinature的onChange事件來處理, 如下:
function dfMaster_簽收_onChange()
{
$('#dfMaster_簽收日期時間').val(new Date().Format('yyyy-MM-dd hh:mm:ss'));
}
如何透過js關閉DataForm?
舉例:
$('#dfMaster').modal('hide');
如何動態改變DataForm欄位caption名稱?
舉例:
function dfMaster_onLoad(row)
{
$('[for="dfMaster_姓名"]')[0].innerText = '測試';
}
如何透過js觸發DataForm的Validate元件的檢查機制?
舉例:
$('#dfMaster').form('validate');
DataForm在Mode為Panel時, 顯示的狀態為唯讀的狀態, 如何讓他進入編輯狀態？
可以在需要編輯的時候, 執行下列 JS語法即可:
$('#dfMaster').form('status', 'updated');
或者:
$('#dfMaster').form('edit_row');
如何用js控制#G DataPanel的縮放?
$('id').closest('form').hide() // 找任一群組內的欄位ID
js舉例:
$('#dpgroup_家庭資料_家庭背景描述').closest('form').hide(); //隱藏
$('#dpgroup_家庭資料_家庭背景描述').closest('form').show(); //顯示