EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: msvabik on March 19, 2013, 07:00:00 AM


Title: Frozen Columns in TreeGrid
Post by: msvabik on March 19, 2013, 07:00:00 AM
Hello
I have a problem with frozen columns for this table :
Code:
<table id="tt" title="{title_table}" class="easyui-treegrid" style="width:auto;height:610px" url="json.php?pob={pobocka}"  
        rownumbers="false" showFooter="false" 
        idField="id" treeField="name">
		<thead>
			<tr>
				<th colspan="7">Součet za:</th>
				<th colspan="7">Zákazník</th>
				<th colspan="6">Pobočka</th>
				<th colspan="6">Firma</th>
			</tr>
			<tr>
				<th colspan="7">Popis/Rok</th>
				<th colspan="2">2011</th>
				<th colspan="2">2012</th>
				<th colspan="3">2013</th>
				<th colspan="2">2011</th>
				<th colspan="2">2012</th>
				<th colspan="2">2013</th>
				<th colspan="2">2011</th>
				<th colspan="2">2012</th>
				<th colspan="2">2013</th>
			</tr>
			<tr>							
				<th field="name" width="300px">Název</th>			
				<th field="match">Match</th>
				<th field="norm" align="right">NORM</th>
				<th field="TOP" align="right">TOP</th>
				<th field="BUS" align="right">BUS</th>
				<th field="VIP" align="right">VIP</th>								
				<th field="PER" align="right">PER</th>
				<th field="M2011" align="right" styler="zakaznik">ks</th>
				<th field="P2011" align="right" styler="zakaznik">Prodej</th>
				<th field="M2012" align="right" styler="zakaznik">ks</th>
				<th field="P2012" align="right" styler="zakaznik">Prodej</th>
				<th field="M2013" align="right" styler="zakaznik">ks</th>
				<th field="P2013" align="right" styler="zakaznik">Prodej</th>
				<th field="PL2013" align="right" styler="plan">Plán</th>
				<th field="MM2011" align="right" styler="pobocka">ks</th>
				<th field="PP2011" align="right" styler="pobocka">Prodej</th>
				<th field="MM2012" align="right" styler="pobocka">ks</th>
				<th field="PP2012" align="right" styler="pobocka">Prodej</th>
				<th field="MM2013" align="right" styler="pobocka">ks</th>
				<th field="PP2013" align="right" styler="pobocka">Prodej</th>
				<th field="MF2011" align="right" styler="firma">ks</th>
				<th field="F2011" align="right" styler="firma">Prodej</th>
				<th field="MF2012" align="right" styler="firma">ks</th>
				<th field="F2012" align="right" styler="firma">Prodej</th>
				<th field="MF2013" align="right" styler="firma">ks</th>
				<th field="F2013" align="right" styler="firma">Prodej</th>
			</tr>
		</thead>    
</table>
I need a table divided by column
Code:
<th field="PER" align="right">PER</th>

If you do a division/freeze column like this:
Code:
<table id="tt" title="{title_table}" class="easyui-treegrid" style="width:auto;height:610px" url="json.php?pob={pobocka}"  
        rownumbers="false" showFooter="false" 
        idField="id" treeField="name">
		<thead data-options="frozen:true">
			<tr>
				<th colspan="7">Součet za:</th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th colspan="7">Zákazník</th>
				<th colspan="6">Pobočka</th>
				<th colspan="6">Firma</th>
			</tr>
		</thead>
		<thead data-options="frozen:true">
			<tr>
				<th colspan="7">Popis/Rok</th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th colspan="2">2011</th>
				<th colspan="2">2012</th>
				<th colspan="3">2013</th>
				<th colspan="2">2011</th>
				<th colspan="2">2012</th>
				<th colspan="2">2013</th>
				<th colspan="2">2011</th>
				<th colspan="2">2012</th>
				<th colspan="2">2013</th>
			</tr>
		</thead>
		<thead data-options="frozen:true">
			<tr>							
				<th field="name" width="300px">Název</th>			
				<th field="match">Match</th>
				<th field="norm" align="right">NORM</th>
				<th field="TOP" align="right">TOP</th>
				<th field="BUS" align="right">BUS</th>
				<th field="VIP" align="right">VIP</th>								
				<th field="PER" align="right">PER</th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th field="M2011" align="right" styler="zakaznik">ks</th>
				<th field="P2011" align="right" styler="zakaznik">Prodej</th>
				<th field="M2012" align="right" styler="zakaznik">ks</th>
				<th field="P2012" align="right" styler="zakaznik">Prodej</th>
				<th field="M2013" align="right" styler="zakaznik">ks</th>
				<th field="P2013" align="right" styler="zakaznik">Prodej</th>
				<th field="PL2013" align="right" styler="plan">Plán</th>
				<th field="MM2011" align="right" styler="pobocka">ks</th>
				<th field="PP2011" align="right" styler="pobocka">Prodej</th>
				<th field="MM2012" align="right" styler="pobocka">ks</th>
				<th field="PP2012" align="right" styler="pobocka">Prodej</th>
				<th field="MM2013" align="right" styler="pobocka">ks</th>
				<th field="PP2013" align="right" styler="pobocka">Prodej</th>
				<th field="MF2011" align="right" styler="firma">ks</th>
				<th field="F2011" align="right" styler="firma">Prodej</th>
				<th field="MF2012" align="right" styler="firma">ks</th>
				<th field="F2012" align="right" styler="firma">Prodej</th>
				<th field="MF2013" align="right" styler="firma">ks</th>
				<th field="F2013" align="right" styler="firma">Prodej</th>
			</tr>
		</thead>    
