How to put an href on tree or treegrid

[eagleeye]

I was working with tree and treegrid, my code is based on http://www.jeasyui.com/tutorial/tree/treegrid5.php, but i need to add an URL column to link to some place ( One menu item option).
My HTML
 LoadFilter is the same of example cited on top.

Code:

<table id="test" title="Lazy Loading" class="easyui-treegrid" style="width:700px;height:600px"
			data-options="
				url: 'data/treegrid_data.json',
				method: 'get',
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				loadFilter: myLoadFilter
			">
		<thead>
			<tr>
				<th field="name" width="220">Name</th>
				<th field="size" width="100" align="right">Size</th>
				<th field="date" width="150">Modified Date</th>
                                <th field="url"  width="150">URL</th>
			</tr>
		</thead>
	</table>

My JSON format is this

Code:

[{
	"id":1,
	"name":"C",
	"size":"",
	"date":"02/19/2010",
	"children":[{
		"id":2,
		"name":"Program Files",
		"size":"120 MB",
		"date":"03/20/2010",
		"children":[{
			"id":21,
			"name":"Java",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":211,
				"name":"java.exe",
				"size":"142 KB",
				"date":"01/13/2010",
                                "url":"http://www.mkyong.com/author/mkyong/"
			},{
				"id":212,
				"name":"jawt.dll",
				"size":"5 KB",
				"date":"01/13/2010",
                                "url":"http://viralpatel.net/blogs/"
			}]
		},{
			"id":22,
			"name":"MySQL",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":221,
				"name":"my.ini",
				"size":"10 KB",
				"date":"02/26/2009",
                                "url": "http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid"
			},{
				"id":222,
				"name":"my-huge.ini",
				"size":"5 KB",
				"date":"02/26/2009",
                                "url":"http://www.jeasyui.com/demo/main/index.php?plugin=NumberSpinner&theme=default&dir=ltr&pitem="
			},{
				"id":223,
				"name":"my-large.ini",
				"size":"5 KB",
				"date":"02/26/2009",
                                "url":"http://www.mysql.com/"
			}]
		}]
	},{
		"id":3,
		"name":"eclipse",
		"size":"",
		"date":"01/20/2010",
		"children":[{
			"id":31,
			"name":"eclipse.exe",
			"size":"56 KB",
			"date":"05/19/2009"
		},{
			"id":32,
			"name":"eclipse.ini",
			"size":"1 KB",
			"date":"04/20/2010"
		},{
			"id":33,
			"name":"notice.html",
			"size":"7 KB",
			"date":"03/17/2005"
		}]
	}]
}]

The question is How to add <a  href> </a> in this column, not only text, i need URL for launch some process

[eagleeye]

Hi get the answer using treegrid and one formatter on my URL column

Code:

<script type="text/javascript">  
function cellStyler(value,row,index){               
                                 return '<span><a href="'+ value+'" class="easyui-linkbutton">'+ row.url+'</a></span>';
                
            }
            
        </script>

Code:

<table          title="Menú de Opciones Editable"
                        class="easyui-treegrid"
                        style="width:1200px;height:auto "
                        data-options="
                        url: 'armaArbol?action=GETROLE',                        
                        rownumbers: true,
                        idField: 'menu_id',
                        treeField: 'name',                        
                        queryParams:{idrole: 1,idsistema:1}"
                        id='tg'>
            <thead>
                <tr>
                    <th field="rolename" width="100">RoleName</th>
                    <th field="idrole" width="50">IDRole</th>
                    <th field="idsistema" width="50">IDSistema</th>
                    <th field="menu_id" width="50">MenuID</th>
                    <th field="padre" width="50">Padre</th>                   
                    <th data-options="field:'name',width:'250',editor:'text'">Nombre</th>                    
                    <!--<th data-options="field:'url',width:450,editor:'text',styler:cellStyler">Attribute</th>    -->
                    <th data-options="field:'url',width:450,editor:'text',formatter:cellStyler">Attribute</th>    
                    <th field="action" width="50">Permisos</th>
                    <th field="activo" width="50">Activo</th>
                </tr>
            </thead>
        </table>            

However i have doubt, how to get it result in a tree

[eagleeye]

Sorry is no styler, is formatter.

Code:

<th data-options="field:'url',width:450,editor:'text',formatter:cellStyler">Attribute</th>

where cellStyler is a Javascript function formatter

Code:

function cellStyler(value,row,index){                              
                  return '<span><a href="'+ value+'" class="easyui-linkbutton">'+ row.url+'</a></span>';          
            }