私は次の課題を手にしています。html5 と js を使用して、デスクトップ注文入力 Web アプリケーションをモバイル用に再設計する必要があります。モバイル デバイスはデスクトップとはかなり異なるため、注文入力を行う適切な方法を見つけようとしています。オートコンプリートと画像をデータ グリッドに追加できるようにする必要がありますが、これはオプションです。
そのようなデータグリッド コンポーネントはありますか? http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.htmlに似ています が、モバイル デバイスにより適しています。
ヒント、URL、またはアドバイスは大歓迎です。
グリッドを探しているだけの場合は、次の両方を試すことができます。
どちらもレスポンシブな方法でコンテンツを構造化するのに役立ちます。
1140 は Jquery Mobile と相性が良いのでよく使っています。クラスcontainer、row、span1-12を使用するため、最大 12 セルの行でコンテンツを構造化できます。例えば：
<div.container></div>
<div.row></div>
<div.span1>A</div>
<div.span5>B</div>
<div.span5>C</div>
<div.span1>D</div>
</div>
</div>
タブレットで次のことができます。
A B C D
しかもスマホで
A
B
C
D
次のように、これを JQM 折りたたみ式または折りたたみ式セットとうまく組み合わせることができます。
<div class="container">
<div data-role="collapsible" data-collapsed="true">
<h3>headline</h3>
<!-- start grid row --->
<div class="row">
<div class="span4"><!-- content --></div>
<div class="span4"><!-- content --></div>
<div class="span4"><!-- content --></div>
</div<
</div>
<!-- end collapsible or start next on in set -->
</div>
タブレットとモバイルの画像については、アダプティブ画像をご覧ください。
編集：
これは私のテーブルビュープラグインのセットアップへのリンクです。これは、Jquery Mobile によって強化された適応テーブルです。フィルターの右上をクリックして、行を非表示/表示するダイアログを開きます。画面を縮小すると、テーブルが適応するはずです。これがあなたが探しているものである場合は、データテーブルを含むテーブルビューを使用して、プロジェクトから作成したページをいじってみることができます。ただし、必要なものしかサポートしていないため、完全にはほど遠いです (特に UI)。
* =========================編集====================== == *
わかりました。Jquery Mobile を使用してデータテーブルをセットアップする方法を簡単に説明します。
1) 私の変更されたデータテーブル バージョンが必要になります。このバージョンでは、データ テーブル内のすべての JqueryUI が JqueryMobile UI に置き換えられます。これまでのところ、必要な基本的なことしか行っていません。気軽に参加してください:-)
ファイルへのリンクは次のとおりです: JQM datatables - 「XXX」を検索して、変更内容を確認します
2)私は通常のデータテーブル関数呼び出しを次のように使用しています:
tblPos = table.dataTable({
"sDom": '<"S"f>t<"E"lpi>', /* table layout */
"bJQueryMobileUI": true, /* JQM UI */
"sPaginationType": "full_numbers",/* pagination type */
"bPaginate": true, /* pagination active */
"bRetrieve": true, /* hide warnings */
"bCustomFilter":false, /* use custom filter */
"bLengthChange": true, /* number of results */
"bAutoWidth": false, /* no auto-width */
"aaSorting": [[ 0, "asc" ]], /* default sorting col 0 desc */
"aoColumns": [
/* Pos */ {"sClass": "jqmSorter"}, /* sortable */
/* EAN/GTIN */ {"bSortable": false }, /* not sortable */
/* Style No */ {"sClass": "jqmSorter"},
/* Desc. */ {"bSortable": false },
/* Size */ {"bSortable": false },
/* Color */ {"bSortable": false },
/* Price */ {"bSortable": false },
/* Unit */ {"bSortable": false },
/* Qty */ {"bSortable": false },
/* Confirmed */ {"bSortable": false },
/* Total */ {"bSortable": false },
],
"fnHeaderCallback": function( nHead ) {
sortableHeaderCells( nHead ) /* embed sortable buttons */
},
"fnInitComplete": function(oSettings, json) {
createJQMTable( oSettings, json ) /* run JQM make-over once table is built */
}
これは私が使用している例からのものであるため、使用される関数はすべて問題ありません。以下は、ソート可能なヘッダーを作成するfnHeaderCallbackおよびfnInitComplete関数で、テーブル全体を指定して JQM します。
function sortableHeaderCells ( nHead ) {
$(nHead).closest('thead, THEAD').find('.jqmSorter').each( function () {
var sortTitle = $(this).text(),
sortButton =
$( document.createElement( "a" ) ).buttonMarkup({
shadow: false,
corners: false,
theme: 'a',
iconpos: "right",
icon: 'sort'
})
sortButton.addClass("colHighTrigger")
.find('.ui-btn-text').text(sortTitle);
$(this).html( sortButton )
});
}
これは簡単です。表の列にソート可能のラベルを付けると、関数はそれから JQM ボタンを作成します。
次のものは、それほど簡単ではありません...
function createJQMTable(oSettings, json) {
$(oSettings.nTable).addClass("enhanced");
/* toggle columns */
var persist = "persist",
thead = $(oSettings.nTHead),
twrap = thead.closest('.table-wrapper'),
topWrap = twrap.find('.table-top-wrapper'),
idprefix = "co-" + twrap.jqmData('rpsv') + "-",
togSel = $('#toggleCols_' + twrap.jqmData('rpsv')),
bodyRows = $(oSettings.nTBody).find("tr, TR"),
footRows = $(oSettings.nTFoot).find("tr, TR"),
hdrCols = thead.find("tr:first th[rowspan=2], TR:first TH[rowspan=2]").add(thead.find("tr:last-child th, TR:last-child TH")),
dropSel;
/* remove top borders if nested table */
if (thead.closest('.containsTable').length > 0) {
$(".table-top-wrapper").removeClass('ui-corner-top');
}
/* fill remaining 2 slots */
if (twrap.find(".slot1").length) {
$(".slot1").prependTo(topWrap).addClass("ui-block-a noIconposSwitcher-div").find('label').addClass('hideLabel');
}
if (twrap.find(".slot2").length) {
$(".slot2").prependTo(topWrap).addClass("ui-block-b noIconposSwitcher-div").find('label').addClass('hideLabel');
}
function sortHeaders(a, b) {
var x = $(a).jqmData('sort');
var y = $(b).jqmData('sort');
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
hdrCols.sort(sortHeaders).each(function (i) {
var classes = "",
th = $(this),
id = th.attr("id"),
allClasses = th.attr("class").split(/\s+/);
// assign an id to each header, if none is in the markup
if (!id) {
id = (idprefix ? idprefix : "col-") + i;
th.attr("id", id);
};
// retrieve toggle classes from header
for (var j = 0; j < allClasses.length; j++) {
if (allClasses[j] === 'persist' || allClasses[j] === 'optional' || allClasses[j] === 'essential') {
classes = classes + " " + allClasses[j]
}
if (classes == "") {
$(this).addClass('only')
}
}
// assign matching "headers" attributes to the associated cells
bodyRows.add(footRows).each(function () {
var cell = $(this).find("th, td").eq(i);
cell.attr("headers", id);
if (classes) {
cell.addClass(classes);
} else cell.addClass('only');
});
// create the hide/show toggles
if (!th.is("." + persist)) {
var toggle = $('<option value="' + id + '">' + th.text() + '</option>');
$(togSel).append(toggle);
}
// listen for column updates
// $('body').one("updateCheck",$(toggle), function(){
$(toggle).bind("updateCheck", function () {
th.css("display") == "table-cell" || th.css("display") == "inline" ? $(this).attr("selected", "selected") : $(this).removeAttr("selected");
}).trigger("updateCheck");
}); // end hdrCols loop
// listen for select changes
// $('body').on('change', $(togSel), function() {
$(togSel).on('change', function () {
$(this).attr('blocked', true);
togCols($(this));
})
// just for iPad
$(togSel).on('blur', function () {
if ($(this).attr('blocked') != true) {
togCols($(this));
}
});
function togCols(SelectElement) {
var topRow = thead.find('tr').length > 1 ? thead.find("tr:first-child th, TR:first-child TH").not('[rowspan=2]') : "",
/* not sure why -1 is necessary, otherwise length is always one too hight. Maybe because function runs before visibility is toggled */
bottomCells = thead.find("tr:last-child th:visible, TR:last-child TH:visible").length - 1;
SelectElement.find("option").each(function () {
var val = $(this).val(),
col = $("#" + val + ", [headers=" + val + "]");
$(this).is(':selected') ? col.show() : col.hide()
})
if (topRow) {
if (bottomCells === 0) {
topRow.hide();
} else {
topRow.attr('colspan', bottomCells).show();
}
}
$(this).removeAttr('blocked');
}
// update the inputs' checked status
$(window).on("orientationchange resize", function () {
$('.ui-page-active .updateCols option').trigger("updateCheck");
});
// update selectmenu and move it into the table
$(togSel).selectmenu("refresh");
dropSel = twrap.find('.table-top-wrapper .ui-block-c').length > 0 ? twrap.find('.table-top-wrapper .ui-block-c') : twrap.find('.table-top-wrapper');
$(togSel).closest('.ui-select').addClass('togSel slot1').appendTo(dropSel);
// make sure all elements are enhanced
$('div.table-top-wrapper').find('div.ui-block-a, div.ui-block-b, div.ui-block-c').trigger('create');
$('div.table-bottom-wrapper').find('div.ui-block-a, div.ui-block-c').trigger('create');
$('div.table-bottom-wrapper').trigger('create');
}
この関数は、レスポンシブ テーブル レイアウトを作成します。私はFilaments RWD-Patternを使用してこれを行い、さらに JQM からいくつかのものを取りました。
非常に重要:
レスポンシブ選択を JQM カスタム選択にしたい場合は、何かが起こる前に、js ファイルの先頭にその変数と空の選択を追加する必要があります。
var tblPos, your_other_table_variables;
$('.table-wrapper').each(function(i){
tableSelectMenu = $('<select data-theme="a" name="toggleCols" class="updateCols" id="toggleCols_'+i+'" multiple="multiple" data-icon="setup" data-iconpos="notext"></select>');
$(this).prepend(tableSelectMenu).jqmData('rpsv',i)
});
この方法では、JQM pagecreate イベントが実行される前に選択が作成されるため、テーブルの列を切り替えるカスタム選択が必要な場合は、 data-native-menu="false"を追加できます。
最後に...次のようなテーブル：
// create a wrapper
<div class="table-wrapper ui-embedded">
// to fill available slots in the table header, assign slot1/2/3 to a div
// these will be changed into JQM elements, too.
<div data-role="fieldcontain" class="slot2">
<label class="select">View:</label>
<select name="ansicht" data-inline="true">
<option selected="" value="1">1</option>
<option value="2">2</option>
</select>
</div>
<table class="tbl_basket_style">
// double header rows are soso-supported
<thead>
<tr>
// .optional will be hidden if no space
// .essential will be shown if possible
// .persist will always be visible
<th data-sort="0" class="optional">Pos.</th>
<th data-sort="1" class="essential persist">Style</th>
<th data-sort="2">Description</th>
<th data-sort="3" class="optional">Color</th>
...
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ultra Shine</td>
<td>Product Ultra 10D description</td>
<td>200</td>
<td></td>
<td>4</td>
<td>PC</td>
<td>
3.00 EUR<input type="hidden" id="preis11" value="3.00">
</td>
...
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
...
</tr>
</tfoot>
</table>
</div>
それだけです...最初のものを機能させたら、残りのものははるかに簡単です:-)
これを設定する際にサポートが必要な場合はお知らせください。
CSSグリッドではなく、テーブル/グリッドコンポーネント（ページネーション、ソート、フィルタリング、インプレース編集を可能にする）を探していると思います。
その場合、いくつかのオプションがあります。
テーブル コンポーネントの機能比較については、http://reactive-table.meteor.comを参照してください。
これは役立つかもしれません: http://jquerymobile.com/test/docs/content/content-grids.html
グリッドセルに必要なものを動的に追加できるはずです。
jQuery モバイルまたは Twitter Bootstrap をお勧めします。
Bootstrap は、すべてのデバイスのサイズ変更に非常に優れています。