' + data['USER_ID'] + '-' + data['AD_ID'] + '-' + data['USER_NAME'] + ' #' + data['EXT'] + '
'; } } }); $('.typeahead').on('typeahead:select', function(event, data) { selectFunc(event, data); }); $('.typeahead').on('typeahead:change ', function(event, data) { // console.log('change : ' , data); }); $('.js_typeahead_reset_btn').on('click',function(){ $('.js_typeahead_reset').each(function(index,el){ $(el).val(''); }); }); // for(var i = 1;i<=5;i++){ // if($('.js_typeahead_reset_btn_'+i).length > 0){ // $('.js_typeahead_reset_btn_'+i).on('click',function(){ // $('.js_typeahead_reset_'+i).each(function(index,el){ // $(el).val(''); // }); // }); // } // } } function isEmpty(str){ if(str === undefined || str.trim() === "" || str === null){ return true; } return false; } function getEditDataStr(beforDate,afterData){ var resultTextArr = []; for(var key in beforDate){ if (afterData[key] !== undefined && beforDate[key] != afterData[key] ){ if (beforDate[key] == null && afterData[key] == '') continue; resultTextArr.push(key+":"+beforDate[key]+"=>"+afterData[key]); } } if(resultTextArr.length > 0){ return resultTextArr.join(","); }else{ return ""; } } /* ==============================================================================================*/ function responseHandler(res) { $.each(res.rows, function (i, row) { row.state = $.inArray(row.dv_no, selections) !== -1; }); return res; } function getHeight(_height) { var _height = _height || 110; return $(window).height() - $(".panel-heading").height() - _height; } // function getQueryParams(params){ // var queryParams = {}; // $(".query").each(function(i,e){ // var id = (e.id).replace("q_",""); // queryParams[id]=$(e).val(); // }); // $.extend(queryParams,params); // console.log("getQueryParams",queryParams); // return queryParams; // } function getQueryParams(params){ var queryParams = {}; $(".query").each(function(i,e){ var id = (e.id).replace("q_",""); queryParams[id]=$(e).val(); }); $.extend(queryParams,params); return queryParams; } /* bootsrap table formatter */ function detailFormatter(index, row) { var html = []; var trans = []; $.each(row, function (key, value) { if (key != 'total' && key != 'check'){ var name=(trans[key] === undefined) ? key: trans[key]; var value=(value === null || value === undefined ) ? '': value; html.push('' + name + ': ' + value + '
'); } }); return html.join(''); } function operateFormatter(value, row, index) { return [ '', '', ' ', '', '', ' ', '', '', '' ].join(''); } function editFormatter(value, row, index){ return [ '', '', '' ].join(''); } function yesNoFormatter(value,row,index){ return (value == 1)?'是':'否'; } function snFormatter(value,row,index) { return index+1; } function scanNumberFormatter(data) { return (data == 1)?'是':'否'; } function totalTextFormatter(data) { return 'Total'; } function totalNameFormatter(data) { return data.length; } function nowrapFormatter(){ return { css:{"whiie-space":"nowrap"}} ; } function totalPriceFormatter(data) { var total = 0; $.each(data, function (i, row) { total += +(row.price.substring(1)); }); return '$' + total; } // function buildTable($el) { // var i, j, row, // columns = [], // data = []; // var opt = $el.bootstrapTable('getOptions'); // var fixedColumnsOption = { fixedColumns: true,fixedNumber: +$('#fixedNumber').val()}; // $.extend(opt,fixedColumnsOption); // console.log("bootstrap_option",opt); // $el.bootstrapTable('destroy').bootstrapTable(opt); // } $(window).resize(function () { var $table = $table || null; if($table !== null){ $table.bootstrapTable('resetView', { height: getHeight() }); } }); ``` 選項設定預設值 ```JavaScript var DEFAULTS = { height: undefined, classes: 'table table-bordered table-hover', buttons: {}, theadClasses: '', headerStyle: function headerStyle(column) { return {}; }, rowStyle: function rowStyle(row, index) { return {}; }, rowAttributes: function rowAttributes(row, index) { return {}; }, undefinedText: '-', locale: undefined, virtualScroll: false, virtualScrollItemHeight: undefined, sortable: true, sortClass: undefined, silentSort: true, sortName: undefined, sortOrder: undefined, sortReset: false, sortStable: false, rememberOrder: false, serverSort: true, customSort: undefined, columns: [[]], data: [], url: undefined, method: 'get', cache: true, contentType: 'application/json', dataType: 'json', ajax: undefined, ajaxOptions: {}, queryParams: function queryParams(params) { return params; }, queryParamsType: 'limit', // 'limit', undefined responseHandler: function responseHandler(res) { return res; }, totalField: 'total', totalNotFilteredField: 'totalNotFiltered', dataField: 'rows', footerField: 'footer', pagination: false, paginationParts: ['pageInfo', 'pageSize', 'pageList'], showExtendedPagination: false, paginationLoop: true, sidePagination: 'client', // client or server totalRows: 0, totalNotFiltered: 0, pageNumber: 1, pageSize: 10, pageList: [10, 25, 50, 100], paginationHAlign: 'right', // right, left paginationVAlign: 'bottom', // bottom, top, both paginationDetailHAlign: 'left', // right, left paginationPreText: '‹', paginationNextText: '›', paginationSuccessivelySize: 5, // Maximum successively number of pages in a row paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page. paginationUseIntermediate: false, // Calculate intermediate pages for quick access search: false, searchHighlight: false, searchOnEnterKey: false, strictSearch: false, regexSearch: false, searchSelector: false, visibleSearch: false, showButtonIcons: true, showButtonText: false, showSearchButton: false, showSearchClearButton: false, trimOnSearch: true, searchAlign: 'right', searchTimeOut: 500, searchText: '', customSearch: undefined, showHeader: true, showFooter: false, footerStyle: function footerStyle(column) { return {}; }, searchAccentNeutralise: false, showColumns: false, showColumnsToggleAll: false, showColumnsSearch: false, minimumCountColumns: 1, showPaginationSwitch: false, showRefresh: false, showToggle: false, showFullscreen: false, smartDisplay: true, escape: false, filterOptions: { filterAlgorithm: 'and' }, idField: undefined, selectItemName: 'btSelectItem', clickToSelect: false, ignoreClickToSelectOn: function ignoreClickToSelectOn(_ref) { var tagName = _ref.tagName; return ['A', 'BUTTON'].includes(tagName); }, singleSelect: false, checkboxHeader: true, maintainMetaData: false, multipleSelectRow: false, uniqueId: undefined, cardView: false, detailView: false, detailViewIcon: true, detailViewByClick: false, detailViewAlign: 'left', detailFormatter: function detailFormatter(index, row) { return ''; }, detailFilter: function detailFilter(index, row) { return true; }, toolbar: undefined, toolbarAlign: 'left', buttonsToolbar: undefined, buttonsAlign: 'right', buttonsOrder: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'], buttonsPrefix: CONSTANTS.classes.buttonsPrefix, buttonsClass: CONSTANTS.classes.buttons, icons: CONSTANTS.icons, iconSize: undefined, iconsPrefix: CONSTANTS.iconsPrefix, // glyphicon or fa(font-awesome) loadingFontSize: 'auto', loadingTemplate: function loadingTemplate(loadingMessage) { return "\n ".concat(loadingMessage, "\n \n \n "); }, onAll: function onAll(name, args) { return false; }, onClickCell: function onClickCell(field, value, row, $element) { return false; }, onDblClickCell: function onDblClickCell(field, value, row, $element) { return false; }, onClickRow: function onClickRow(item, $element) { return false; }, onDblClickRow: function onDblClickRow(item, $element) { return false; }, onSort: function onSort(name, order) { return false; }, onCheck: function onCheck(row) { return false; }, onUncheck: function onUncheck(row) { return false; }, onCheckAll: function onCheckAll(rows) { return false; }, onUncheckAll: function onUncheckAll(rows) { return false; }, onCheckSome: function onCheckSome(rows) { return false; }, onUncheckSome: function onUncheckSome(rows) { return false; }, onLoadSuccess: function onLoadSuccess(data) { return false; }, onLoadError: function onLoadError(status) { return false; }, onColumnSwitch: function onColumnSwitch(field, checked) { return false; }, onPageChange: function onPageChange(number, size) { return false; }, onSearch: function onSearch(text) { return false; }, onToggle: function onToggle(cardView) { return false; }, onPreBody: function onPreBody(data) { return false; }, onPostBody: function onPostBody() { return false; }, onPostHeader: function onPostHeader() { return false; }, onPostFooter: function onPostFooter() { return false; }, onExpandRow: function onExpandRow(index, row, $detail) { return false; }, onCollapseRow: function onCollapseRow(index, row) { return false; }, onRefreshOptions: function onRefreshOptions(options) { return false; }, onRefresh: function onRefresh(params) { return false; }, onResetView: function onResetView() { return false; }, onScrollBody: function onScrollBody() { return false; }, onTogglePagination: function onTogglePagination(newState) { return false; } }; ``` # 【ES6】其他新語法 ### 預設值 ```JavaScript function sum(a, b = 1) { // 加入預設值避免錯誤 return a + b; } console.log(sum(1)); ``` # 【ES6】物件拷貝 淺層拷貝(只複製一層，內容物件還是參考至同一位址) ```JavaScript const person = { name: '小明', obj: {} } const person2 = {...person} //方法1 const person3 = Object.assign({},person); //方法2 ``` 深層拷貝 ```JavaScript const person = { name: '小明', obj: {} } // 使用josn轉成字串，再轉回物件 const person2 = JSON.parse(JSON.stringify(person)) ``` # 【ES6】物件拷貝 淺層拷貝(只複製一層，內容物件還是參考至同一位址) ```JavaScript const person = { name: '小明', obj: {} } const person2 = {...person} //方法1 const person3 = Object.assign({},person); //方法2 ``` 深層拷貝 ```JavaScript const person = { name: '小明', obj: {} } // 使用josn轉成字串，再轉回物件 const person2 = JSON.parse(JSON.stringify(person)) ``` # 【ES6】非同步 與 promise 非同步 ```JavaScript function getData() { setTimeout(() => { console.log('... 已取得遠端資料'); }, 0); } // 請問取得資料的順序為何 function init() { console.log(1); getData(); console.log(2); } init(); ////////////// result 1 2 ... 已取得遠端資料 ``` premise 使程式流程同步 ```JavaScript const promiseSetTimeout = (status) => { return new Promise((resolve, reject) => { setTimeout(() => { if (status) { resolve('promiseSetTimeout 成功') } else { reject('promiseSetTimeout 失敗') } }, 0); }) } // #2-1 基礎運用 (成功用 then 捕捉, 失敗用 catch捕捉) // 呼叫成功 console.log(1) promiseSetTimeout(1) .then((res)=>{ console.log(res); }) .catch((err)=>{ console.log(err); }) console.log(2) /** result 1 promiseSetTimeout 成功 2 */ // 呼叫失敗 console.log(1) promiseSetTimeout(2) .then((res)=>{ console.log(res); }) .catch((err)=>{ console.log(err); }) console.log(2) /** result 1 promiseSetTimeout 失敗 2 */ ``` promise 串接 ( 不使用巢狀寫法) ```JavaScript promiseSetTimeout(1) .then((res)=>{ console.log(res); // 使用return 發起第二次非同步 return promiseSetTimeout(1); }) // 第二次非同步成功 .then((res) => { console.log("第二次非同步成功"); }) ``` # 【ES6】展開 ### 合併陣列 ```JavaScript const groupA = ['小明', '杰倫', '阿姨']; const groupB = ['老媽', '老爸']; const groupC = [...groupA,...groupB]; //'小明', '杰倫', '阿姨', '老媽', '老爸' ``` ### 繼承物件 ```JavaScript const methods = { fn1() { console.log(1); }, fn2() { console.log(1); }, } const methods2 = { ...methods, fn3(){ console.log(1); } } ``` ### 轉換為純陣列 ```JavaScript // NodeList 或 HTMLCollection 或 Arguments 是「類陣列」的物件 // 無法使用 map 等純物件的方法 const doms = document.querySelectorAll('li'); console.log(doms); // 轉為純陣列 const newDom = [...doms]; newDom.map((item,i)=>{ console.log(i); }); ``` # 【ES6】陣列方法 [https://www.youtube.com/watch?v=\_vFuDQ\_6Xt8](https://www.youtube.com/watch?v=_vFuDQ_6Xt8) # 【ES6】箭頭函式 ### 改寫原 functoin ```JavaScript // 傳統寫法 function fn(a, b) { return a * b; } // 箭頭函式 const fn = (a, b) => { return a * b; } // 省略 return const fn = (a, b) => { a * b; } ///////////////////////////// function fn(name) { return "Hello"+name; } // 單行省略 return , {} const fn = (name) => "Hello "+name; ``` ### this 指向不會指向全域，而是指向自己 ```JavaScript var name = '全域' const person = { name: '小明', callName: function () { console.log('1', this.name); // 1 小明 setTimeout(function () { console.log('2', this.name); // 2 全域 console.log('3', this); // 3 window }, 10); }, } ``` # 【ES6】賦值解構 ### 取出特定值作為變數 ```JavaScript // #1 取出特定值作為變數 const person = { name: '小明', age: 16, like: '鍋燒意麵' } const {name, age} = person; console.log(name, age); // 小明, 16 ``` ### 陣列解構| 特性 | || (OR) | ?? (Nullish) |
|---|---|---|
| **觸發預設值的條件** | 任何 Falsy 值 (0, "", false...) | 僅限 null 或 undefined |
| **對 0 的處理** | 視為 False，會被預設值覆蓋 | 視為有效值，保留 0 |
| **對 "" (空字串) 的處理** | 視為 False，會被預設值覆蓋 | 視為有效值，保留 "" |
| **設計目的** | 廣泛的邏輯備案 | 精確處理「缺失資料」 |