移动数据输入 - 移动友好的数据网格 [英] mobile data entry - mobile friendly datagrid
问题描述
是否有这样的datagrid组件可用？
类似于 http://datatables.net/release-datatables/examples /basic_init/multi_col_sort.html
，但更适合移动设备。
非常感谢任何提示，网址或建议。
如果您只是寻找一个网格，那么你可以尝试这两个：
这两个帮助以响应方式构建内容。
我使用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>
平板电脑上有哪些：
ABCD
在智能手机上
A
B
C
D
您可以很好地与JQM可折叠或可折叠集合进行混合，如下所示：
< div class =container>
< div data-role =collapsibledata-collapsed =true>
< h3>标题< / h3>
<！ - 开始网格行--->
< div class =row>
< div class =span4><！ - content - >< / div>
< div class =span4><！ - content - >< / div>
< div class =span4><！ - content - >< / div>
< / div<
< / div>
<！ - 结束可折叠或开始在下一个集合 - >
< / div>关于平板电脑和手机上的图像，请查看自适应图像。
编辑：
这是一个指向我的 tableview插件设置的链接。这是一个由Jquery Mobile增强的自适应表。点击过滤器的右上方可打开一个对话框来隐藏/显示行。收缩屏幕，表应适应。如果这是您正在寻找的，我可以尝试从我的项目中使用tableview与数据表一起翻页。然而，它只支持我需要的东西，所以它远不完整（尤其是ui）。
* =========== ==============编辑======================= *
好的以下是如何使用Jquery Mobile设置数据的快速介绍。
1）您将需要修改后的数据表版本。此版本使用JqueryMobile UI在数据表中替换所有JqueryUI。到目前为止，我只做了我需要的基本的东西，随时随地进入： - ）
这里是一个文件链接： JQM数据表 - 搜索XXX查看我所做的改变
2）我正在使用常规的数据表函数调用，如下所示：
tblPos = table.dataTable {
sDom：'<Sf> t<Elpi>'，/ *表格布局* /
bJQueryMobileUI：true，/ * JQM UI * /
sPaginationType：full_numbers/ / pagination type * /
bPaginate：true，/ * pagination active * /
bRetrieve：true，/ * hide warnings * /
bCustomFilter：false，/ *使用自定义过滤器* /
bLengthChange：true，/ *结果数* /
bAutoWidth：false，/ *
aaSorting：[[0，asc]]，/ *默认排序col 0 desc * /
aoColumns：[
/ * Pos * / {sClass：jqmSorter}，/ * sortable * /
/ * EAN / GTIN * / {bSortable ，/ *不可排序* /
/ *样式否* / {sClass：jqmSorter}，
/ * Desc。 * / {bSortable：false}，
/ *大小* / {bSortable：false}，
/ *颜色* / {bSortable：false}，
/ *价格* / {bSortable：false}，
/ *单位* / {bSortable：false}，
/ *数量* / {bSortable：false}，
/ *确认* / {bSortable：false}，
/ *总计* / {bSortable：false}，
]，
fnHeaderCallback：function（nHead）{
sortableHeaderCells（nHead）/ *嵌入可排序按钮* /
}，
fnInitComplete：function（oSettings，json）{
createJQMTable（oSettings，json）/ *运行JQM make-一次表建成* /
}
这是从我正在使用的一个例子，所以所有使用的函数都应该可以。以下是 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，
corner：false，
theme：'a'，
iconpos：right，
图标：'sort'
}）
sortButton.addClass（colHighTrigger ）
.find（'。ui-btn-text'）。text（sortTitle）;
$（this）.html（sortButton）
}）;
}
这一个很简单。如果您将表列标记为可排序，则该函数将从中创建一个JQM按钮。
下一个，不那么容易...
函数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：firstth [rowspan = 2]，TR：first TH [rowspan = 2]）。 add（thead.find（tr：last-child th，TR：last-child TH）），
dropSel;
/ *如果嵌套表* /
，则删除顶部边框*（$）如果（thead.closest（'。containsTable'）。length> 0）{
$（顶层包装）。removeClass（'ui-corner-top'）;
}
/ *填写剩余2个插槽* /
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（ block'b noIconposSwitcher-div）。find（'label'）。addClass（'hideLabel'）;
}
函数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 = $ ）
id = th.attr（id），
allClasses = th.attr（class）。split（/ \s + /）;
/ /如果（！id）{
id =（idprefix？idprefix：col-）+ i;
th.attr （id，id）;
};
//从头
检索切换类（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'）
}
}
//将匹配的头属性分配给关联的c ells
bodyRows.add（footRows）.each（function（）{
var cell = $（this）.find（th，td）。
cell.attr（headers，id）;
if（classes）{
cell.addClass（classes）;
} else cell.addClass（'only'）;
}）;
//创建隐藏/显示切换
如果（！th.is（。+ persist））{
var toggle = $（'< option value = '+ id +'>'+ th.text（）+'< / option>'）;
$（togSel）.append（toggle）;
}
//收听列更新
// $（'body'）。一（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）;
}）; //结束hdrCols循环
//收听选择变量
// $（'body'）。on（'change'，$（togSel），function（） {
$（togSel）.on（'change'，function（）{
$（this）.attr（'blocked'，true）;
togCols（$（this））;
}）
//只为iPad
$（togSel）.on（'blur'，function（）{
if（$（this）.attr （'blocked'）！= true）{
togCols（$（this））;
}
}）;
函数togCols（SelectElement）{
var topRow = thead.find（'tr'）。length> 1？thead.find（tr：first-child th，TR：first-child TH）。not（'[rowspan = 2]'）：，
/ *不知道为什么需要-1，否则长度总是一个太高，也许因为功能在可见性被切换之前运行* /
bottomCells = thead.find tr：last-child th：visible，TR：last-child TH：visible）。length - 1;
SelectElement.find（option）。 ch（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'）;
}
//更新输入的检查状态
$（window）.on（orientationchange resize，function（）{
$ （'.ui-page-active .updateCols选项'）。trigger（updateCheck）;
}）;
//更新selectmenu并将其移动到表
$（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）;
//确保所有元素都被增强
$（'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 =aname =toggleCols =updateColsid =toggleCols _'+ i +'multiple =multipledata-icon =setupdata-iconpos =notext>< / select>'）;
$（this） .prepend（tableSelectMenu）.jqmData（'rpsv'，i）
}）;
这样将在JQM pagecreate事件运行之前创建选择，因此您可以添加 data-native-menu =false如果你想有一个自定义选择来切换表列。
最后...这样的表：
//创建一个包装器
< div class =table-wrapper ui-embedded>
//填充表头中的可用插槽，将slot1 / 2/3分配给一个div
//这些也将被更改为JQM元素。
< div data-role =fieldcontainclass =slot2>
< label class =select> View：< / label>
< select name =ansichtdata-inline =true>
< option selected =value =1> 1< / option>
< option value =2> 2< / option>
< / select>
< / div>
< table class =tbl_basket_style>
//双头标题行是soso支持
< thead>
< tr>
// .optional将被隐藏如果没有空格
// .essential将被显示，如果可能的话
// .persist永远是可见的
< th data-sort = 0class =optional> Pos。< / th>
< th data-sort =1class =essential persist> Style< / th>
< th data-sort =2>描述< / th>
< th data-sort =3class =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 =hiddenid =preis11value =3.00>
< / td>
...
< / tr>
< / tbody>
< tfoot>
< tr>
< td>< / td>
...
< / tr>
< / tfoot>
< / table>
< / div>
这就是所有...一旦你有第一个工作，其余的更容易： ）
如果您需要帮助设置此项，请告诉我们。
I have the following challenge in my hands. I need to redesign a desktop order entry web application to mobile using html5 and js. I am trying to find a proper way to do order entry, since mobile devices are quite different from desktop. I need to be able to add auto-complete and images into the data grid, that are optional.
Is there such a datagrid component available?
Similar to http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html
but more suitable for mobile devices.
Any tips, urls, or advice is highly appreciated.
解决方案 If you are just looking for a grid, then you can try both of these:
Both help structure content in a responsive way.
I'm using 1140 quite a lot, because it goes well with Jquery Mobile. It uses classes container, row, span1-12, so you can structure your content in rows up to 12 cells. For example:
<div.container></div>
<div.row></div>
<div.span1>A</div>
<div.span5>B</div>
<div.span5>C</div>
<div.span1>D</div>
</div>
</div>
Which on tablet gives you:
A B C D
And on smartphone
A
B
C
D
You can mix this very well with JQM collapsibles, or collapsible sets, like so:
<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>
Regarding images on tablet and mobile, have a look at adaptive images.
EDIT:
Here is a link to my tableview plugin setup. This is an adaptive table which is enhanced by Jquery Mobile. Click top right at the filter to open a dialog to hide/show rows. Shrink the screen, the table should adapt. If this is what you are looking for, I could try to fiddle out a page I did from my project using tableview with datatables. However it only supports the stuff I need, so it's far from complete (especially the ui).
*========================= EDIT ========================= *
Ok. Here is a quick rundown how to setup datatables with Jquery Mobile.
1) You will need my modified datatables version. This version replaces all JqueryUI with JqueryMobile UI in datatables. So far I have only done the basic stuff I need, feel free to chip in :-)
Here is a link to the file: JQM datatables - search for "XXX" to see what I changed
2) I'm using the regular datatables function call like so:
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 */
}
This is from an example I'm using, so all of the used functions should be ok. Here are the fnHeaderCallback and fnInitComplete function, which create sortable headers, where you specificy and JQM the whole table:
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 )
});
}
This one is easy. If you label a table column as sortable, the function will create a JQM button out of it.
The next one, not so easy ...
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');
}
This function creates the responsive table layout. I did this using Filaments RWD-Pattern, plus took some stuff from JQM.
VERY IMPORTANT:
If you want the responsive select to be a JQM custom select you need to add it's variable and an empty select at the beginning of your js file, before anything happens, like so:
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)
});
This way the select will be created BEFORE the JQM pagecreate event runs, so you could add data-native-menu="false" if you wanted to have a custom select to toggle table columns.
Finally... the table like so:
// 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>
That's all... Once you have the first one working, the remaining ones are much easier :-)
Let me know if you need help in setting this up.
这篇关于移动数据输入 - 移动友好的数据网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
