質問編集履歴

5

誤字訂正

2018/10/23 01:17

投稿

ponchoccho
ponchoccho

スコア17

test CHANGED
File without changes
test CHANGED
@@ -146,7 +146,7 @@
146
146
 
147
147
  はfooterに置いておいたままが良いので、footerに移動させていただきました。
148
148
 
149
- cssも、記.aspx内にtext-alignしました。
149
+ cssも、記.aspx内にtext-alignしました。
150
150
 
151
151
 
152
152
 

4

質問に対して画像やソースで説明したかったので追記にて増やさせていただきました。

2018/10/23 01:17

投稿

ponchoccho
ponchoccho

スコア17

test CHANGED
File without changes
test CHANGED
@@ -91,3 +91,261 @@
91
91
  調べてみてもよく分かりませんでした。
92
92
 
93
93
  申し訳ありませんが、助けていただければと思います。
94
+
95
+
96
+
97
+ ### 追記(10/23)
98
+
99
+ 2)
100
+
101
+ 自身で作成しているjsの中に
102
+
103
+
104
+
105
+ rowCount: [-1, 10, 25, 50],
106
+
107
+
108
+
109
+ と打ち、
110
+
111
+ jquery.boot.jsの536行目に教えていただいた部分を追加しました。
112
+
113
+ 他jquery.boot.jsはいじっておりません。
114
+
115
+ jsは読み込まれております。
116
+
117
+ (下記のdisplay:none;は入れる前の作業です)
118
+
119
+ 見た目としては
120
+
121
+ ![イメージ説明](ae2a105dc35221f0ff3502461c078e14.gif)
122
+
123
+ 上記のようになっております。
124
+
125
+
126
+
127
+ 3)
128
+
129
+ actionDropDown
130
+
131
+ 言われたとおり
132
+
133
+ button内に「style=\"display: none;\"」入れてみましたが、
134
+
135
+ 下記画像のようになりました。
136
+
137
+
138
+
139
+ 5)
140
+
141
+ 「○件中○~○件を表示しています」無事に上に出ました、ありがとうございます。
142
+
143
+ ただ、
144
+
145
+ pagination
146
+
147
+ はfooterに置いておいたままが良いので、footerに移動させていただきました。
148
+
149
+ cssも、上記.aspx内にtext-alignしました。
150
+
151
+
152
+
153
+ そうしたら、下記画像のようになりました。
154
+
155
+
156
+
157
+ 3) 5)画像
158
+
159
+ ![イメージ説明](64323f5f81c3efdd857ed59cc9d67f92.gif)
160
+
161
+
162
+
163
+ ソースとしては以下になります
164
+
165
+
166
+
167
+ ```javascript
168
+
169
+ $("#grid-command-buttons").bootgrid({
170
+
171
+ rowCount: [-1, 10, 25, 50],
172
+
173
+ caseSensitive: false,
174
+
175
+ templates: {
176
+
177
+ actionDropDown: "<div class=\"{{css.dropDownMenu}}\">
178
+
179
+ <button style=\"display: none;\" class=\"btn btn-default
180
+
181
+ dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\">
182
+
183
+ <span class=\"{{css.dropDownMenuText}}\">{{ctx.content}}</span>
184
+
185
+ <span class=\"caret\"></span>
186
+
187
+ </button>
188
+
189
+ <ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\">
190
+
191
+ </ul>
192
+
193
+ </div>",
194
+
195
+ footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\">
196
+
197
+ <div class=\"row\">
198
+
199
+ <div class=\"col-sm-6\">
200
+
201
+ <p class=\"{{css.pagination}}\"></p>
202
+
203
+ </div>
204
+
205
+ </div>
206
+
207
+ </div>",
208
+
209
+ header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\">
210
+
211
+ <div class=\"row\">
212
+
213
+ <div class=\"col-sm-12 actionBar\">
214
+
215
+ <p class=\"{{css.search}}\"></p>
216
+
217
+ <p class=\"{{css.actions}}\"></p>
218
+
219
+ </div>
220
+
221
+ </div>
222
+
223
+ <div class=\"row\">
224
+
225
+ <div class=\"col-sm-6 infoBar\">
226
+
227
+ <p class=\"{{css.infos}}\"></p>
228
+
229
+ </div>
230
+
231
+ </div>
232
+
233
+ </div>",
234
+
235
+ headerCell: "<th data-column-id=\"{{ctx.column.id}}\" class=\"{{ctx.css}}\" style=\"{{ctx.style}}\">
236
+
237
+ <a href=\"javascript:void(0);\" class=\"{{css.columnHeaderAnchor}} {{ctx.sortable}}\">
238
+
239
+ <span class=\"{{css.columnHeaderText}}\">{{ctx.column.text}}</span>{{ctx.icon}}</a>
240
+
241
+ </th>"
242
+
243
+ },
244
+
245
+ labels: {
246
+
247
+ all: "全て表示",
248
+
249
+ infos: "{{ctx.total}}件中 {{ctx.start}} ~ {{ctx.end}}件を表示しています",
250
+
251
+ loading: "検索中...",
252
+
253
+ noResults: "データがありません",
254
+
255
+ search: "検索"
256
+
257
+ },
258
+
259
+ formatters: {
260
+
261
+ "commands": function (column, row) {
262
+
263
+ return "<button type=\"button\" class=\"btn btn-xl btn-default command-edit\" data-row-id=\"" + row.id + "\">
264
+
265
+ <span>編集</span>
266
+
267
+ </button> "
268
+
269
+ +
270
+
271
+ "<button type=\"button\" class=\"btn btn-xl btn-default command-delete\" data-row-id=\"" + row.id + "\">
272
+
273
+ <span>削除</span>
274
+
275
+ </button>";
276
+
277
+ }
278
+
279
+ }
280
+
281
+ })
282
+
283
+ ```
284
+
285
+ ※templatesとformatters、改行しておりますが、実際は1行にまとめています
286
+
287
+
288
+
289
+ ```javascript
290
+
291
+ //jquery.boot.js
292
+
293
+
294
+
295
+ //531行目~
296
+
297
+ function renderRowCountSelection(actions)
298
+
299
+ {
300
+
301
+ //536行目
302
+
303
+ function getText(value)
304
+
305
+ {
306
+
307
+ return (value === -1) ? that.options.labels.all : value + "件表示";
308
+
309
+ }
310
+
311
+ }
312
+
313
+
314
+
315
+ //1235,1236行
316
+
317
+ css: {
318
+
319
+ footer: "bootgrid-footer container-fluid",
320
+
321
+ header: "bootgrid-header container-fluid",
322
+
323
+ }
324
+
325
+ ```
326
+
327
+
328
+
329
+ ```aspx
330
+
331
+
332
+
333
+ .bootgrid-header .infoBar{
334
+
335
+ text-align: right;
336
+
337
+ }
338
+
339
+
340
+
341
+ .bootgrid-header.container-fluid {
342
+
343
+ text-align: right;
344
+
345
+ }
346
+
347
+ ```
348
+
349
+
350
+
351
+ 何度も申し訳ありません…。

