EasyUI Forum
May 07, 2024, 12:21:39 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [SOLVED but..] Issue with different datagrid in many tabs - rendering problem  (Read 20193 times)
acreonte82
Jr. Member
**
Posts: 85



View Profile
« on: October 14, 2013, 02:34:02 PM »

Hello to all,
today I've a problem to open different datagrids in many tabs.
I try to replicate the window layout solution present in this website, at the section "Documentation".
My final goal is to open different datagrids in different tabs , the datas of each datagrid are different
All datagrids have a search function and detailview function.

When I try to open my tabs , to show informations in the datagrids, starts the problems:
1. the search function of one datagrid appear in the new opened datagrid
2. the detaiview function, where defined, for some reason appear in the new datagrid but not in the opened datagrid
3. some rendering layout problems  in the datagrid

well a very big problem for me... maybe I wrong somenthing...

Someone have the same problem?
Someone can help me?
« Last Edit: October 17, 2013, 03:41:16 AM by acreonte82 » Logged
acreonte82
Jr. Member
**
Posts: 85



View Profile
« Reply #1 on: October 15, 2013, 11:20:53 AM »

I explain my problem:
in one page, called ricerche.php, I define this code:
Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="it" xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="js/jeasy/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="css/mainNew.css">
<!--<link rel="stylesheet" type="text/css" href="js/jeasy/prettify/prettify.css">-->
<link rel="stylesheet" type="text/css" href="js/jeasy/themes/icon.css"> 
<script type="text/javascript" src="js/jeasy/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jeasy/jquery.easyui.min.js"></script>
<!--<script type="text/javascript" src="js/jeasy/prettify/prettify.js"></script>-->
<script type="text/javascript" src="js/jeasy/plugins/jquery.datagrid.js"></script>
<script type="text/javascript" src="js/jeasy/plugins/datagrid/datagrid-detailview.js"></script>


<script type="text/javascript">

function open1(plugin,title_tab){
if ($('#tt').tabs('exists',title_tab)){
$('#tt').tabs('select', title_tab);
} else {
$('#tt').tabs('add',{
title:title_tab,
cache:true,
href:plugin+'.php',
closable:true,
extractor:function(data){
data = $.fn.panel.defaults.extractor(data);
var tmp = $('<div></div>').html(data);
data = tmp.find('#content').html();
tmp.remove();
return data;
}
});
}
}
</script>
<title>Gestione dati genetici laboratorio FSC  - Ricerche statistiche </title>
</head>
<body class="easyui-layout" style="text-align:left">
<div region="north" border="false" style="background:#486;text-align:center">
<?php include("layout/menu/top_menu.php"?>

</div>
<div region="west" border="false" split="true" title="Attivit&agrave;" style="width:300px;padding:5px;"
data-options=" collapsible:true,
onCollapse:function(){
$('#dg').datagrid('resize','auto');
}
">
<ul class="easyui-tree">
<li iconCls="icon-base"><span>Ricerche</span>
<ul>
<li iconCls="icon-gears"><a href="#" onclick="open1('visualizza_polimorfismi','Polimorfismi')">Info polimorfismi</a></li>     
                                                        <li iconCls="icon-gears"><a href="#" onclick="open1('visualizza_gene','gene')">Info gene</a></li>
</ul>
</li>
<li iconCls="icon-base"><span>Statistiche</span>
<ul>
<li iconCls="icon-gears"><a href="#" onclick="open1('visualizza_info_genotipi')">Dati genetici e statistiche</a></li>
</ul>
</li>
</ul>


</div>
<div region="center" border="false">
<div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
<div title="Ricerche - Help">
<div id="box">
<p>Pagina di spiegazioni per la ricerca di dati </p>
</div>
</div>
</div>
</div>
</body>
</html>

The page for 'visualizza_polimorfismi' is
Code:
		<script type="text/javascript" language="javascript">
$(function(){
$('#snps').datagrid({ 
    view: detailview, 
    detailFormatter:function(index,row){ 
        return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>'; 
    }, 
onExpandRow: function(index,row){ 
$('#ddv-'+index).datagrid({ 
            url:'controller/subgrid_gene.php?id_RS='+row.id_RS, 
            fitColumns:true, 
            singleSelect:true, 
            rownumbers:true, 
            loadMsg:'', 
            height:'auto', 
            columns:[[ 

                {field:'entrez_gene_id',title:'Entrez gene id',width:'100'}, 
                {field:'official_gene_name',title:'official gene name',width:'150'}, 
                {field:'alias',title:'alias',width:'150'},
                {field:'chromosome',title:'chromosome',width:'80'},
                {field:'gene_position_start',title:'gene position start',width:'150'},
                {field:'gene_position_end',title:'gene position end',width:'150'},
                {field:'gene_orientation',title:'gene orientation',width:'100'},
                {field:'type_of_gene',title:'type of gene',width:'150'} ,
                {field:'NM_transcription',title:'NM transcription',width:'100'} 

            ]], 
            onResize:function(){ 
                $('#snps').datagrid('fixDetailRowHeight',index); 
            }, 
            onLoadSuccess:function(){ 
                setTimeout(function(){ 
                    $('#snps').datagrid('fixDetailRowHeight',index); 
                },0); 
            } 
        }); 
$('#snps').datagrid('fixDetailRowHeight',index); 
}
}); 
});

function doSearch(value,name){
$('#snps').datagrid('load',{
type_of_find:name,
type_of_value:value

});
}
       

</script>

                <div id="content">
<div id="content-container">
                        <div id="box"> <!-- secondo box: per la prima tabella e sua visualizzazione-->
<h3>Elenco SNPs</h3>
<div class="inside">
<div class="table">

<table id="snps" title="Snps" class="easyui-datagrid" style="width:auto;height:auto" 
url="controller/enumerate_snps.php" toolbar="#toolbar" iconCls="icon-search"
pagination="true"
singleSelect="true" > 
<thead frozen="true"> 
<tr>
<th field="id_RS" width="auto" sortable="true" >id_RS</th>
<th field="snp_name_lab" width="auto" sortable="true" >snp name lab</th>
</thead> 
<thead> 
<tr>
<th field="update_date" width="auto">Update date</th> 
<th field="chromosome" width="auto" sortable="true" >Chromosome</th> 
<th field="chr_position" width="auto" sortable="true">chr position</th>
<th field="RefSNP_alleles" width="auto" align="center">RefSNP alleles</th>
<th field="dbsnp_build" width="auto" >dbsnp build</th>

<th field="note" width="auto" >note</th>
<th field="allele1" width="auto" align="center" >allele1</th>
<th field="allele2" width="auto" align="center">allele2</th>
<th field="Note_for_genotype_input" width="auto" >Note for genotype input</th>
<th field="Location_or_Amminoacid_change" width="auto" >Location or Amminoacid change</th>
<th field="Sequenza_context" width="auto" >Sequenza context</th>
</tr> 
</thead> 
</table> 
<div id="toolbar">

  <input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#search_snp',searcher:doSearch" style="width:300px;height:25px"></input>
    <div id="search_snp" style="width:120px">
        <div data-options="name:'id_RS_to_find',iconCls:'icon-ok'">id_RS</div>
        <div data-options="name:'snp_name_lab_to_find'">Snp name lab</div>
    </div>
   
</div>

</div>
</div>
                        </div>

</div><!-- /content container-->
</div> <!-- /content -->


The same are for the page 'gene'.
I attached the result:
1. the detailview not work .. Strange I defined it on ricerche.php
2. the searchbox in 'visualizza_polimorfismi' disappears during I call 'gene' page

At the moment I'm using the version 1.3.4
Where I wrong?

Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #2 on: October 15, 2013, 07:27:04 PM »

Here is your datagrid code.
Code:
<table id="snps" title="Snps" class="easyui-datagrid" style="width:auto;height:auto"  
url="controller/enumerate_snps.php" toolbar="#toolbar" iconCls="icon-search" pagination="true" singleSelect="true" >
...
</table>

When use 'id' attribute on a element, make sure the 'id' value is unique in the page. You have multiple datagrid with same 'id' value(snps). All the toolbar of datagrids have also the same 'id' value. Please correct these issue.
Logged
acreonte82
Jr. Member
**
Posts: 85



View Profile
« Reply #3 on: October 16, 2013, 12:45:59 AM »

Yeah  now work great! Sorry for my stupidity..  Grin

At the moment the subgrid doesn't work and also the search function...
If I try to open the console management on Chrome and I put the js code for the 'detailview', work!  It doesn't work when I load the page.
The same problem for the search function...

Now where I wrong?
Logged
acreonte82
Jr. Member
**
Posts: 85



View Profile
« Reply #4 on: October 17, 2013, 03:38:54 AM »

Ok  solved!!! .. but one open point
I want to now this:
my code for search toolbar and js:
Code:
	function doSearchSnp(value,name){											
$('#snps').datagrid('load',{
type_of_find:name,
type_of_value:value
});
}
 <input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#search_snp',searcher:doSearchSnp" style="width:300px;height:25px"></input>
   <div id="search_snp" style="width:120px">
        <div data-options="name:'id_RS_to_find',iconCls:'icon-ok'">id_RS</div>
        <div data-options="name:'snp_name_lab_to_find'">Snp name lab</div>
 </div>
for a strange motivation the name of the two "virtual" input aren't 'id_RS_to_find' or 'snp_name_lab_to_find' but 'id_RS' and 'Snp name lab' .
Why? What I wrong?

detailview:

1. I taked the js code for the detailview and put it in a js file
2. I made a function called 'init_snps()' and pasted the code for the detailview
3. in the file ricerche.php I redefined the entire js code (including the new js file) like this:

Code:
$(function(){
$('#tt').tabs({
onLoad:function(panel){
init_snps();
}
});
});
function open1(plugin,title_tab){
if ($('#tt').tabs('exists',plugin)){
$('#tt').tabs('select', plugin);
} else {
$('#tt').tabs('add',{
title:title_tab,
cache:false,
href:plugin+'.php',
closable:true,
extractor:function(data){
data = $.fn.panel.defaults.extractor(data);
var tmp = $('<div></div>').html(data);
data = tmp.find('#content').html();
tmp.remove();
return data;
},
});
}
}

Now the detailview function work without problems!

Thanks for the help and I hope this little guide can help someone in the future.

The only open point is the search and the name parameter....
If some one can help me many thanks
« Last Edit: October 17, 2013, 05:07:20 AM by acreonte82 » Logged
Pages: [1]
  Print  
 
Jump to:  

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