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

Question

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

是否有可用的数据网格组件？ 与http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html相似 但更适合移动设备。

任何提示，网址或建议都非常感谢。

Answer 1

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

1140 css grid    960 css grid

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

我使用1140非常多，因为它与Jquery Mobile配合得很好。它使用类容器，行， 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）您将需要我修改过的数据表版本。此版本用数据表中的JqueryMobile UI替换所有JqueryUI。到目前为止，我只完成了我需要的基本内容，随时可以填写： - ）

以下是该文件的链接：JQM datatables - 搜索＆＃34; XXX＆＃34;看看我改变了什么

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 =＆＃34; false＆＃34; 切换表格列。

最后......表格如下：

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

全部......一旦你有第一个工作，剩下的就更容易了： - ）

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

Answer 2

我认为您正在寻找一个表/网格组件（允许分页，排序，过滤和就地编辑），而不是CSS网格。

在这种情况下，有几个选项：

• Datatables.net调整得非常好 - 请参阅this example
默认情况下，
• Dynatable也可以很好地调整大小

有关表组件的功能比较，请参阅http://reactive-table.meteor.com

Answer 3

这可能有所帮助：http://jquerymobile.com/test/docs/content/content-grids.html

您应该能够向网格单元格动态添加任何内容。

Answer 4

我会使用jQuery mobile或Twitter Bootstrap。

Bootstrap非常擅长为每台设备重新调整大小。

http://twitter.github.com/bootstrap/