I hope this can help you.
It helped me too
Now my problem is that I'd like to have a queue of uploads, and upload one by one in the background, using the RowID as reference, but I have no idea on how to go about it. I've tried very many solutions but I'm just not savvy with javascript.
I made a mockup of the concept at
http://code.reloado.com/awofin/edit#html,live with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo - Upload and grid</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
body { font-family: "Verdana"; }
</style>
</head>
<!-- http://code.reloado.com/awofin/edit#html,live -->
<body>
<p>Select a row and click upload to add it to the upload queue.<br><br>
If is the first in the queue, it will be queued and uploaded,<br>
otherwise, will be queued, to be next in the queue.<br><br>
Uploading will be finished when all queued files are uploaded.<br><br>
The queue idea is to optimize uploading on low bandwith.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="uploadSelected()">Upload for selected</a>
</div>
<!-- grid -->
<table id="dg" title="upload and show status in the grid" style="width:700px;height:400px" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th field="RowID" width="80">db RowID</th>
<th field="uploadStatus" width="100">Upload Status</th>
<th field="name" width="80">Name</th>
<th field="note" width="110">Note </th>
</tr>
</thead>
</table>
<!-- grid -->
<!-- upload dialog-->
<div id="dlg" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:140px;padding:10px" data-options="
closed: true,
modal: true,
iconCls: 'icon-save',
buttons: '#dlg-buttons'
">
<form enctype="multipart/form-data" id="ffUpload" name="ffUpload" method="post">
<table border="0" style="width:100%">
<tr>
<input class="easyui-filebox" data-options="prompt:'Choose a file...'" style="width:100%"> </tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:uploadQueue()">Upload</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<!-- upload dialog-->
<script>
var globalRowsData = []; // if this global works, no clue.
(function($) {
function pagerFilter(data) {
if ($.isArray(data)) { // is array
data = {
total: data.length,
rows: data
}
}
var target = this;
var dg = $(target);
var state = dg.data('datagrid');
var opts = dg.datagrid('options');
if (!state.allRows) {
state.allRows = (data.rows);
}
if (!opts.remoteSort && opts.sortName) {
var names = opts.sortName.split(',');
var orders = opts.sortOrder.split(',');
state.allRows.sort(function(r1, r2) {
var r = 0;
for (var i = 0; i < names.length; i++) {
var sn = names[i];
var so = orders[i];
var col = $(target).datagrid('getColumnOption', sn);
var sortFunc = col.sorter || function(a, b) {
return a == b ? 0 : (a > b ? 1 : -1);
};
r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1);
if (r != 0) {
return r;
}
}
return r;
});
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = state.allRows.slice(start, end);
return data;
}
var loadDataMethod = $.fn.datagrid.methods.loadData;
var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
$.extend($.fn.datagrid.methods, {
clientPaging: function(jq) {
return jq.each(function() {
var dg = $(this);
var state = dg.data('datagrid');
var opts = state.options;
opts.loadFilter = pagerFilter;
var onBeforeLoad = opts.onBeforeLoad;
opts.onBeforeLoad = function(param) {
state.allRows = null;
return onBeforeLoad.call(this, param);
}
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function(pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', state.allRows);
}
});
$(this).datagrid('loadData', state.data);
if (opts.url) {
$(this).datagrid('reload');
}
});
},
loadData: function(jq, data) {
jq.each(function() {
$(this).data('datagrid').allRows = null;
});
return loadDataMethod.call($.fn.datagrid.methods, jq, data);
},
deleteRow: function(jq, index) {
return jq.each(function() {
var row = $(this).datagrid('getRows')[index];
deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
var state = $(this).data('datagrid');
if (state.options.loadFilter == pagerFilter) {
for (var i = 0; i < state.allRows.length; i++) {
if (state.allRows[i] == row) {
state.allRows.splice(i, 1);
break;
}
}
$(this).datagrid('loadData', state.allRows);
}
});
},
getAllRows: function(jq) {
return jq.data('datagrid').allRows;
}
})
})(jQuery);
function getData() {
for (var i = 1; i <= 800; i++) {
globalRowsData.push({
RowID: i,
uploadStatus: 'none yet',
name: 'Name ' + i,
note: 'Note ' + i
});
}
return globalRowsData; // I made it a "global", but I don't know how it'd work in this demo.
}
$(function() {
$('#dg').datagrid({
data: getData()
}).datagrid('clientPaging');
});
function uploadQueue(){
$('#dlg').dialog('close');
$.messager.alert('todo','queue up chosen file<br>and start ulpoad<br>if none is active');
}
function uploadSelected() { // is gonna be just 1 selected
var ss = [];
var rows = $('#dg').datagrid('getSelections');
if (rows.length < 1) {
return false;
}
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
ss.push('<span>' + row.RowID + "<br>" + row.name + "<br>" + row.note + '</span>');
$('#dlg').dialog({title: ' upload for RowID = ' + row.RowID});
}
$('#dlg').dialog('open');
}
</script>
</body>
</html>
I'm stuck until I get this solved.
Thanks