 Show Posts
|
|
Pages: [1] 2
|
|
3
|
General Category / General Discussion / [Solved] heavy page, 4000 lines, ..how to load it ? with a spinner ?
|
on: March 04, 2018, 06:15:50 PM
|
So my page is 4000+ lines and while loading, it shows all the controls in an unformatted, HTML looking, ugly thing. To hide the ugliness, I hide the <body>, like so: <script>
document.write('<style>body{visibility:hidden;}</style>');
jQuery(document).ready(function(){
delay();
});
function delay() {
var secs = 1;
setTimeout('initFadeIn()', secs);
}
function initFadeIn() {
jQuery("body").css("visibility","visible");
jQuery("body").css("display","none");
jQuery("body").fadeIn(200);
}
</script> It does the job of showing the page when its ready but it can take 10+ sec. in a slow connection and the page looks blank, lifeless, dead, as if nothing is going on or something is wrong. My question is: is there a way to show a spinner of sorts while the <body> is ready to be shown ? If you can provide an example page in http://code.reloado.com ( or similar ) better. Thanks |
|
|
|
|
4
|
General Category / EasyUI for jQuery / [Solved] easyui-panel, show/hide header and footer
|
on: March 03, 2018, 12:21:42 PM
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hide header and footer - jQuery EasyUI Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2">
<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.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body bgcolor="violet">
<div id="idPanelMainFooter" style="padding:5px;">
<table style="width:100%">
<tr>
<td align="right">
<a class="easyui-linkbutton" data-options="plain:true,disabled:true">| nice looking label |</a>
</td>
</tr>
</table>
</div>
<div id="idPanelMain" class="easyui-panel" title="" data-options="border:true,fit:true,footer:'#idPanelMainFooter'" style="width:100%;height:100%;">
<header id="idPanelMainHead">
<span style="display:inline-block;"><b>
<a id="idTestJs" class="easyui-linkbutton" onclick="doTestFake()" data-options="plain:true,disabled:false" style="display:inline-block;width:100%;">Header title</a>
</b></span>
<span style="float:right;">
<a class="easyui-linkbutton" onclick="doLogoutFake()" data-options="iconCls:'icon-lock',plain:false" style="width:150px;">Logout</a>
</span>
</header>
<div class="easyui-tabs" data-options="fit:true">
<div title="Show / Hide stuff">
<p>
Pagination on
<select id="p-pos" class="easyui-combobox" data-options="editable:false,value:'top',onChange:changeP" onchange="changeP()">
<option>bottom</option>
<option>top</option>
<option>both</option>
</select> Style
<select id="p-style" class="easyui-combobox" data-options="editable:false,value:'links',onChange:changeP" onchange="changeP()">
<option>manual</option>
<option>links</option>
</select>
</p>
<table class="table-flat" style="width:auto;">
<tr>
<td><span><b>Hide header and footer: </b></span></td>
<td>
<input class="easyui-switchbutton" data-options="disabled:false,checked:false,onText:'YES',offText:'NO',onChange:onChangeHeaderFooter">
</td>
<td> </td>
</tr>
</table>
</div>
<div title="Datagrid here" style="padding:2px">
<table id="tt" class="easyui-datagrid" data-options="fit:true,url:'fake.php',title:'Load Data',iconCls:'icon-save',rownumbers:true,pagination:true">
<thead>
<tr>
<th field="field1" width="auto">field1</th>
<th field="field2" width="140" align="center" hidden="true">field2</th>
<th field="field3" width="110" align="center">field3</th>
<th field="field4" width="140">field4</th>
<th field="field5" width="70" align="right">field5</th>
<th field="field6" width="70" align="center">field6</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function changeP() {
console.log('function changeP()');
var dg = $('#tt');
dg.datagrid('loadData', []);
dg.datagrid({
pagePosition: $('#p-pos').val()
});
dg.datagrid('getPager').pagination({
layout: ['list', 'sep', 'first', 'prev', 'sep', $('#p-style').val(), 'sep', 'next', 'last', 'sep', 'refresh', 'info']
});
}
function onChangeHeaderFooter(checked) {
console.log('onChangeHeaderFooter(' + checked + ')');
var x = document.getElementById("idPanelMainHead");
var y = document.getElementById("idPanelMainFooter");
if (checked) {
x.style.display = "none";
y.style.display = "none";
} else {
x.style.display = "block";
y.style.display = "block";
}
$('#idPanelMain').panel('resize', {
width: 100,
height: 100
});
setTimeout(function() {
$('#idPanelMain').panel('expand');
}, 200);
}
</script>
</body>
</html> This is going to run mainly on PCs, so, the example of my code is at http://code.reloado.com/inexay3/edit#html,livebut I'd like to use it in a phone browser's too, so, a more realistic preview is at http://code.reloado.com/eyakex3/edit#previewSince on the phone the "real estate" is small, I'll need to hide some parts, in this case, the nice header and footer, takes up a lot of space that I can use to view the datagrid. I've tried everything that I can think of to no avail, and I can't get the panel to reclaim the space of the header and footer. Thanks |
|
|
|
|
5
|
General Category / General Discussion / Re: File upload example - queue up in JS and status in datagrid
|
on: February 19, 2018, 10:21:15 PM
|
The code you've shared is functional and does upload. The 'RowID' field should be appended to the form to bind the uploading file with the selected row. As far as I can see, the #RowID does not do anything, so, what is its purpose ?, I don't see the binding.I assume I am to populate it with the the "db RowID", ..ok, so I can pass the value to my upload.php file. Got it. Also, as I upload, they all upload concurrently, and part of the idea is having a queue to upload sequentially. Is important for low bandwidth environments. Would you care to show how it can be queued up ?, I haven't had much luck imagining how to go about it. Thanks for your patience with me stworthy, I know this question is outside jEasyUI support  |
|
|
|
|
6
|
General Category / General Discussion / Re: File upload example - queue up in JS and status in datagrid
|
on: February 19, 2018, 09:37:26 AM
|
Define a function 'uploadFile' to upload the selected file. When start to uploading a file, update the selected row's status to 'uploading'. When uploading action is finished, update the row's status to 'finished'. Please refer to the code below:
Thanks stworthy. Reading the code I see that, 1, there is no error handling or handling of any returned value from upload.php and, (got that part in PS3*) 2, there is no queue list of files. I find both features important. Could you show me how to code those. // upload.php would return $response as:
$response["fileName"] = $fileName;
$response["message"] = 'OK';
$response["error"] = false;
echo json_encode($response); so the function uploadFile would have something of the like: if (xhr.status >= 200 && xhr.status < 300) {
succ(RowID, 'finished', fileName, message);
// and I'd like to get data back from the url
// that could be the fileName used, etc.,
} else {
succ(RowID, 'error', '', xhr.status);
// in case of not "xhr.status 2xx"
}
Thanks PS: I'm using https://www.jeasyui.com/forum/index.php?topic=7052.msg18466#msg18466 as bases for my code. I did not include it in the mockup as I thought it would not be needed. PS2: I've added id="file" class="easyui-filebox" to have a $(#file), now, in var RowID = $('#RowID').val();, could not find #RowID*PS3: if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
var ret = JSON.parse(xhr.responseText);
succ(RowID, ret.message);
} else {
succ(RowID,'error ' + xhr.status);
// in case of not "return 2xx"
}
} |
|
|
|
|
7
|
General Category / General Discussion / File upload example - queue up in JS and status in datagrid
|
on: February 19, 2018, 01:05:45 AM
|
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 |
|
|
|
|
8
|
General Category / EasyUI for jQuery / Re: menu-sep, sep, button-sep
|
on: February 14, 2018, 11:22:40 AM
|
..ended up adding the color to the end of each theme's easyui.css file. .button-sep {
display:inline-block;
vertical-align:middle;
height: 24px;
border-left: 1px solid blue; // look for "border-left: 1px solid" to find the color for the theme
border-right: 1px solid red; // look for "border-right: 1px solid" to find the color for the theme
margin: 2px 1px;
} |
|
|
|
|
10
|
General Category / EasyUI for jQuery / Re: CSS, default background input color for dropdown
|
on: February 12, 2018, 08:51:27 AM
|
Quite interesting. If the the CSS declaration is after everything else is loaded, then it acts as expected. So I'll play around to load this last as an added CSS or something. Thank you jarry for the clarification. Can an implementation of default-control-background-color be available on a future version of jEasyUI ? The https://www.jeasyui.com/themebuilder/index.php does not have one and, is the only thing that has no declaration of, and it would be most welcomed, as in this "hack", it overrides validatebox-invalid and probably other features. This hack, as is, does not allow me to change the theme on the fly. I'll mark this post as solved but if you come up with a better solution, please do post. Thanks Example of Dark Hive theme ( at 200% to watch in detail ):  PS: ..what I ended up doing is creating a .CSS and loading a default one first and if the extra exists, loading that after: function onChangeTheme(theme) {
jQuery('#themesStylesheet').attr('href', '../../eu154/themes/' + theme + '/easyui.css?v=' + Math.random());
jQuery('#themesStylesheet2').attr('href', '../../eu154/themes/easyui.added.css?v=' + Math.random());
jQuery('#themesStylesheet2').attr('href', '../../eu154/themes/' + theme + '/easyui.added.css?v=' + Math.random());
// ..the "?v=' + Math.random()" is to force refresh cached files ;)
}The head in my code looks like: <head>
<link id="themesStylesheet" rel="stylesheet" type="text/css" href="../../eu154/themes/<?PHP echo $cssThemeColor; ?>/easyui.css">
<link rel="stylesheet" type="text/css" href="../../eu154/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../eu154/demo/demo.css">
<link id="themesStylesheet2" rel="stylesheet" type="text/css" href="../../eu154/themes/<?PHP echo $cssThemeColor; ?>/easyui.added.css">
...
The CSS itself is: input, select, .textbox,.textbox .textbox-text{
background-color: #ffffff;
background: #ffffff;
}
.textbox-addon{
background: #ffffff;
} for the "default" and the specific easyui.added.css to its folder. In my case, the other easyui.added.css goes in the \black\ folder. For the above pic. of the Dark Hive theme, the CSS is: input, select, .textbox,.textbox .textbox-text{
background-color: #dddddd;
background: #dddddd;
}
.textbox-addon{
background: #222222;
}Again, if this can be addressed on a next version it'd be very welcomed. |
|
|
|
|
12
|
General Category / EasyUI for jQuery / [Solved] CSS, default background input color for dropdown
|
on: February 11, 2018, 11:35:00 AM
|
I'm trying to change the background color of the black theme's selected/input color and I don't find an easy way ( or any way really )  I did the change to red by adding to the easyui.cssinput {
background-color: red;
}, I'm gonna use a pale gray color, as the default white, is kind of bright for a dark theme. But those areas that are white, I'd like to change to the background color too, as it would otherwise look ugly. Thanks |
|
|
|
|
13
|
General Category / EasyUI for jQuery / [Solved] autosize DataGrid row numbers disrupted by ComboGrid
|
on: February 06, 2018, 10:36:00 PM
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>Expand row in DataGrid to show details - jQuery EasyUI Demo</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-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>
If the <b>ComboGrid is removed</b>, the row numbers autosize.<br><br>
Actually, just removing the <b>class="easyui-combogrid"</b> is sufficient.<br><br>
</div>
</div>
<div id="tbSampleToolbar" style="padding: 4px">
<span style="white-space: nowrap"> Sample ComboGrid:
<select id="tbSample" class="easyui-combogrid" data-options="
width: 100,
panelWidth: 500,
panelHeight: 150,
multiple: true,
editable: false,
idField: 'id',
textField: 'id',
columns: [[
{field:'id',title:'ID',width:50},
{field:'name',title:'Name',width:120}
]],
fitColumns: true,
data:
{'total':3,'rows':[
{'id':'id1','name':'Name One'},
{'id':'id2','name':'Name Two'},
{'id':'id3','name':'Name Three'}
]}
">
</select>
</span>
<a class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="javascript:console.log('Search');">Search</a>
<div class="menu-sep"></div>
<a class="easyui-linkbutton" iconCls="icon-clear" plain="true" onclick="javascript:console.log('Clear');">Clear</a>
</div>
<table id="dgTest">
<thead frozen="true">
<tr>
<th field="itemid" width="180">Item ID</th>
</tr>
</thead>
<thead>
<tr>
<th field="productid">Product ID</th>
<th field="listprice" align="right">List Price</th>
<th field="unitcost" align="right">Unit Cost</th>
<th field="attr1">Attribute</th>
<th field="status" align="center">Status</th>
</tr>
</thead>
</table>
<br><br><br>
< ?php // datagrid8_getdata.php <br>
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;<br>
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;<br>
$items = array();<br>
for($i=1; $i<=$rows; $i++){<br>
$index = $i+($page-1)*$rows;<br>
$items[] = array(<br>
'itemid' => $index,<br>
'productid' => 'productid ' . $index,<br>
'listprice' => 'listprice ' . $index,<br>
'unitcost' => 'unitcost ' . $index,<br>
'attr1' => 'attr1 ' . $index,<br>
'status' => 'status ' . $index,<br>
);<br>
}<br>
$result = array();<br>
$result['total'] = 100000;<br>
$result['rows'] = $items;<br>
echo json_encode($result);<br>
? ><br>
<script type="text/javascript">
$(function() {
$('#dgTest').datagrid({
view: myview,
url: 'datagrid8_getdata.php',
toolbar: '#tbSampleToolbar',
pagination: true,
sortName: 'itemid',
sortOrder: 'desc',
rownumbers: true,
singleSelect: true,
fitColumns: false,
detailFormatter: function(index, row) {
return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';
},
onExpandRow: function(index, row) {
$('#ddv-' + index).panel({
border: false,
cache: false,
href: 'datagrid21_getdetail.php?itemid=' + row.itemid,
onLoad: function() {
$('#dgTest').datagrid('fixDetailRowHeight', index);
}
});
$('#dgTest').datagrid('fixDetailRowHeight', index);
}
});
});
var myview = $.extend({}, $.fn.datagrid.defaults.view, {
onAfterRender: function(target) {
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
var opts = $(target).datagrid('options');
if (opts.rownumbers) {
var lastTr = opts.finder.getTr(target, null, 'last');
var tmp = $('<div style="position:absolute;padding:0 6px;left:-999999"></div>').appendTo('body');
tmp.html(lastTr.find('div.datagrid-cell-rownumber').html());
var width = tmp._outerWidth();
tmp.remove();
$(target).data('datagrid').ss.add([
['.datagrid-cell-rownumber', width + 'px'],
['.datagrid-header-rownumber', width + 'px']
]);
setTimeout(function() {
$(target).datagrid('fitColumns');
}, 0);
}
}
})
</script>
</body>
</html> The preview is at http://code.reloado.com/epuwul3/edit#html,live ( won't run due to the missing php ) If the ComboGrid is removed, the row numbers autosize. Actually, just removing the class="easyui-combogrid" is sufficient for autosize to work as expected. And that is just an example, I have many more controls in the toolbar. Thanks |
|
|
|
|
