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 是因為要查詢不同數值對應的引數。