Print Page - Populating data from database to Datagrid with Checkbox [Solved]

Title: Populating data from database to Datagrid with Checkbox [Solved]
Post by: xnoybx on September 22, 2015, 10:36:25 PM

Now I can save the data from Datagrid with Checkbox, Combobox and Textbox to database.
http://www.jeasyui.com/forum/index.php?topic=5248.0 (http://www.jeasyui.com/forum/index.php?topic=5248.0)

My question is:
How can i populate data from database to Datagrid and automatic fill the Checkbox, Combobox and Textbox ?

Please Help Me,
Thanks.

This is My Script:

HTML

Code:

<table id="dg" class="easyui-datagrid" style="width:600px;height:250px"
			url="data/datagrid_data.json"
			title="Load Data" iconCls="icon-save" fitColumns="true"
			idField="itemid">
	<thead>
		<tr>
			<th field="ck" width="80" checkbox="true">Item ID</th>
			<th field="itemid" width="80">Item ID</th>
			<th field="productid" width="80">Product ID</th>
			<th field="listprice" width="80" align="right">List Price</th>
			<th field="unitcost" width="80" align="right" data-options="editor:'numberbox'">Unit Cost</th>
			<th field="attr1" width="150" data-options="editor:'textbox'">Attribute</th>
			<th field="statusName", data-options="align: 'center', 
					editor:{
						type:'combobox',
						options:{
							valueField:'statusId',
							textField:'statusName',
							panelHeight:'auto',
							data: [{
								statusId: '',
								statusName: '- Choose -'
							},{
								statusId: 'true',
								statusName: 'Active'
							},{
								statusId: 'false',
								statusName: 'Non Active'
							}]
						}
					}
			
			" width="80"><b>Status</b></th>
		</tr>
	</thead>
</table>

Javascript

Code:

function save() {		
	var rows = [];
	var dg = $('#dg');
	$.map(dg.datagrid('getChecked'), function(row){
		var index = dg.datagrid('getRowIndex', row);
		var editors = dg.datagrid('getEditors', index);
		if (editors.length){
			rows.push({
				itemid: row.itemid,
				unitcost: $(editors[0].target).numberbox('getValue'),
				attr1: $(editors[1].target).textbox('getValue'),
				statusName: $(editors[2].target).combobox('getValue')
			});
		}
	});
	$.ajax({
		url:'./data.php',
		type: 'POST',
		data: {data: JSON.stringify(rows)},
		cache: false
	});
}

PHP (getdata.php)

Code:

$conn = mysqli_connect($host, $user, $pass, $db);
mysqli_query($conn, "SELECT * FROM tbl_test");

Title: Re: Populating data from database to Datagrid with Checkbox
Post by: xnoybx on September 25, 2015, 04:55:04 AM

My apologize if my explanation on the top is not clear. so, his is what i mean.
I have datatabase name "test" and table "main_data" and "offer_data", with detail is

Data on table "main_data"

itemid	listprice
EST-1	112
EST-2	100
EST-3	98
EST-4	56
EST-5	88
EST-6	121
EST-7	44
EST-8	76
EST-9	56

Data on table "offer_data"

itemid	unitcost	attr	statusId
EST-1	12	Large	true
EST-6	13	Spotted Adult Female	true
EST-7	23	Green Adult	true
EST-9	23	Adult Female	false

When i am on edit page, i'll show all data from table main_data to datagrid with data from table offer_data
where if main_data.itemid=offer_data.itemid that row automatic checked on load
This is my script

edit.php

Code:

<table id="dg" class="easyui-datagrid" style="width:600px"
	url="data/main_data.php"
	title="Edit Data" iconCls="icon-save" fitColumns="true"
	idField="itemid">
	<thead>
		<tr>
			<th field="ck" width="80" checkbox="true">Item ID</th>
			<th field="itemid" width="80">Item ID</th>
			<th field="listprice" width="80" align="right">List Price</th>
			<th field="unitcost" width="80" align="right" data-options="editor:'numberbox'">Unit Cost</th>
			<th field="attr" width="150" data-options="editor:'textbox'">Attribute</th>
			<th field="statusId", data-options="align: 'center', 
				editor:{
					type:'combobox',
					options:{
						valueField:'statusId',
						textField:'statusName',
						panelHeight:'auto',
						data: [{
							statusId: '',
							statusName: '- Choose -'
						},{
							statusId: 'true',
							statusName: 'Active'
						},{
							statusId: 'false',
							statusName: 'Non Active'
						}]
					}
				}
				" width="80"><b>Status</b></th>
		</tr>
	</thead>
</table>

main_data.php

Code:

require_once('config.php');

$sql = "SELECT 
		main_data.itemid AS itemid,
		main_data.listprice AS listprice,
		offer_data.unitcost AS unitcost,
		offer_data.attr AS attr,
		offer_data.statusId AS statusId 
	FROM main_data
	LEFT JOIN offer_data ON offer_data.itemid = main_data.itemid";

$result = $conn->query($sql);

$data = array();
while($row = mysqli_fetch_assoc($result)){
	$data[]	= $row;
}
echo json_encode($data);

Please someone help me,
Thanks

Title: Re: Populating data from database to Datagrid with Checkbox
Post by: jarry on September 25, 2015, 09:20:18 AM

If you want to check a row when loaded data, you must call 'checkRow' method on whose rows you want to check.

Code:

$('#dg').datagrid({
	onLoadSuccess: function(data){
		for(var i=0; i<data.rows.length; i++){
			if (...){
				$(this).datagrid('checkRow', i);
			}
		}
	}
})

Title: Re: Populating data from database to Datagrid with Checkbox
Post by: xnoybx on September 26, 2015, 10:04:25 AM

Thanks for reply anda that the solution

i have change the sql

Code:

$sql = "SELECT 
		main_data.itemid AS itemid,
                offer_data.itemid AS itemid2,
		main_data.listprice AS listprice,
		offer_data.unitcost AS unitcost,
		offer_data.attr AS attr,
		offer_data.statusId AS statusId 
	FROM main_data
	LEFT JOIN offer_data ON offer_data.itemid = main_data.itemid";

And the change the JS

Code:

onLoadSuccess: function(data) {
	$('#dg').datagrid('getPanel').find('div.datagrid-header input[type=checkbox]').attr('disabled','disabled');		
	for (var i=0; i<data.rows.length; i++) {
		if(data.rows[i]['itemid] === data.rows[i]['itemid2']) {
			$(this).datagrid('checkRow', i);
		}
	}
},

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: xnoybx on September 22, 2015, 10:36:25 PM