移动数据输入 - 移动友好的数据网格

我面临以下挑战。我需要使用 html5 和 js 将桌面订单输入 Web 应用程序重新设计到移动设备。我正在尝试找到一种正确的方式来输入订单，因为移动设备与桌面设备有很大不同。我需要能够将自动完成和图像添加到数据网格中，这是可选的。

有这样的数据网格组件可用吗？ 如同http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html但更适合移动设备。

任何提示、网址或建议都将受到高度赞赏。

如果您只是在寻找网格，那么您可以尝试以下两种方法：

1140 CSS 网格 http://cssgrid.net/ 960 CSS 网格 http://jeromeetienne.github.com/jquery-mobile-960/

两者都有助于以响应式方式构建内容。

我经常使用 1140，因为它与 Jquery Mobile 配合得很好。它使用类容器, 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>

关于平板电脑和移动设备上的图像，请查看自适应图像 http://adaptive-images.com/details.htm.

EDIT:
这是我的链接表格视图插件设置 http://stokkers.mobi/jqm/tableview/demo.html。这是一个由 Jquery Mobile 增强的自适应表。单击过滤器的右上角可打开一个对话框来隐藏/显示行。缩小屏幕，表格应该适应。如果这就是您正在寻找的内容，我可以尝试使用带有数据表的表视图从我的项目中找出一个页面。然而它只支持我需要的东西，所以它还远远不够完整（尤其是用户界面）。

*=========================编辑======================== = *
好的。以下是如何使用 Jquery Mobile 设置数据表的快速概述。

1）您将需要我修改后的数据表版本。此版本将数据表中的所有 JqueryUI 替换为 JqueryMobile UI。到目前为止，我只完成了我需要的基本工作，请随意参与:-)

这是该文件的链接：JQM 数据表 http://www.stokkers.mobi/jqm/tableview/jquery.dataTables.js- 搜索“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 */
    }

这是来自我正在使用的示例，因此所有使用的功能都应该没问题。这里有fnHeader回调 and fn初始化完成函数，它创建可排序的标题，您可以在其中指定并堵塞整个表：

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');

    }

此函数创建响应式表格布局。我这样做是使用灯丝 RWD 模式 https://github.com/frequent/RWD-Table-Patterns，加上从 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 事件运行之前创建，因此您可以添加数据本机菜单=“假”如果您想要自定义选择来切换表格列。

最后...表格如下：

// 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>

就这样...一旦第一个工作正常，剩下的就容易多了:-)

如果您在设置方面需要帮助，请告诉我。