Title: How to put an href on tree or treegrid
Post by: eagleeye on December 17, 2013, 10:20:31 AM
I was working with tree and treegrid, my code is based on http://www.jeasyui.com/tutorial/tree/treegrid5.php (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. <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 [{
"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
Title: Re: How to put an href on tree or treegrid
Post by: eagleeye on December 17, 2013, 12:52:41 PM
Hi get the answer using treegrid and one formatter on my URL column <script type="text/javascript">
function cellStyler(value,row,index){
return '<span><a href="'+ value+'" class="easyui-linkbutton">'+ row.url+'</a></span>';
}
</script>
<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
Title: Re: How to put an href on tree or treegrid
Post by: eagleeye on December 17, 2013, 12:55:04 PM
Sorry is no styler, is formatter. <th data-options="field:'url',width:450,editor:'text',formatter:cellStyler">Attribute</th> where cellStyler is a Javascript function formatter function cellStyler(value,row,index){
return '<span><a href="'+ value+'" class="easyui-linkbutton">'+ row.url+'</a></span>';
}
|