0
테두리 색상을 변경하고 부트 스트랩 테이블 프레임 워크의 검색 도구에 오른쪽의 아이콘을 추가하고 싶습니다.부트 스트랩 테이블 - 검색 도구의 속성 변경
또한 테이블 상단의 다른 버튼과 정렬하고 싶습니다.
내 코드는 다음과 같습니다
/* SEARCH TOOL */
.search{
width: 25%;
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
line-height: 34px;
}
<table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='descripcion' data-sortable='true' data-switchable='false'>DESCRIPCIÓ</th>
<th data id='image' data-switchable='false'>imatge</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='fecha-mod' data-sortable='true'>FECHA-MOD</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<!— Function to load registres —>
</tr>
</tbody>
</table>
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(''));
$search = this.$toolbar.find('.search input');
$search.off('keyup drop').on('keyup drop', function (event) {
if (that.options.searchOnEnterKey && event.keyCode !== 13) {
return;
}
if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
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);
});
}
}
작동하지 않습니다. 문제는 검색 도구가 입력 태그와 클래스 폼 컨트롤을 사용한다는 것입니다. 확실하지 않습니다.
도 –
좋아, 이미으로 업데이트 html로 파트를 추가 코딩. – ruzD
나는 당신의 html 부분에서 어떤 수색든지 보지 않는다. 입력란이 있고 유형이 검색 인 경우 입력으로 테두리 색상을 추가 할 수 있습니다. [type = search] { border-color : red; } 클릭 입력 필드 테두리에 문제가있는 경우 입력 [type = search] : focus { border-color : red; 개요 : 0; } –