我面临以下挑战。我需要使用 html5 和 js 将桌面订单输入 Web 应用程序重新设计为移动设备。我正在尝试找到一种正确的方式来进行订单输入，因为移动设备与桌面设备完全不同。我需要能够将自动完成和图像添加到数据网格中，这是可选的。
是否有这样的数据网格组件可用？ 类似于http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html 但更适合移动设备。
非常感谢任何提示、网址或建议。
【问题讨论】：
标签： jquery forms jquery-ui jquery-mobile datagrid
如果您只是在寻找网格，那么您可以尝试以下两种方式：
两者都有助于以响应式方式构建内容。
我经常使用 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>
关于平板和手机上的图片，请查看adaptive images。
编辑：
这是我的tableview plugin setup 的链接。这是一个由 Jquery Mobile 增强的自适应表。单击过滤器的右上角以打开一个对话框以隐藏/显示行。缩小屏幕，表格应该适应。如果这是您正在寻找的内容，我可以尝试使用带有数据表的 tableview 从我的项目中整理出一个页面。但是它只支持我需要的东西，所以还远未完成（尤其是 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 mobile 或 Twitter Bootstrap。
Bootstrap 非常擅长为每个设备重新调整大小。
【讨论】：