 Show Posts
|
|
Pages: [1]
|
|
2
|
General Category / EasyUI for jQuery / Re: how to set datagrid row header?
|
on: November 14, 2013, 10:28:49 PM
|
|
honestly, i have no code at the moment cause i have no idea how it to be done.
but i did plot in excel for my example. which i snap in the picture.
first i need a list of user(header of each row). Then, i need a list of apps(header of each column).
then i am plotting the data among each cell for individual user vs apps for each privilege.
|
|
|
|
|
9
|
General Category / EasyUI for jQuery / need help on datagrid search
|
on: September 29, 2013, 07:42:41 PM
|
i have difficulty to get the search work. for my first horizontal tab with first vertical tab, the datagrid work fine with search etc. But when come to third, 4th, the search input field passing empty data, my option has no value. Can anyone help? here is my code home.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Material DO</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<script type='text/javascript'>
$(document).ready(function(){
$tabsp = $('#tabsProject');
var pselectedindex = -1;
var mselectedindex = -1;
$(window).resize(function(){
$("div.easyui-tabs").each(function() {
if($(this).is(':visible'))
$(this).tabs('resize',{})
})
$('table.easyui-datagrid').datagrid('resize');
});
$tabsp.tabs({
onSelect: function(title, index){
if (pselectedindex != index)
{
var p = $tabsp.tabs('getSelected'); // get the selected tab panel
var pid = p.panel('options').id.substr(4);
pselectedindex = index;
mselectedindex = -1;
$("div.easyui-tabs").each(function() {
if($(this).is(':visible'))
if($(this).attr('id') != 'tabsProject')
$(this).tabs({
onSelect: function(title, index){
if (mselectedindex != index)
{
var mp = $(this).tabs('getSelected');
var mid = mp.panel('options').id.substr(5);
mselectedindex = index;
mp.panel({
href:'load.do.grid.php?ProjectId='+ pid + '&MaterialId='+ mid
})
console.log($(this).attr('id') + ': '+ $('#tab').attr('id'));
}
}
})
});
};
}
})
})
</script>
<body>
<?php
require_once("connectdb.php");
require_once("..\common\html.php");
$psql = "
SELECT
ProjectId,
ProjectName,
GroupName
FROM
Project
WHERE Status <> 1
ORDER BY
ProjectName
";
$msql = "
SELECT
MaterialId,
MaterialName
FROM
materialtype
ORDER BY
MaterialName
";
echo '<div class="easyui-tabs" id="tabsProject" tabWidth="150px" >';
if ($presult = $mysqli->query($psql) )
while($prow = $presult->fetch_assoc() )
{
echo '<div title="'.$prow['ProjectName'].'" id="tab-'.$prow['ProjectId'].'"
data-options="fitcolumns:true", fit:true, border:false '.
' style="padding:5px;" >';
echo '<div id="mat-'.$prow['ProjectId'].'" class="easyui-tabs" tabPosition="left" headerWidth="200" style="padding:5px;"
data-options="fitcolumns:true, border:true ">';
if ($mresult = $mysqli->query($msql) )
while( $mrow = $mresult->fetch_assoc() )
{
echo '<div title="'.$mrow['MaterialName'].'" id="'.$prow['ProjectId'].'-'.$mrow['MaterialId'].'" style="padding:5px;" >';
echo '</div>';
};
echo '</div> <!-- M-'. $prow['ProjectId'] .'tabs -->';
echo '</div>';
};
echo '</div> <!--class="easyui-tabs"-->';
?>
</body>
</html>
here is the code for load.do.grid.php
<?php
require_once('connectdb.php');
echo '
<table id="dgMaterial" title="Material DO" class="easyui-datagrid" style="width:auto; height:auto" toolbar="#tb"
data-options=" singleSelect:true,
fitColumns:true,
pagination:true,
rownumbers:true,
pageList:[20,50,100],
pageSize:20,
pagePosition:\'both\',
url:\'get.do.json.php\',
queryParams:{
ProjectId:\'' . $_GET['ProjectId'] . '\',
\'MaterialId\':\'' . $_GET['MaterialId'] . '\',
keywords: $(\'#keywords\').val(),
Rec: $(\'#Rec\').val()
}
">';
echo '<thead>';
echo' <tr>';
/* custom define header with specific width size */
echo '<th data-options=" field:\'DoId\'" width="60">Do Id</th>';
echo '<th data-options=" field:\'DoDate\'" width="100" align="center">Do Date</th>';
echo '<th data-options=" field:\'DoNumbering\'" width="300">Do Numbering</th>';
echo '<th data-options=" field:\'Received\'" width="60" align="center">Received</th>';
echo '<th data-options=" field:\'ProjectName\'" width="60" align="left">ProjectName</th>';
echo '<th data-options=" field:\'MaterialName\'" width="100" align="left">MaterialName</th>';
echo '</tr>';
echo' </thead>
</table>';
// search box
echo '
<div id="tb" style="padding:3px; ">
<Label for="MultipleDo">DO Number:</label>
<input id="MultipleDo" name="MultipleDo" value="" style="line-height:18px; width:200px; margin:0 3px;">
<Label style="margin-left:10px;"for="Received">Received:</label>
<select id="Received" name="Received" >
<option value="0">No</option>
<option value="1">Yes</option>
<option value="2">Both</option>
</select>
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
</div>';
?>
<script type='text/javascript'>
function doSearch(){
$("table.easyui-datagrid").datagrid('load',{
"MultipleDo": $("#MultipleDo").val(),
"Received": $("#Received").val(),
"ProjectId": "<?php echo $_GET['ProjectId']; ?>",
"MaterialId": "<?php echo $_GET['MaterialId']; ?>",
}
);
console.log($('#MultipleDo').attr('id') +': '+ $('#MultipleDo').val());
console.log($('#tb').attr('id'));
}
</script>
and here is my last file for get.do.json.php
<?php
require_once("connectdb.php");
$MultipleDo = isset($_POST['MultipleDo']) ? mysql_real_escape_string($_POST['MultipleDo']) : '';
$Received = isset($_POST['Received']) ? mysql_real_escape_string($_POST['Received']) : '0';
$ProjectId = isset($_POST['ProjectId']) ? mysql_real_escape_string($_POST['ProjectId']) : '0';
$MaterialId = isset($_POST['MaterialId']) ? mysql_real_escape_string($_POST['MaterialId']) : '0';
if($Received == 2)
$Received = '';
$page = isset($_POST['page']) ? (int)($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? (int)($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$where = " DoNumbering like '%$MultipleDo%' and Received like '%$Received%' ";
$sql = "
SELECT
count(*) as total
FROM
do
INNER JOIN
project ON do.projectid = project.projectid
INNER JOIN
materialtype ON do.materialid = materialtype.materialid
WHERE ".$where.
" AND
do.ProjectId = '$_POST[ProjectId]'
AND
do.MaterialId = $_POST[MaterialId]
";
if( $rs = $mysqli->query($sql) )
$result = $rs->fetch_assoc();
$sql = "
SELECT
DoId,
DATE_FORMAT(DoDate, '%d/%m/%Y') as 'DoDate',
DoNumbering,
IF(Received = 0,'No','Yes') as Received,
do.ProjectId,
project.ProjectName,
do.MaterialId,
materialtype.MaterialName
FROM
do
INNER JOIN
project ON do.projectid = project.projectid
INNER JOIN
materialtype ON do.materialid = materialtype.materialid
WHERE ".$where.
" AND
do.ProjectId = '$_POST[ProjectId]'
AND
do.MaterialId = $_POST[MaterialId]
ORDER BY
DoDate DESC
LIMIT $offset, $rows
";
if ( $rs = $mysqli->query($sql) )
$result['rows'] = $rs->fetch_all(MYSQLI_ASSOC);
echo json_encode($result);
?>
|
|
|
|
|
12
|
General Category / EasyUI for jQuery / Re: tab scroller for easyui-tabs not appear on windows resize
|
on: September 21, 2013, 08:33:05 PM
|
tried but not working. look at resize.png, the red circle indicate the tabs-scroller left and right not appear until I perform a manual page refresh(F5). i did tried: $(window).resize(function(){
$(.tabsProject).tabs('resize',{});
});
but it makes my datagrid appear at the bottom of my vertical tabs(bottom.png). here is my whole code: $(document).ready(function(){
$tabsp = $('#tabsProject');
var pselectedindex = -1;
var mselectedindex = -1;
$(window).resize(function(){
$tabsp.tabs('resize',{});
});
title = $tabsp.tabs('getSelected').panel('options').title;
$tabsp.tabs({
onSelect: function(title, index){
if (pselectedindex != index)
{
var p = $tabsp.tabs('getSelected'); // get the selected tab panel
var pid = p.panel('options').id.substr(4);
pselectedindex = index;
mselectedindex = -1;
$("div.easyui-tabs").each(function() {
if($(this).is(':visible'))
if($(this).attr('id') != 'tabsProject')
$(this).tabs({
onSelect: function(title, index){
if (mselectedindex != index){
var mp = $(this).tabs('getSelected');
var mid = mp.panel('options').id.substr(5);
mselectedindex = index;
mp.panel({
href:'load.do.grid.php?ProjectId='+ pid + '&MaterialId='+ mid
})
}
}
})
});
|
|
|
|
|
