Benny的網站開發筆記

// ---修改第一處，添加引用 upload
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'upload'], function ($, undefined, Backend, Table, Form, Upload) {
var Controller = {
index: function () {
// 初始化表格參數配置
Table.api.init({
extend: {
index_url: 'test/index' + location.search,
add_url: 'test/add',
edit_url: 'test/edit',
del_url: 'test/del',
multi_url: 'test/multi',
import_url: 'test/import',
table: 'test',
}
});
var table = $("#table");
// ---修改第二處開始---
//當表格數據加載完成時
table.on('load-success.bs.table', function (e, data) {
Upload.api.upload($('.btn-upload'), function (data, ret) {
Fast.api.ajax({
url: $.fn.bootstrapTable.defaults.extend.edit_url + '/ids/' + $(this).data('id'),
data: {'row[image]': data.url},
}, function (data, ret) {
// 完成後刷新表
table.bootstrapTable('refresh');
});
});
});
// ---修改第二處結束---
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'weigh',
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'title', title: __('Title'), operate: 'LIKE', editable: true},
{
field: 'image',
title: __('Image'),
operate: false,
events: Table.api.events.image,
// ---修改第三處，修改 formatter
formatter: function (value, row, index) {
if (value) {
return Table.api.formatter.image.call(this, value, row, index);
} else {
return '<a href="javascript:;" class="btn btn-danger btn-upload" data-id="' + row.id + '" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false">上傳</a>';
}
}
},
{
field: 'operate',
title: __('Operate'),
table: table,
events: Table.api.events.operate,
formatter: Table.api.formatter.operate
}
]
]
});
// 為表格綁定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});

須知：語言選擇中文，現在lang配置已經失效;可用: $.datetimepicker.setLocale(‘ch’);
$('#datetimepicker').datetimepicker({
value: '' // 設定當前datetimepicker的值
rtl: false, // false 預設顯示方式 true timepicker和datepicker位置變換
format: 'Y/m/d H:i', // 設定時間年月日時分的格式 如: 2016/11/15 18:00
formatTime: 'H:i', // 設定時間時分的格式
formatDate: 'Y/m/d', // 設定時間年月日的格式
startDate: false, // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
step: 10, // 設定時間時分的間隔
closeOnDateSelect: false, // true 設定datepicker可點選 false 設定datepicker不可點選 實際上可以雙擊
closeOnTimeSelect: true, // true 設定timepicker可點選 false 設定timepicker不可點選
closeOnWithoutClick: true, // true 設定點選input可以隱藏datetimepicker false 設定點選input不可以隱藏datetimepicker
closeOnInputClick: true, // true 設定點選input可以隱藏datetimepicker false 設定點選input不可以隱藏datetimepicker (會有閃動 先隱藏 再顯示)
timepicker: true, // true 顯示timepicker false 隱藏timepicker
datepicker: true, // true 顯示datepicker false 隱藏datepicker
weeks: false, // true 顯示週數 false 隱藏週數
defaultTime: false, // 如果輸入值為空 可用來設定預設顯示時間 use formatTime format (ex. '10:00' for formatTime: 'H:i')
defaultDate: false, // 如果輸入值為空 可用來設定預設顯示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
minDate: false, // 設定datepicker最小的限制日期 如：2016/08/15
maxDate: false, // 設定datepicker最大的限制日期 如：2016/11/15
minTime: false, // 設定timepicker最小的限制時間 如：08:00
maxTime: false, // 設定timepicker最大的限制時間 如：18:00
allowTimes: [], // 設定timepicker顯示的時間 如：allowTimes:['09:00','11:00','12:00','21:00']
opened: false, // false預設開啟datetimepicker可關閉 true開啟datetimepicker後不可關閉
initTime: true, // 設定timepicker預設時間 如：08:00
inline: false, // ture設定datetimepicker一直顯示
theme: '', // ture設定datetimepicker顯示樣式 如: 'dark'
withoutCopyright: true, // ture預設隱藏左下角'xdsoft.net'連結 false 顯示左下角'xdsoft.net'連結
inverseButton: false, // false 預設 true datepicker的上一月和下一月功能互換 timepicker的上下可點選按鈕功能互換
hours12: false, // true設定12小時格式 false設定24小時格式
next: 'xdsoft_next', // 設定datepicker上一月按鈕的樣式
prev : 'xdsoft_prev', // 設定datepicker下一月按鈕的樣式
dayOfWeekStart: 0, // 設定預設第-列為周幾 如：0 週日 1 週一
parentID: 'body', // 設定父級選擇器
timeHeightInTimePicker: 25, // 設定timepicker的行高
timepickerScrollbar: true, // ture設定timepicker顯示滑動條 false設定timepicker不顯示滑動條
todayButton: true, // ture顯示今天按鈕 false不顯示今天按鈕 位置在datepicker左上角
prevButton: true, // ture顯示上一月按鈕 false不顯示上一月按鈕 位置在datepicker左上角
nextButton: true, // ture顯示下一月按鈕 false不顯示下一月按鈕 位置在datepicker又上角
scrollMonth: true, // ture 設定datepicker的月份可以滑動 false設定datepicker的月份不可以滑動
lazyInit: false, // 翻譯： 初始化外掛發生只有當使用者互動。大大加速外掛與大量的領域的工作
mask: false, // 使用輸入掩碼。真正的-自動生成一個欄位的“格式”的面具，從0到9的數字，設定為值的最高可能的數字。例如：第一個小時的數字不能大於2，而第一位數字不能大於5 如：{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
validateOnBlur: true, // 失去焦點時驗證datetime值輸入,。如果值是無效的datetime,然後插入當前日期時間值
yearStart: 1950, // 設定最小的年份
yearEnd: 2050, // 設定最大的年份
monthStart: 0, // 設定最小的月份
monthEnd: 11, // 設定最大的月份
roundTime: 'round', // 設定timepicker的計算方式 round四捨五入 ceil向上取整 floor向下取整
allowDateRe : null, // 設定正規表示式檢查日期 如：{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
disabledDates : [], // 設定不可點選的日期 如：disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
disabledWeekDays: [], // 設定不可點選的星期 如：disabledWeekDays:[0,3,4]
yearOffset: 0, // 設定偏移年份 如：2 代表當前年份加2 -2 代表當前年份減2
beforeShowDay: null, // 顯示datetimepicker之前可呼叫的方法 {beforeShowDay:function(d) {console.log("bsd"); } }
enterLikeTab: true, // tab按鍵均可使datetimepicker關閉 true點選回車鍵可使datetimepicker關閉 false點選回車鍵不可使datetimepicker關閉
showApplyButton: false // 相當於確定按鈕 true顯示 false隱藏
});

公司有新的專案、需要使用到 Uni-App
在做前端頁面時、需要使用到 icon 、

找東西的時候發現有人整理了 
bootstrap table 使用的總結
所以記錄一下