3

再度タイトル、内容一部修正しました

2018/10/23 01:14

投稿

ponchoccho
ponchoccho

スコア17

test CHANGED
@@ -1 +1 @@
1
- bootgridについていくつか聞きたい<検索を全角半角で区別できるにしたい(例:「XYZ(全角)」と「XYZ(半角)」) など>
1
+ bootgridについていくつか聞きたい<検索を全角半角を同じものとして判別できるにしたい(例:「XYZ(全角)」と「XYZ(半角)」) など>
test CHANGED
@@ -24,7 +24,9 @@
24
24
 
25
25
  ①橙四角の検索を、ローマ字の全角半角での区別も対応したい
26
26
 
27
- (例:「XYZ(全角)」と「XYZ(半角)」を区別できるようにしたい)
27
+ (例:「XYZ(全角)」と「XYZ(半角)」、「アイウ(全角)」と「アイウ(半角)」
28
+
29
+    を同じものとして判別できるようにしたい)
28
30
 
29
31
  →caseSensitiveをfalseにして、アルファベットの大文字小文字は分けられるようになりましたが、全角半角ができません。
30
32
 

2

質問が分かりづらかったので変更しました。本文も一部訂正しています。

2018/10/09 01:34

投稿

ponchoccho
ponchoccho

スコア17

test CHANGED
@@ -1 +1 @@
1
- bootgridについていくつか聞きたい検索を全角半角で分けられようにしたい など
1
+ bootgridについていくつか聞きたい<検索を全角半角で区別できるにしたい(例:「XYZ(全角)」と「XYZ(半角)」) など>
test CHANGED
@@ -22,7 +22,9 @@
22
22
 
23
23
 
24
24
 
25
- ①橙四角の検索を、全角半角も対応したい
25
+ ①橙四角の検索を、ローマ字の全角半角での区別も対応したい
26
+
27
+ (例:「XYZ(全角)」と「XYZ(半角)」を区別できるようにしたい)
26
28
 
27
29
  →caseSensitiveをfalseにして、アルファベットの大文字小文字は分けられるようになりましたが、全角半角ができません。
28
30
 

1

誤字訂正

2018/10/09 01:12

投稿

ponchoccho
ponchoccho

スコア17

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- まずは書き画像をご覧ください
15
+ まずは下記画像をご覧ください
16
16
 
17
17
  ![イメージ説明](7ee76d919cad91e2fba31da6a005facb.gif)
18
18