EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: varonica on October 28, 2013, 08:07:22 PM


Title: DataGrid Buffer: height issue
Post by: varonica on October 28, 2013, 08:07:22 PM
As referring to http://www.jeasyui.com/extension/datagridview.php (http://www.jeasyui.com/extension/datagridview.php) I'm still facing a problem with setting height on DataGrid Buffer. Everytime i set a height larger than 304px, it starts getting problem. Please check!!

Here's my complete code:
Code:
//index.php
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI</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">
	<style type="text/css">
		.datagrid-header-rownumber,.datagrid-cell-rownumber{
			width:35px;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="datagrid-bufferview.js"></script>
	<script>
		$(function(){
			$('#tt').datagrid({
				view:bufferview,
				url:'get.php',
				title:"DataGrid - BufferView",
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pageSize:50
			});
			
			
		});
		function editUser(){  
			var row = $('#tt').datagrid('getSelected');  
			if (row){  
				alert(row.inv);
			}
		}
	</script>
</head>
<body>
	<h1>DataGrid - BufferView</h1>
	
	<table id="tt" style="width:700px;height:303px" >
		<thead>
			<tr>
				<th field="inv" width="80">Inv No</th>
				<th field="date" width="100">Date</th>
				<th field="name" width="80">Name</th>
				<th field="amount" width="80" align="right">Amount</th>
				<th field="price" width="80" align="right">Price</th>
				<th field="cost" width="100" align="right">Cost</th>
				<th field="note" width="110">Note</th>
			</tr>
		</thead>
	</table>
	<a class="easyui-linkbutton" onClick="editUser()" >Edit</a>
</body>
</html>

//get.php
<?php
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$result = array();

//conection:
$link = mysqli_connect("localhost","root","","test") or die("Error " . mysqli_error($link));

$rs = mysqli_query($link,"select count(*) from inventory");
$row = mysqli_fetch_row($rs);
$result["total"] = $row[0];
$rs = mysqli_query($link,"select * from inventory limit $offset,$rows");

$items = array();
while($row = mysqli_fetch_object($rs)){
	array_push($items, $row);
}
$result["rows"] = $items;

echo json_encode($result);



Please help!!!  :( :( :( ??? ??? ??? ??? :'( :'( :'( :'( :'( :'( :'( :'(

Title: Re: DataGrid Buffer: height issue
Post by: stworthy on October 29, 2013, 12:00:49 AM
What is the problem with buffer view? Providing the json data the buffer view used may be more appropriate.

Title: Re: DataGrid Buffer: height issue
Post by: varonica on October 29, 2013, 12:27:25 AM
Please try set height:400px;
Code:
<table id="tt" style="width:700px;height:400px" > // the problem is here, try set height to 400px
		<thead>
			<tr>
				<th field="inv" width="80">Inv No</th>
				<th field="date" width="100">Date</th>
				<th field="name" width="80">Name</th>
				<th field="amount" width="80" align="right">Amount</th>
				<th field="price" width="80" align="right">Price</th>
				<th field="cost" width="100" align="right">Cost</th>
				<th field="note" width="110">Note</th>
			</tr>
		</thead>
	</table>

//here is json data i copied from firebug
{"total":"143","rows":[{"no":"1","domain":"www.test.com","status":"A","regdate":"10\/03\/2013","expdate":"30\/10\/2013","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-18 01:33:48","last_update":"2013-10-19 10:41:00","last_update_user":"admin","is_deleted":"0","remain":"1"},{"no":"2","domain":"www.test1.com","status":"A","regdate":"10\/03\/2013","expdate":"03\/10\/2014","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-18 01:33:48","last_update":"2013-10-19 10:41:00","last_update_user":"admin","is_deleted":"0","remain":"339"},{"no":"3","domain":"www.test2.com","status":"A","regdate":"10\/03\/2013","expdate":"03\/10\/2009","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-18 01:33:48","last_update":"2013-10-19 10:41:00","last_update_user":"admin","is_deleted":"0","remain":"-1487"},{"no":"4","domain":"www.test2.com","status":"D","regdate":"10\/03\/2013","expdate":"03\/10\/2009","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-18 01:33:48","last_update":"2013-10-19 10:41:00","last_update_user":"admin","is_deleted":"0","remain":"-1487"},{"no":"5","domain":"sdf","status":"A","regdate":"31\/10\/2013","expdate":"31\/10\/2014","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-21 20:55:37","last_update":"2013-10-21 20:55:37","last_update_user":"admin","is_deleted":"0","remain":"367"},{"no":"6","domain":"aaa","status":"D","regdate":"","expdate":"","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-21 20:57:00","last_update":"2013-10-21 20:57:00","last_update_user":"admin","is_deleted":"0","remain":null},{"no":"7","domain":"gga","status":"A","regdate":"25\/10\/2013","expdate":"25\/10\/2014","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-21 20:57:09","last_update":"2013-10-21 20:57:09","last_update_user":"admin","is_deleted":"0","remain":"361"},{"no":"8","domain":"gggg","status":"D","regdate":"","expdate":"","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-21 20:57:18","last_update":"2013-10-21 20:57:18","last_update_user":"admin","is_deleted":"0","remain":null},{"no":"9","domain":"gaaaa","status":"D","regdate":"25\/10\/2012","expdate":"25\/10\/2013","hosting":"1","url":"http:\/\/asdf@afd.adfd","webhosting":"adf","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"bbbb","contact":"vvv","other":"hhhh","date_submit":"2013-10-21 20:57:25","last_update":"2013-10-24 01:54:47","last_update_user":"admin","is_deleted":"0","remain":"-4"},{"no":"10","domain":"dwerew","status":"A","regdate":"01\/11\/2013","expdate":"01\/11\/2014","hosting":"0","url":"","webhosting":"","info":"","gmail":"0","gmailadmuser":"","gmailadmpwd":"","cpusername":"","cppwd":"","contact":"","other":"","date_submit":"2013-10-21 20:57:35","last_update":"2013-10-21 20:57:35","last_update_user":"admin","is_deleted":"0","remain":"368"}]}

Title: Re: DataGrid Buffer: height issue
Post by: stworthy on October 29, 2013, 01:50:31 AM
Please refer to http://jsfiddle.net/sYznv/

Title: Re: DataGrid Buffer: height issue
Post by: varonica on October 29, 2013, 02:21:43 AM
Can you please try on remote data ?

Title: Re: DataGrid Buffer: height issue
Post by: varonica on October 29, 2013, 06:36:06 PM
Something went wrong on while loop but after i try "alert(this.renderedCount+'-'+state.data.total);" It works fine. I really have no idea what is going on there?
Code:
        onBeforeRender: function(target){
		var state = $.data(target, 'datagrid');
		var opts = state.options;
		var dc = state.dc;
		var view = this;
		this.renderedCount = 0;
		this.rows = [];
		
		// erase the onLoadSuccess event, make sure it can't be triggered
		state.onLoadSuccess = opts.onLoadSuccess;
		opts.onLoadSuccess = function(){};
		
		dc.body1.add(dc.body2).empty();
		dc.body2.unbind('.datagrid').bind('scroll.datagrid', function(e){
			if (state.onLoadSuccess){
				opts.onLoadSuccess = state.onLoadSuccess;	// restore the onLoadSuccess event
				state.onLoadSuccess = undefined;
			}
			console.log($(this).scrollTop());
			console.log(getDataHeight()-$(this).height());
			if ($(this).scrollTop() >= getDataHeight()-$(this).height()){
				if (this.scrollTimer){
					clearTimeout(this.scrollTimer);
					console.log('clearTimeout');
				}
				this.scrollTimer = setTimeout(function(){
					view.populate.call(view, target);
					while (getDataHeight() < dc.body2.height() && view.renderedCount < state.data.total){
						view.populate.call(view, target);
						console.log('while');
					}
					console.log('scrollTimer');
				}, 50);
			}else console.log('test');
		});
		
		function getDataHeight(){
			var h = 0;
			dc.body2.children('table.datagrid-btable').each(function(){
				h += $(this).outerHeight();
			});
			if (!h){
				h = view.renderedCount * 25;
			}
			return h;
		}
	},
	
	populate: function(target){
		var state = $.data(target, 'datagrid');
		var opts = state.options;
		var dc = state.dc;
		alert(this.renderedCount+'-'+state.data.total);
		if (this.renderedCount >= state.data.total){return;}
		this.rows = state.data.rows.slice(this.renderedCount, this.renderedCount+opts.pageSize);
		if (this.rows.length){
			this.renderedCount += this.rows.length;
			opts.view.render.call(opts.view, target, dc.body2, false);
			opts.view.render.call(opts.view, target, dc.body1, true);
			opts.onLoadSuccess.call(target, {
				total: state.data.total,
				rows: this.rows
			});
		} else {
			var param = $.extend({}, opts.queryParams, {
				page: Math.floor(this.renderedCount/opts.pageSize)+1,
				rows: opts.pageSize
			});
			if (opts.sortName){
				$.extend(param, {
					sort: opts.sortName,
					order: opts.sortOrder
				});
			}
			if (opts.onBeforeLoad.call(target, param) == false) return;
			
			$(target).datagrid('loading');
			var result = opts.loader.call(target, param, function(data){
				$(target).datagrid('loaded');
				var data = opts.loadFilter.call(target, data);
				state.data.rows = state.data.rows.concat(data.rows);
				opts.view.rows = data.rows;
				opts.view.renderedCount += data.rows.length;
				opts.view.render.call(opts.view, target, dc.body2, false);
				opts.view.render.call(opts.view, target, dc.body1, true);
				opts.onLoadSuccess.call(target, data);
			}, function(){
				$(target).datagrid('loaded');
				opts.onLoadError.apply(target, arguments);
			});
			if (result == false){
				$(target).datagrid('loaded');
			}
		}
	}

Title: Re: DataGrid Buffer: height issue
Post by: stworthy on October 30, 2013, 12:35:28 AM
Please try to download the updated buffer view from http://www.jeasyui.com/extension/datagridview.php.

Title: Re: DataGrid Buffer: height issue
Post by: varonica on October 31, 2013, 01:59:10 AM
THANKSSS!!!! IT WORKSSSS!!!!  :) :) :) :) :) ;) ;) ;) ;) ;) :D :D :D :D :D :D :D :D :D ;D ;D ;D ;D ;D ;D ;D ;D 8) 8) 8) 8) :-* :-* :-* :-*


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines