Java Script 學習

 │  更新│ 閱讀時長 ≈ 8 分鐘│ 本文字數 ≈ 1249個字

此文章主要是在撰寫Web網頁時，使用Java Script及Kendo UI的學習心得。

文字框

Enable/Disable

1
2
3
4
// - Disabled
$("#fm_id").attr("disabled", "disabled ");
// - Enabled
$("#fm_id").removeAttr("disabled");

取值

1
$('#fm_id').text()

設定值

1
$('#fm_id').text("xxx")

提示

1
document.getElementById("fm_id").placeholder = "xxx";
1
$("#fm_id").attr("placeholder", "XXX");

監聽變化

1
2
3
4
//監聽變化: 失去focus時生效
$("#fm_id").on("change", function (e) { 

} );

監聽變化 - 即時

1
2
3
4
//監聽變化: 即時
$("#fm_id").bind('input propertychange', function () {

});

設定文字顏色

設定欄位style

1
$('#fm_id').css('color', 'red');

數字

Enable/Disable

1
2
3
4
// - Disabled
$("#fm_id").attr("disabled", "disabled ");
// - Enabled
$("#fm_id").removeAttr("disabled");

取值

撰寫一個共用函數轉換，傳入id為欄位編碼

1
2
3
function getValue(id){
return (!!$("#" + id).val() && !isNaN($("#" + id).val())) ? $("#" + id).val() : '0';
}

要取值時只要使用此函式即可。

1
getValue('fm_id');

設定值

1
$("#fm_id").data("kendoNumericTextBox").value(25);

設定空值

1
$("#fm_id").data("kendoNumericTextBox").value(null);

客製化控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
   客製化控件
   - Spinners : (右方)數值上下鍵調整 顯示/隱藏
   - Round: 是否要四捨五入
   - Step: 按鍵盤上下鍵是否可調整
   - Format: 0.000: 小數點後三位四捨五入，多餘的0不省略
             ##,#.###: 具有千分位, 且小數點後三位四捨五入, 多餘的0省略
*/
$("#fm_id").kendoNumericTextBox({
   min: -99999.999,
   max: 99999.999,
   format: '0.000',
   step: 0,
   decimals: 3,           
   round: false,
   spinners: false           
});

千分位

當數值欄位想顯示千分位時，可以將數值帶入以下函數做轉換。(如: 10000 -> 10,000)

1
2
3
4
5
6
function FormatNumber(n) {
   n += "";
   var arr = n.split(".");
   var re = /(\d{1,3})(?=(\d{3})+$)/g;
   return arr[0].replace(re, "$1,") + (arr.length == 2 ? "." + arr[1] : "");
}

四捨五入

當數值欄位需要四捨五入時，可使用以下函式做轉換，帶入原本數值和要四捨五入到第幾位的小數位數。

1
2
3
　function MathRound(val, precision) {
return Math.round(Math.round(val * Math.pow(10, (precision || 0) + 1)) / 10) / Math.pow(10, (precision || 0));
　}

日期控件

Enable/Disable

1
$("#fm_id").data("kendoDatePicker").enable(true/false)

設定值

1
$("#fm_id").data("kendoDatePicker").value(new Date(2021, 12, 15))

計算日期相差天數

1
2
3
4
5
6
var start = $("#fm_id").val();
var end = $("#fm_id").val();
var startDate = new Date(start)
var endDate = new Date(end)

var diff = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);

日期轉換

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
 javascript 日期轉換
 - 新版的js已經移除format方法，使用 new Date().format('yyyy-MM-dd') 會得到(intermediate value).Format is not a function的錯誤。
   只能自行轉換或使用lib。
*/
var formatDate = function (date) {
   var y = date.getFullYear();
   var m = date.getMonth() + 1;
   m = m < 10 ? '0' + m : m;
   var d = date.getDate();
   d = d < 10 ? ('0' + d) : d;
   return y + '-' + m + '-' + d;
};

監聽變化