</table>

Failing to properly retrieve data. Data are shown only for the columns to the right of
Code:
<th field="PER" align="right">PER</th>

Where could be the problem please?

Thank you in advance for your help.

Title: Re: Frozen Columns in TreeGrid
Post by: msvabik on March 20, 2013, 02:41:47 AM
Hello

I simplified the table and the problem persists. When do I set frozen:true it in the frozen columns do not show data.

Any idea?
Thanks

Code:
<table id="tt" title="{title_table}" class="easyui-treegrid" style="width:auto;height:610px" url="json.php?pob={pobocka}"  
        rownumbers="false" showFooter="false" 
        idField="id" treeField="name">
		<thead data-options="frozen:true">
			<tr>							
				<th field="name" width="300px">Název</th>			
				<th field="match">Match</th>
				<th field="norm" align="right">NORM</th>
				<th field="TOP" align="right">TOP</th>
				<th field="BUS" align="right">BUS</th>
				<th field="VIP" align="right">VIP</th>								
				<th field="PER" align="right">PER</th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th field="M2011" align="right" styler="zakaznik">ks</th>
				<th field="P2011" align="right" styler="zakaznik" formatter="cislo">Prodej</th>
				<th field="M2012" align="right" styler="zakaznik">ks</th>
				<th field="P2012" align="right" styler="zakaznik" formatter="cislo">Prodej</th>
				<th field="M2013" align="right" styler="zakaznik">ks</th>
				<th field="P2013" align="right" styler="zakaznik" formatter="cislo">Prodej</th>
				<th field="PL2013" align="right" styler="plan" formatter="cislo">Plán</th>
				<th field="MM2011" align="right" styler="pobocka">ks</th>
				<th field="PP2011" align="right" styler="pobocka" formatter="cislo">Prodej</th>
				<th field="MM2012" align="right" styler="pobocka">ks</th>
				<th field="PP2012" align="right" styler="pobocka" formatter="cislo">Prodej</th>
				<th field="MM2013" align="right" styler="pobocka">ks</th>
				<th field="PP2013" align="right" styler="pobocka" formatter="cislo">Prodej</th>
				<th field="MF2011" align="right" styler="firma">ks</th>
				<th field="F2011" align="right" styler="firma" formatter="cislo">Prodej</th>
				<th field="MF2012" align="right" styler="firma">ks</th>
				<th field="F2012" align="right" styler="firma" formatter="cislo">Prodej</th>
				<th field="MF2013" align="right" styler="firma">ks</th>
				<th field="F2013" align="right" styler="firma" formatter="cislo">Prodej</th>
			</tr>
		</thead>    
</table>

JSON DATA:
Code:
[{"name":"BORS B\u0159eclav a.s.","TOP":"TOP","VIP":"","BUS":"BUS","PER":"","id":"2530","P2011":"1271849,22","P2012":"1405680,3","P2013":"314316,72","state":"closed","PL2013":"1350000"},{"name":"FRENAT,s.r.o.","TOP":"TOP","VIP":"","BUS":"","PER":"","id":"62239","P2011":"329958,8","P2012":"231290,85","P2013":"90948,12","state":"closed","PL2013":"250000"},{"name":"H+P T\u00fdnec, s.r.o.","TOP":"TOP","VIP":"","BUS":"","PER":"","id":"50334","P2011":"168321,31","P2012":"144241,23","P2013":"22542,45","state":"closed","PL2013":"200000"},{"name":"In\u017een\u00fdrsk\u00e9 stavby Hodon\u00edn, s.r.o.","TOP":"TOP","VIP":"","BUS":"","PER":"","id":"64513","P2011":"307615,1","P2012":"328220,19","P2013":"98682,38","state":"closed","PL2013":"600000"},{"name":"J Group s.r.o.","TOP":"TOP","VIP":"","BUS":"","PER":"","id":"51022","P2011":"236650,55","P2012":"156970,08","P2013":"1494,43","state":"closed","PL2013":"50000"},{"name":"Ji\u0159\u00ed Nesvadba","TOP":"TOP","VIP":"","BUS":"","PER":"","id":"50902","P2011":"52728,26","P2012":"34537,96","P2013":"24079,54","state":"closed","PL2013":"120000"},{"name":"MARTINEK CAR,s.r.o.","TOP":"TOP","VIP":"","BUS":"","PER":"","id":"57576","P2011":"107378,51","P2012":"70370,75","P2013":"11302,68","state":"closed","PL2013":"50000"},{"name":"VADUAL LOGISTIK, spol. s r.o.","TOP":"TOP","VIP":"","BUS":"","PER":"","id":"60991","P2011":"1790408,96","P2012":"883938,09","P2013":"0","state":"closed","PL2013":"0"}]

Title: Re: Frozen Columns in TreeGrid
Post by: stworthy on March 20, 2013, 02:53:16 AM
Please apply 'rownumbers:true' property to solve this issue. Or override the loadFilter as below:
Code:
<script>
		$.fn.treegrid.defaults.loadFilter = function(data, parentId){
			var opts = $.data(this, 'treegrid').options;
			if (!opts.columns){
				var dgOpts = $.data(this, 'datagrid').options;
				opts.columns = dgOpts.columns;
				opts.frozenColumns = dgOpts.columns;
			}
			return data;
		};
</script>

Title: Re: Frozen Columns in TreeGrid
Post by: msvabik on March 20, 2013, 03:18:23 AM
Thank you both options work great.


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines