 Show Posts
|
|
Pages: [1]
|
|
1
|
General Category / EasyUI for jQuery / Re: Editing subgrid row...
|
on: September 03, 2014, 12:15:24 PM
|
|
I have been working on this quite a big, I'm very convinced the problem is that nothing is recognizing the subgrid as a 'named grid. I am not real great with javascript or jquery, and I am still searching for code samples that will help me clarify this part of the code. I think this will solve my problem. If anyone has suggestions please do not hesitate to post them.
|
|
|
|
|
2
|
General Category / EasyUI for jQuery / Editing subgrid row...
|
on: September 02, 2014, 12:57:28 PM
|
OK- I have been beating my head against this since last Friday, I figure it is finally time to post for help. I think I have my code fairly settled, and I think things should work. I have a grid where I edit the row, add rows, and then I expand the rows loading a subgrid (editable edatagrid). I want to simply edit and cancel the editable subgrid. However also want to take the ID column that I pass to the server page for updating from the parent row (api). Editing and adding new rows is working, opening the fields I want as editable in an editable grid in the sub row is working. However getting the sub grid to cancel edit, save, and use iconCls will not work (iconCls code removed at the moment for the subgrid). I have not included all the code, just what is relevant to the question here so there are some other calls with missing javascript. If anybody would like that code just holler, and I will include it. <!doctype html>
<html>
<head>
<!--jquery start datagrid components-->
<link rel="stylesheet" type="text/css" href="/Includes/jquery/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="/Includes/jquery/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/Includes/jquery/demo/demo.css">
<script type="text/javascript" src="/Includes/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/Includes/jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/Includes/jquery/plugins/datagrid-detailview.js"></script>
<script type="text/javascript" src="/Includes/jquery/plugins/jquery.edatagrid.js"></script>
<!--jquery end datagrid components-->
</head>
<body>
<section class="grid">
<table id="wells" class="easyui-datagrid" title=" " style="width:100%;height:500px"
pagination="true" idField="api" fitColumns="true" url="getinfo.php"
collapsible="true" singleSelect="true" toolbar="#tb" resizeHandle="both"
autoRowHeight="true" nowrap="false" rownumbers="true" pageList="[10,25,50,100,5000]">
<thead>
<tr>
<th data-options="field:'well_name', width:48" sortable="true">Name</th>
<th data-options="field:'well_num',width:18" sortable="true">Num</th>
<th data-options="field:'field',width:48" sortable="true">Field</th>
<th data-options="field:'pad',width:36" sortable="true">Pad</th>
<th data-options="field:'api',width:32" sortable="true">API</th>
<th data-options="field:'legal_description',width:46" sortable="true">Legal</th>
<th data-options="field:'county_state',width:40" sortable="true">County, State</th>
<th data-options="field:'lease',width:33" sortable="true">Lease</th>
<th data-options="field:'unit_ca_pa',width:57" sortable="true">Unit CA PA</th>
<th data-options="field:'status',width:27">Status</th>
<th data-options="field:'status_date',width:22">Updated</th>
<th data-options="field:'wildlife_stips',width:75">Wildlife Stips</th>
<th data-options="field:'notes',width:75">Notes</th>
</tr>
</thead>
</table>
<div id="tb" style="padding:3px"><span>Field:</span>
<input id="field" style="line-height:22px;border:1px solid #ccc">
<span>Pad:</span>
<input id="pad" style="line-height:22px;border:1px solid #ccc">
<span>API:</span>
<input id="api" style="line-height:22px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
<a href="#" class="easyui-linkbutton" plain="true" onclick="doReset()">Reset</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newWell()">New Well</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editWell()">Edit Well</a>
</div>
<script type="text/javascript">
$('#wells').datagrid(
{
view: detailview,
detailFormatter:function(index,row)
{ return '<div style="padding:2px"><table class="ddv"></table></div>'; },
onExpandRow: function(index,row)
{
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.edatagrid(
{
url:'geteditexpand.php?api='+row.api,
saveUrl:'updateeditwell.php?api='+row.api,
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'location',title:'Location'},
{field:'NorthSouth',title:'N+S-',editor:'text'},
{field:'EastWest',title:'E+W-',editor:'text'},
{field:'latitude',title:'Latitude',editor:'text'},
{field:'longitude',title:'Longitude',editor:'text'},
{field:'lot',title:'Lot',editor:'text'},
{field:'tract',title:'Tract',editor:'text'},
{field: 'action', title: 'Action',
formatter:function(value,row,index)
{
var s = '<a href="#" onclick="javascript:$(#wells).edatagrid(saveRow)">Save</a> ';
var c = '<a href="#" onclick="javascript:$(#wells).edatagrid(cancelRow)">Cancel</a>';
return s+c;
}
}
]],
onResize:function()
{ $('#wells').edatagrid('fixDetailRowHeight',index); },
onLoadSuccess:function()
{
setTimeout(function(){
$('#wells').edatagrid('fixDetailRowHeight',index);
},0);
}
});
$('#wells').datagrid('fixDetailRowHeight',index);
}
});
</script>
</section>
</div>
</body>
</html>
|
|
|
|
|
5
|
General Category / EasyUI for jQuery / Re: easyui-window and PDF file
|
on: August 25, 2014, 11:50:11 AM
|
I have no idea what the official answer is, but I would think it would be very possible with an expanded row. The example shows where they are displaying image files. I have code where I am displaying 3 different tables, one of which includes a link to files that may be stored on the server for the record, and then they are opened as a file attachment. If you can figure out how to do it w/ html / php (or whatever code you use) then you should be able to display it with the expanded row details. http://www.jeasyui.com/tutorial/datagrid/datagrid21.phpI'm showing most of my code here detailing how I display files as attachments with regards to a question I asked. Perhaps some of it will be helpful. http://www.jeasyui.com/forum/index.php?topic=3768.0 |
|
|
|
|
6
|
General Category / EasyUI for jQuery / Expanded row will not scroll :(
|
on: August 25, 2014, 11:43:31 AM
|
OK - I have an application where I am pulling a single row, populating the grind, and then pulling data within the expanded row. Everything was working perfectly until the 'expanded' data extended below the window size and scrollbars appeared. Now what happens in the original row, with the plus or minus to expand (remember this is a single row, will never be more than 1 row) will scroll up and down and disappear / reappear as I scroll. However the additional data that is pulled, i.e. the 'expanded' data, will not scroll. It says put where it is. The bottom is cut off by the window so you can never see the bottom, and cannot scroll to it. I have searched the web, and cannot find a resolution to this. Datagrid code <table id="wells" class="easyui-datagrid" title="<?php echo "$wellname $wellnum"; ?>" style="width:100%;height:300px"
pagination="false" idField="api" fitColumns="true" url="getwell.php?api=<?php echo $api; ?>"
collapsible="true" singleSelect="true" resizeHandle="both"
autoRowHeight="true" nowrap="false">
<thead>
<tr>
<th data-options="field:'well_name',width:48" sortable='true'>Name</th>
<th data-options="field:'well_num',width:18" sortable='true'>Num</th>
<th data-options="field:'field',width:48" sortable="true">Field</th>
<th data-options="field:'pad',width:36" sortable="true">Pad</th>
<th data-options="field:'api',width:32" sortable="true">API</th>
<th data-options="field:'legal_description',width:46" sortable="true">Legal</th>
<th data-options="field:'county_state',width:40" sortable="true">County, State</th>
<th data-options="field:'lease',width:33" sortable="true">Lease</th>
<th data-options="field:'unit_ca_pa',width:57" sortable="true">Unit CA PA</th>
<th data-options="field:'status',width:27">Status</th>
<th data-options="field:'status_date',width:22">Updated</th>
<th data-options="field:'wildlife_stips',width:75">Wildlife Stips</th>
<th data-options="field:'notes',width:75">Notes</th>
</tr>
</thead>
</table>
Row to call / expand the row <script type="text/javascript">
$('#wells').datagrid(
{
view: detailview,
detailFormatter:function(index,row)
{return '<div class="ddv" style="padding:5px 0"></div>';},
onExpandRow: function(index,row)
{
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel(
{
border:false,
cache:false,
href:'getexpandwell.php?api='+row.api,
onLoad:function()
{ $('#wells').datagrid('fixDetailRowHeight',index); }
});
$('#wells').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess: function(data){
if (data.rows.length){
$(this).datagrid('expandRow', 0);
}
}
});
</script>
And last but not least, the code that is called in getexpandwell.php which is the data that populates / displays for the expanded row (yes it is 3 different groups of data, and works FANTASTIC, except this little problem...  ) <?php
include("../Includes/aedclass.php");
$nconn = new WorkData();
$conn = new PDO ($nconn->DB_DSN,$nconn->DB_USER,$nconn->DB_PASSWORD);
$api = $_REQUEST['api'];
?>
<?php
//additional well info
echo "<hr>";
$sql = "select location, NorthSouth, EastWest, latitude, longitude, lot, tract
from master_well_list where api='$api' order by location desc;";
$stmt = $conn->prepare($sql);
$stmt->execute();
//echo "<table class='dv-table' border='0' style='width:100%;'>";
echo "<table class='dv-table' border='0'>";
while ($row = $stmt->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT))
{
echo "<tr>\n";
echo "<td class='dv-label'>Location: </td>\n";
echo "<td>$row[0]</td>\n";
echo "<td class='dv-label'>N+S-:</td>\n";
echo "<td>$row[1]</td>\n";
echo "<td class='dv-label'>E+W-: </td>\n";
echo "<td>$row[2]</td>\n";
echo "<td class='dv-label'>Latitude:</td>\n";
echo "<td>$row[3]</td>\n";
echo "<td class='dv-label'>Longitude:</td>\n";
echo "<td>$row[4]</td>";
echo "<td class='dv-label'>Lot:</td>\n";
echo "<td>$row[5]</td>\n";
echo "<td class='dv-label'>Tract:</td>\n";
echo "<td>$row[6]</td>\n";
echo "</tr>";
}
echo "</table>";
//excalibur account info
echo "<hr>";
$sql = "SELECT excal_well_numbers.excal_well_name, excal_well_numbers.excal_acct_num, partner.partner_name, partner_percent.percnt, Max(partner_percent.effective_date) as 'effective_date' FROM wexwellconfig.dbo.excal_well_numbers excal_well_numbers, wexwellconfig.dbo.master_well_list master_well_list, wexwellconfig.dbo.partner partner, wexwellconfig.dbo.partner_percent partner_percent WHERE partner_percent.excal_acct_num = excal_well_numbers.excal_acct_num AND partner_percent.partner_num = partner.partner_num AND master_well_list.api_no_dash = excal_well_numbers.api AND ((master_well_list.api='$api') AND (master_well_list.location='SHL')) GROUP BY excal_well_numbers.excal_well_name, excal_well_numbers.excal_acct_num, partner.partner_name, partner_percent.percnt ORDER BY excal_well_numbers.excal_acct_num, partner_percent.percnt desc;";
$stmt = $conn->prepare($sql);
$stmt->execute();
echo "<table class='dv-table' border='0'>";
while ($row = $stmt->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT))
{
echo "<tr>\n";
echo "<td class='dv-label'>Excal Well Name: </td>\n";
echo "<td>$row[0]</td>\n";
echo "<td class='dv-label'>Excal Well Num:</td>\n";
echo "<td>$row[1]</td>\n";
echo "<td class='dv-label'>Partner: </td>\n";
echo "<td>$row[2]</td>\n";
echo "<td class='dv-label'>Percent:</td>\n";
echo "<td>$row[3]</td>\n";
echo "<td class='dv-label'>Effective Date:</td>\n";
echo "<td>$row[4]</td>";
echo "</tr>";
}
echo "</table>";
//file attachment info
echo "<hr>";
$sql = "SELECT file_name, file_type, size, description, First, Last from file_attachment, users where users.userid = file_attachment.userid and (type='WBD') and api='$api' ORDER BY file_name desc;";
$stmt = $conn->prepare($sql);
$stmt->execute();
echo "<table class='dv-table' border='0'>";
while ($row = $stmt->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT))
{
echo "<tr>\n";
echo "<td class='dv-label'>File Name: </td>\n";
echo "<td><a href='get.php?id=" . urlencode($row[0]) . "'>$row[0]</a></td>\n";
echo "<td class='dv-label'>File Type:</td>\n";
echo "<td>$row[1]</td>\n";
echo "<td class='dv-label'>Size: </td>\n";
echo "<td>$row[2]</td>\n";
echo "<td class='dv-label'>Description:</td>\n";
echo "<td>$row[3]</td>\n";
echo "<td class='dv-label'>Name Posted</td>\n";
echo "<td>$row[5], $row[4]</td>";
echo "</tr>";
}
echo "</table>";
|
|
|
|
|
7
|
General Category / EasyUI for jQuery / Re: onLoadSuccess Expand First Row
|
on: August 21, 2014, 10:28:23 AM
|
Works perfectly, TYVM!  My code is now listed below; $('#wells').datagrid(
{
view: detailview,
detailFormatter:function(index,row)
{return '<div class="ddv" style="padding:5px 0"></div>';},
onExpandRow: function(index,row)
{
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel(
{
border:false,
cache:false,
href:'getexpandwell.php?api='+row.api,
onLoad:function()
{ $('#wells').datagrid('fixDetailRowHeight',index); }
});
$('#wells').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess: function(data){
if (data.rows.length){
$(this).datagrid('expandRow', 0);
}
}
}); |
|
|
|
|
8
|
General Category / EasyUI for jQuery / onLoadSuccess Expand First Row
|
on: August 20, 2014, 09:08:25 AM
|
I have an application where I am loading a single row in a grid, and expanding the row to show additional details. I have been unable to find any solutions for this. It seems like I should be able to tie something into the event onLoadSuccess. Below is my code for the expanded row. (furthest on bottom). I tried adding the following code (both rows 0 and 1), but the code simply made it so the expand rows feature was completely disabled (I have tried other code options, not many, but did not take notes on what they were). onLoadSuccess: function()
{ $('#wells').datagrid('expandRow', 0); } Expand row code listed below; <script type="text/javascript">
$('#wells').datagrid(
{
view: detailview,
detailFormatter:function(index,row)
{return '<div class="ddv" style="padding:5px 0"></div>';},
onExpandRow: function(index,row)
{
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel(
{
border:false,
cache:false,
href:'getexpandwell.php?api='+row.api,
onLoad:function()
{ $('#wells').datagrid('fixDetailRowHeight',index); }
});
$('#wells').datagrid('fixDetailRowHeight',index);
}
});
</script>
And the origional table that is being expanded... <table id="wells" class="easyui-datagrid" title="<?php echo "$wellname $wellnum"; ?>" style="width:100%;height:300px"
pagination="false" idField="api" fitColumns="true" url="getwell.php?api=<?php echo $api; ?>"
collapsible="true" singleSelect="true" resizeHandle="both"
autoRowHeight="true" nowrap="false">
<thead>
<tr>
<th data-options="field:'well_name',width:48" sortable='true'>Name</th>
<th data-options="field:'well_num',width:18" sortable='true'>Num</th>
<th data-options="field:'field',width:48" sortable="true">Field</th>
<th data-options="field:'pad',width:36" sortable="true">Pad</th>
<th data-options="field:'api',width:32" sortable="true">API</th>
<th data-options="field:'legal_description',width:46" sortable="true">Legal</th>
<th data-options="field:'county_state',width:40" sortable="true">County, State</th>
<th data-options="field:'lease',width:33" sortable="true">Lease</th>
<th data-options="field:'unit_ca_pa',width:57" sortable="true">Unit CA PA</th>
<th data-options="field:'status',width:27">Status</th>
<th data-options="field:'status_date',width:22">Updated</th>
<th data-options="field:'wildlife_stips',width:75">Wildlife Stips</th>
<th data-options="field:'notes',width:75">Notes</th>
</tr>
</thead>
</table> |
|
|
|
|
)
