EasyUI Forum
April 29, 2024, 02:04:38 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > DataGrid Buffer: height issue
Pages: [1]
« previous next »
  Print  
Author Topic: DataGrid Buffer: height issue  (Read 16464 times)
varonica
Full Member
***
Posts: 106


View Profile
« on: October 28, 2013, 08:07:22 PM »
As referring to 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!!!  Sad Sad Sad Huh Huh Huh Huh Cry Cry Cry Cry Cry Cry Cry Cry
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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.
Logged
varonica
Full Member
***
Posts: 106


View Profile
« Reply #2 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"}]}
« Last Edit: October 29, 2013, 01:22:30 AM by varonica » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: October 29, 2013, 01:50:31 AM »
Please refer to http://jsfiddle.net/sYznv/
Logged
varonica
Full Member
***
Posts: 106


View Profile
« Reply #4 on: October 29, 2013, 02:21:43 AM »
Can you please try on remote data ?
Logged
varonica
Full Member
***
Posts: 106


View Profile
« Reply #5 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');
			}
		}
	}
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #6 on: October 30, 2013, 12:35:28 AM »
Please try to download the updated buffer view from http://www.jeasyui.com/extension/datagridview.php.
Logged
varonica
Full Member
***
Posts: 106


View Profile
« Reply #7 on: October 31, 2013, 01:59:10 AM »
THANKSSS!!!! IT WORKSSSS!!!!  Smiley Smiley Smiley Smiley Smiley Wink Wink Wink Wink Wink Cheesy Cheesy Cheesy Cheesy Cheesy Cheesy Cheesy Cheesy Cheesy Grin Grin Grin Grin Grin Grin Grin Grin Cool Cool Cool Cool Kiss Kiss Kiss Kiss
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!