Bootstrap常用、實用整理(bootstrap踩過的坑),持續更新......
阿新 • • 發佈:2019-02-06
bootstrap是一個響應式前段框架、豐富的外掛。可以提高開發效率,前段時間專案中用到了bootstrap在這裡我記錄下專案中用到的東西及我的理解(我只是一個小白),希望大家多多指正、共同學習。
在這裡我要介紹下常用的、比如bootstrap suggest、及bootstrap table。
bootstrap table 、表格外掛。豐富的API,滿足絕大多數需求。
先來一個bootstrap table 的中文文件、這個裡面挺全的、可以點進去看看:
接下來就是應用了 初始化:
$.initTableOms = function (_columns, _url, search) { $('.bootstrap-table').bootstrapTable({ height: 740, // 固定表頭 method: 'get', // 請求方式(*) dataType: "json", // 返回格式(*) url: _url, // 請求後臺的URL(*) pagination: true, // 是否顯示分頁(*) pageSize: 20, // 每頁的記錄行數(*) pageNumber: 1, // 初始化載入第一頁,預設第一頁 pageList: [20, 30, 60, 100, 200, 500, 1000], // 可供選擇的每頁的行數(*) search: search, // 是否顯示搜尋框功能 singleSelect: false, // 是否禁止多選 striped: false, // 是否各行漸變色 iconSize: 'sm', // 圖示大小:undefined預設的按鈕尺寸 xs超小按鈕sm小按鈕lg大按鈕 toolbar: '#tableToolbar', // 指定工作欄 sidePagination: "server", // 啟用服務端分頁 showRefresh: true, // 是否顯示重新整理按鈕 showColumns: true, // 是否顯示隱藏某列下拉框 showToggle: false, // 是否顯示詳細檢視和列表檢視的切換按鈕 cache: false, // 是否使用快取 showExport: true, // 是否支援匯出檔案 columns: _columns, onLoadSuccess: function () { if ($(".bootstrap-table").bootstrapTable('getData').length >= 1) { $('.bootstrap-table').bootstrapTable('check', 0); } } }); }
要注意onloadSuccess是載入完成後、可以看到裡面先判斷了‘getData’,這是在判斷table有沒有值,他是一個數組形式的。判斷完后里面傳了一個‘check’。個人感覺很實用。check簡單的理解就是table載入完成後,第一行資料被預設選中(具體參考API),必須是在onloadSuccess後才會執行。
check | index | 選擇某一行,索引(index)從0開始 | $table.bootstrapTable(‘check’, 1); - 請檢視: check/uncheck |
bootstrap suggest 、搜尋建議框架。可以實現百度下拉框的效果(自帶的模糊查詢,目前發現只支援中文漢字,不像百度支援拼音查詢關聯)。
先上引數:
var defaultOptions = { url: null, //請求資料的 URL 地址 jsonp: null, //設定此引數名,將開啟jsonp功能,否則使用json資料結構 data: { value: [] }, //提示所用的資料,注意格式 indexId: 0, //每組資料的第幾個資料,作為input輸入框的 data-id,設為 -1 且 idField 為空則不設定此值 indexKey: 0, //每組資料的第幾個資料,作為input輸入框的內容 idField: '', //每組資料的哪個欄位作為 data-id,優先順序高於 indexId 設定(推薦) keyField: '', //每組資料的哪個欄位作為輸入框內容,優先順序高於 indexKey 設定(推薦) /* 搜尋相關 */ autoSelect: true, //鍵盤向上/下方向鍵時,是否自動選擇值 allowNoKeyword: true, //是否允許無關鍵字時請求資料 getDataMethod: 'firstByUrl', //獲取資料的方式,url:一直從url請求;data:從 options.data 獲取;firstByUrl:第一次從Url獲取全部資料,之後從options.data獲取 delayUntilKeyup: false, //獲取資料的方式 為 firstByUrl 時,是否延遲到有輸入時才請求資料 ignorecase: false, //前端搜尋匹配時,是否忽略大小寫 effectiveFields: [], //有效顯示於列表中的欄位,非有效欄位都會過濾,預設全部。 effectiveFieldsAlias: {}, //有效欄位的別名物件,用於 header 的顯示 searchFields: [], //有效搜尋欄位,從前端搜尋過濾資料時使用,但不一定顯示在列表中。effectiveFields 配置欄位也會用於搜尋過濾 twoWayMatch: true, // 是否雙向匹配搜尋。為 true 即輸入關鍵字包含或包含於匹配欄位均認為匹配成功,為 false 則輸入關鍵字包含於匹配欄位認為匹配成功 multiWord: false, //以分隔符號分割的多關鍵字支援 separator: ',', //多關鍵字支援時的分隔符,預設為半形逗號 /* UI */ autoDropup: false, //選擇選單是否自動判斷向上展開。設為 true,則當下拉選單高度超過窗體,且向上方向不會被窗體覆蓋,則選擇菜單向上彈出 autoMinWidth: false, //是否自動最小寬度,設為 false 則最小寬度不小於輸入框寬度 showHeader: false, //是否顯示選擇列表的 header。為 true 時,有效欄位大於一列則顯示錶頭 showBtn: true, //是否顯示下拉按鈕 inputBgColor: '', //輸入框背景色,當與容器背景色不同時,可能需要該項的配置 inputWarnColor: 'rgba(255,0,0,.1)', //輸入框內容不是下拉列表選擇時的警告色 listStyle: { 'padding-top': 0, 'max-height': '375px', 'max-width': '800px', 'overflow': 'auto', 'width': 'auto', 'transition': '0.3s', '-webkit-transition': '0.3s', '-moz-transition': '0.3s', '-o-transition': '0.3s' }, //列表的樣式控制 listAlign: 'left', //提示列表對齊位置,left/right/auto listHoverStyle: 'background: #07d; color:#fff', //提示框列表滑鼠懸浮的樣式 listHoverCSS: 'jhover', //提示框列表滑鼠懸浮的樣式名稱 clearable: false, // 是否可清除已輸入的內容 /* key */ keyLeft: 37, //向左方向鍵,不同的作業系統可能會有差別,則自行定義 keyUp: 38, //向上方向鍵 keyRight: 39, //向右方向鍵 keyDown: 40, //向下方向鍵 keyEnter: 13, //回車鍵 /* methods */ fnProcessData: processData, //格式化資料的方法,返回資料格式參考 data 引數 fnGetData: getData, //獲取資料的方法,無特殊需求一般不作設定 fnAdjustAjaxParam: null, //調整 ajax 請求引數方法,用於更多的請求配置需求。如對請求關鍵字作進一步處理、修改超時時間等 fnPreprocessKeyword: null //搜尋過濾資料前,對輸入關鍵字作進一步處理方法。注意,應返回字串 };
專案中:首先引入js
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-suggest.js"></script>
先來張圖:點選input 框、出現對應的值、可模糊查詢(僅支援中文漢字)、可下拉列表展示
HTML程式碼
<div class="form-group col-sm-2">
<div class="input-group">
<span class="input-group-addon">企業名稱</span>
<input type="text" data-pure-clear-button class="form-control input-sm"
id="ebcOmsCode_view" name="ebcOmsCode_view">
<input type="text" class="form-control input-sm" id="ebcOmsCode" name="ebcOmsCode" type="hidden">
<div class="input-group-btn">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</div>
</div>
</div>
接下來
<script type="text/javascript">
var testBsSuggest = $("#ebcOmsCode_view").bsSuggest({
url: "",
showBtn: false,
idField: "id",
effectiveFields: ['companyName'],
effectiveFieldsAlias: {companyName: "電商企業"},
keyField: "companyName"
}).on("onDataRequestSuccess", function (e, result) {
console.log("onDataRequestSuccess: ", result)
}).on("onSetSelectValue", function (e, keyword, data) {
console.log(data)
$("#ebcOmsCode").val(data.companyOmsCode);
}).on("onUnsetSelectValue", function (e) {
console.log("onUnsetSelectValue")
$("#ebcOmsCode").val("");
});
</script>
Controller 層:用map、因為suggest 接受過來的就是一個key,value。
/**
* 電商查詢
*/
@ResponseBody
@RequestMapping("/findCompany")
public Map findCompany(Integer companyType) {
Map result = new HashMap();
result.put("messsage", "");
result.put("value", companyRegisterInfoService.findCompany(companyType));
return result;
}
service層:忽略裡面傳的引數
public List<CompanyCodeInfo> findCompany(Integer companyType);
好了、其實到這裡就算完成了、mapper.xml 裡面就是查詢語句了,我上面穿的Integer 是因為要查詢不同數值對應的引數。