移动数据输入 – 移动友好数据网格
我手中有以下挑战。 我需要使用html5和js重新设计桌面订单输入Web应用程序到移动设备。 我正在尝试找到一种正确的订单输入方式，因为移动设备与桌面设备完全不同。 我需要能够将自动完成和图像添加到数据网格中，这是可选的。
是否有这样的数据网格组件可用？ 与http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html类似，但更适合移动设备。
任何提示，url或建议都非常感谢。
如果您只是在寻找网格，那么您可以尝试以下两种方法：
1140 css网格 960 css网格
两者都以响应的方式帮助构建内容。
我使用的是1140，因为它与Jquery Mobile配合得很好。 它使用类container ， row ， span1-12 ，因此您可以在最多12个单元格的行中构建内容。 例如：
A B C D 在平板电脑上为您提供：
ABCD
在智能手机上
A B C D
你可以很好地将它与JQM可折叠或可折叠集合混合，如下所示：
headline
关于平板电脑和手机上的图像，请看一下自适应图像 。
编辑 ：
这是我的tableview插件设置的链接。 这是一个由Jquery Mobile增强的自适应表。 单击filter右上角的对话框以打开隐藏/显示行的对话框。 收缩屏幕，桌子应该适应。 如果这是你正在寻找的东西，我可以尝试使用带有数据表的tableview来调整我在项目中所做的页面。 然而它只支持我需要的东西，所以它远未完成（尤其是ui）。
* =========================编辑======================= == *
好。 以下是如何使用Jquery Mobile设置数据表的快速简介。
1）您将需要我修改过的数据表版本。 此版本用数据表中的JqueryMobile UI替换所有JqueryUI。 到目前为止，我只完成了我需要的基本内容，随时可以填写:-)
以下是该文件的链接： 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 = $(''); $(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 = $(''); $(this).prepend(tableSelectMenu).jqmData('rpsv',i) });
这样选择将在JQM pagecreate事件运行之前创建，因此如果您想要自定义选择切换表列，则可以添加data-native-menu =“false” 。
最后……表格如下：
// create a wrapper
这就是全部…一旦你有第一个工作，其余的更容易:-)
如果您在设置时需要帮助，请告诉我。
我认为你正在寻找一个表/网格组件（允许分页，排序，过滤和就地编辑），而不是CSS网格。
在这种情况下，有几个选择：
- Datatables.net调整得非常好 – 请参阅此示例
- 默认情况下， Dynatable也可以很好地resize
有关表组件的function比较，请参阅http://reactive-table.meteor.com
这可能会有所帮助： http ： //jquerymobile.com/test/docs/content/content-grids.html
您应该能够向网格单元格动态添加任何内容。
我会采用jQuery mobile或Twitter Bootstrap。
Bootstrap非常擅长为每个设备重新resize。