BootStrap Table 重写API实现 可对列选择性的搜索
2016-07-07 11:08
423 查看
下载地址:http://note.youdao.com/yws/public/redirect/share?id=a470bb9ede4466626edfea2946eb3553&type=false
在 bootStrap table .js修改了如下代码片段:
if (this.options.search) {
html = [];
html.push(
'<div class="pull-' + this.options.searchAlign + ' search">',
sprintf('<input class="form-control' +
sprintf(' input-%s', this.options.iconSize) +
'" type="text" placeholder="%s">',
this.options.formatSearch()),
'</div>');
this.$toolbar.append(html.join(''));
/**
*根据某列进行搜索
*/
var html_a=[];
html_a.push(
sprintf('<div class="search pull-right" style="margin-right:5px;"> ')+
sprintf('<select id="sel_column" class="form-control"> ')
);
$.each(this.columns, function (i, column) {
if(column.searchable){
html_a.push(sprintf(' <option value='+column.field+' >'+column.title+'</option> '));
}
});
html_a.push(
sprintf('</select>')+
sprintf('</div>')
);
this.$toolbar.append(html_a.join(''));
$('#sel_column').change(function ( event){
var text_t=$('.search input').val();
that.searchText =text_t;
that.scolumnText=$('#sel_column').val();
that.options.searchText = text_t;
that.options.pageNumber = 1;
that.initSearch();
that.updatePagination();
that.trigger('search', text_t);
});
$search = this.$toolbar.find('.search input');
$search.off('keyup drop').on('keyup drop', function (event) {
if (that.options.searchOnEnterKey) {
if (event.keyCode !== 13) {
return;
}
}
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
if (isIEBrowser()) {
$search.off('mouseup').on('mouseup', function (event) {
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
}
}
};
相关文章推荐
- bootstrap学习笔记-导航和导航条
- Bootstrap3使用typeahead插件实现自动补全功能
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- 使用Bootstrap typeahead插件实现搜索框自动补全的方法
- Bootstrap 标签页(Tab)插件
- ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
- bootstrap modal 垂直居中对齐
- BootstrapTest_3(基础排板样式)
- 使用Bootstrap typeahead插件实现搜索框自动补全的方法
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- Bootstrap3使用typeahead插件实现自动补全功能
- BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
- Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
- 30款最好的 Bootstrap 3.0 免费主题和模板
- 50个极好的bootstrap 后台框架主题下载
- 30 个惊艳的 Bootstrap 扩展插件
- 从零开始学Bootstrap(2)
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
- 为bootstrap模态窗口添加拖拽(draggable )事件