質問編集履歴
5
誤字訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
ただ、
|
|
73
73
|
pagination
|
|
74
74
|
はfooterに置いておいたままが良いので、footerに移動させていただきました。
|
|
75
|
-
cssも、
|
|
75
|
+
cssも、下記.aspx内にtext-alignしました。
|
|
76
76
|
|
|
77
77
|
そうしたら、下記画像のようになりました。
|
|
78
78
|
|
4
質問に対して画像やソースで説明したかったので追記にて増やさせていただきました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -44,4 +44,133 @@
|
|
|
44
44
|
※丸投げと思われる方多いかと思いますが、
|
|
45
45
|
bootgridのページ（[http://www.jquery-bootgrid.com/](http://www.jquery-bootgrid.com/)）を見ても、
|
|
46
46
|
調べてみてもよく分かりませんでした。
|
|
47
|
-
申し訳ありませんが、助けていただければと思います。
|
|
47
|
+
申し訳ありませんが、助けていただければと思います。
|
|
48
|
+
|
|
49
|
+
### 追記(10/23)
|
|
50
|
+
2)
|
|
51
|
+
自身で作成しているjsの中に
|
|
52
|
+
|
|
53
|
+
rowCount: [-1, 10, 25, 50],
|
|
54
|
+
|
|
55
|
+
と打ち、
|
|
56
|
+
jquery.boot.jsの536行目に教えていただいた部分を追加しました。
|
|
57
|
+
他jquery.boot.jsはいじっておりません。
|
|
58
|
+
jsは読み込まれております。
|
|
59
|
+
(下記のdisplay:none;は入れる前の作業です)
|
|
60
|
+
見た目としては
|
|
61
|
+
|
|
62
|
+
上記のようになっております。
|
|
63
|
+
|
|
64
|
+
3)
|
|
65
|
+
actionDropDown
|
|
66
|
+
言われたとおり
|
|
67
|
+
button内に「style=\"display: none;\"」入れてみましたが、
|
|
68
|
+
下記画像のようになりました。
|
|
69
|
+
|
|
70
|
+
5)
|
|
71
|
+
「○件中○～○件を表示しています」無事に上に出ました、ありがとうございます。
|
|
72
|
+
ただ、
|
|
73
|
+
pagination
|
|
74
|
+
はfooterに置いておいたままが良いので、footerに移動させていただきました。
|
|
75
|
+
cssも、上記.aspx内にtext-alignしました。
|
|
76
|
+
|
|
77
|
+
そうしたら、下記画像のようになりました。
|
|
78
|
+
|
|
79
|
+
3) 5)画像
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
ソースとしては以下になります
|
|
83
|
+
|
|
84
|
+
```javascript
|
|
85
|
+
$("#grid-command-buttons").bootgrid({
|
|
86
|
+
rowCount: [-1, 10, 25, 50],
|
|
87
|
+
caseSensitive: false,
|
|
88
|
+
templates: {
|
|
89
|
+
actionDropDown: "<div class=\"{{css.dropDownMenu}}\">
|
|
90
|
+
<button style=\"display: none;\" class=\"btn btn-default
|
|
91
|
+
dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\">
|
|
92
|
+
<span class=\"{{css.dropDownMenuText}}\">{{ctx.content}}</span>
|
|
93
|
+
<span class=\"caret\"></span>
|
|
94
|
+
</button>
|
|
95
|
+
<ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\">
|
|
96
|
+
</ul>
|
|
97
|
+
</div>",
|
|
98
|
+
footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\">
|
|
99
|
+
<div class=\"row\">
|
|
100
|
+
<div class=\"col-sm-6\">
|
|
101
|
+
<p class=\"{{css.pagination}}\"></p>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>",
|
|
105
|
+
header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\">
|
|
106
|
+
<div class=\"row\">
|
|
107
|
+
<div class=\"col-sm-12 actionBar\">
|
|
108
|
+
<p class=\"{{css.search}}\"></p>
|
|
109
|
+
<p class=\"{{css.actions}}\"></p>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class=\"row\">
|
|
113
|
+
<div class=\"col-sm-6 infoBar\">
|
|
114
|
+
<p class=\"{{css.infos}}\"></p>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>",
|
|
118
|
+
headerCell: "<th data-column-id=\"{{ctx.column.id}}\" class=\"{{ctx.css}}\" style=\"{{ctx.style}}\">
|
|
119
|
+
<a href=\"javascript:void(0);\" class=\"{{css.columnHeaderAnchor}} {{ctx.sortable}}\">
|
|
120
|
+
<span class=\"{{css.columnHeaderText}}\">{{ctx.column.text}}</span>{{ctx.icon}}</a>
|
|
121
|
+
</th>"
|
|
122
|
+
},
|
|
123
|
+
labels: {
|
|
124
|
+
all: "全て表示",
|
|
125
|
+
infos: "{{ctx.total}}件中 {{ctx.start}} ～ {{ctx.end}}件を表示しています",
|
|
126
|
+
loading: "検索中...",
|
|
127
|
+
noResults: "データがありません",
|
|
128
|
+
search: "検索"
|
|
129
|
+
},
|
|
130
|
+
formatters: {
|
|
131
|
+
"commands": function (column, row) {
|
|
132
|
+
return "<button type=\"button\" class=\"btn btn-xl btn-default command-edit\" data-row-id=\"" + row.id + "\">
|
|
133
|
+
<span>編集</span>
|
|
134
|
+
</button> "
|
|
135
|
+
+
|
|
136
|
+
"<button type=\"button\" class=\"btn btn-xl btn-default command-delete\" data-row-id=\"" + row.id + "\">
|
|
137
|
+
<span>削除</span>
|
|
138
|
+
</button>";
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
})
|
|
142
|
+
```
|
|
143
|
+
※templatesとformatters、改行しておりますが、実際は1行にまとめています
|
|
144
|
+
|
|
145
|
+
```javascript
|
|
146
|
+
//jquery.boot.js
|
|
147
|
+
|
|
148
|
+
//531行目～
|
|
149
|
+
function renderRowCountSelection(actions)
|
|
150
|
+
{
|
|
151
|
+
//536行目
|
|
152
|
+
function getText(value)
|
|
153
|
+
{
|
|
154
|
+
return (value === -1) ? that.options.labels.all : value + "件表示";
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
//1235,1236行
|
|
159
|
+
css: {
|
|
160
|
+
footer: "bootgrid-footer container-fluid",
|
|
161
|
+
header: "bootgrid-header container-fluid",
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
```aspx
|
|
166
|
+
|
|
167
|
+
.bootgrid-header .infoBar{
|
|
168
|
+
text-align: right;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.bootgrid-header.container-fluid {
|
|
172
|
+
text-align: right;
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
何度も申し訳ありません…。
|
3
再度タイトル、内容一部修正しました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
bootgridについていくつか聞きたい<検索を全角半角
|
|
1
|
+
bootgridについていくつか聞きたい<検索を全角半角を同じものとして判別できるにしたい(例:「ＸＹＺ(全角)」と「XYZ(半角)」) など>
|
body
CHANGED
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
上記の画像を元に、以下のことを聞きたいです。
|
|
12
12
|
|
|
13
13
|
①橙四角の検索を、ローマ字の全角半角での区別も対応したい
|
|
14
|
-
(例:「ＸＹＺ(全角)」と「XYZ(半角)」
|
|
14
|
+
(例:「ＸＹＺ(全角)」と「XYZ(半角)」、「アイウ(全角)」と「ｱｲｳ(半角)」
|
|
15
|
+
を同じものとして判別できるようにしたい)
|
|
15
16
|
→caseSensitiveをfalseにして、アルファベットの大文字小文字は分けられるようになりましたが、全角半角ができません。
|
|
16
17
|
|
|
17
18
|
②桃四角の表示を数字以外の文字も打ちたい
|
2
質問が分かりづらかったので変更しました。本文も一部訂正しています。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
bootgridについていくつか聞きたい
|
|
1
|
+
bootgridについていくつか聞きたい<検索を全角半角で区別できるにしたい(例:「ＸＹＺ(全角)」と「XYZ(半角)」) など>
|
body
CHANGED
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
上記の画像を元に、以下のことを聞きたいです。
|
|
12
12
|
|
|
13
|
-
①橙四角の検索を、全角半角も対応したい
|
|
13
|
+
①橙四角の検索を、ローマ字の全角半角での区別も対応したい
|
|
14
|
+
(例:「ＸＹＺ(全角)」と「XYZ(半角)」を区別できるようにしたい)
|
|
14
15
|
→caseSensitiveをfalseにして、アルファベットの大文字小文字は分けられるようになりましたが、全角半角ができません。
|
|
15
16
|
|
|
16
17
|
②桃四角の表示を数字以外の文字も打ちたい
|
1
誤字訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
bootgridについて伺いたいことがあります
|
|
7
7
|
|
|
8
|
-
まずは
|
|
8
|
+
まずは下記画像をご覧ください
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
上記の画像を元に、以下のことを聞きたいです。
|