1
2
3
$('#fm_id').on('change', function () {
   var time = this.value
});

更改格式

1
2
3
$("#fm_id").data("kendoDateTimePicker").setOptions({
   timeFormat: 'hh:mm'
});

卡控日期選單

1
2
3
4
5
6
7
8
9
10
11
12
13
// - ex: 卡控從上月25日後才能選
$("#fm_id").kendoDateTimePicker({
   value: new Date(),
   disableDates: function (date) {
       var currentDate = new Date();
       var beforeDate = new Date(currentDate.getFullYear(), currentDate.  getMonth() - 1, 25);
       if (date > beforeDate) {
           return false;
       } else {
           return true;
       }
   }
});

增加日期prototype

1
2
3
4
5
6
7
8
//增加日期prototype, 可計算日期時間 
new Date().addHours(1);

Date.prototype.addHours = function (noOfHours) {
   var tmpDate = new Date(this.valueOf());
   tmpDate.setHours(tmpDate.getHours() + noOfHours);
   return tmpDate;
}

單選控件

Disable/Enable

使用F12查詢radio button name & value

name = order_Completed
value = 1

1
2
3
4
5
// - Disable
$("input[name='order_Completed'][value='1']").attr("disabled", "disabled");

// - Enable
$("input[name='order_Completed'][value='1']").removeAttr("disabled");

取得單選框被選取的值

Step 1: 使用F12查詢radio button name

Step 2: 在js中監聽radio button的變化和取得選取的值。

1
2
3
$('input:radio[name="order_Completed"]').click(function () {
    var checkValue = $('input:radio[name="order_Completed"]:checked').val();
});

複選控件

Disable/Enable

使用F12查詢checkbox button name & value

name = feedback
value = 內訓開課或簡報分享

1
2
3
4
5
// - Enable:
$("input[name='feedback'][value='內訓開課或簡報分享']").removeAttr("disabled");

// - Disable:
$("input[name='feedback'][value='內訓開課或簡報分享']").attr("disabled", "disabled");

Checked/Unchecked

1
$("input[name='feedback'][value='內訓開課或簡報分享']").attr("checked", true/false);

列出所有被checked的元件

1
2
3
$('#fm_id').find(':checkbox:checked').each(function () {
   
});

checked數量

1
$('input:checkbox[name='feedback']:checked').length;

取得複選框被選取的值

1
$('input:checkbox[name='feedback']:checked').val();

取消全部的勾選

1
2
3
$('#fm_id').find(':checkbox:checked').each(function () {
   $(this).prop("checked", false);
});

下拉式選單

Disable/Enable

1
$("#fm_id").data("kendoDropDownList").enable(true/false);

設定值

1
$("#fm_id").data("kendoDropDownList").value("0")

設定唯讀

1
$("#fm_id").data("kendoDropDownList").readonly(true/false);

取得選取值

1
$('#fm_id').val()

取得選取文字

1
$('#fm_id').find(':selected').text()

取得選取Index

1
var index = $('#fm_id').data("kendoDropDownList").selectedIndex;

取得選取物件

1
var model = $("#fm_id").data("kendoDropDownList").dataSource._data[index];

動態設定內容

1
2
var dropdownlist = $("#fm_id").data("kendoDropDownList");
dropdownlist.setDataSource(response);

設定模糊查詢

1
2
3
$("#fm_id").data("kendoDropDownList").setOptions({
   filter: "contains"
});

監聽變化

1
2
3
$('#fm_id').on('change', function () {

});

通用控件

Disable/Enable

1
2
3
4
// - Enable
$('#fm_id').select2("enable");
// - Disable:
$('#fm_id').select2("enable", false);

設定值

1
$("#fm_id").select2('data', { value: xxx, display: xxx});

Java Script 學習

https://nickcarter9.github.io/2021/12/08/2021/2021_12_08_GAIA_FORM_Design/

作者

Nick Lin

發表於

2021-12-08

更新於

2023-01-18

許可協議

 

評論

追蹤

廣告

連結

×