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 是因为要查询不同数值对应的参数。