EasyUI Tree与Datagrid联动

效果图

这是一个简单的solr检索的例子

输入关键词,显示树

选择一个节点,得到该节点下文档信息

代码:

JSP:

重点是标红的URL传递

<body>

<divclass="easyui-panel"title="Solr">

<divstyle="padding:
10px 60px 20px 60px;">

<tablecellpadding="5"align="center">

<tr>

<td>Carrot2:</td>

<td><inputclass="easyui-validatebox
textbox"type="text"

name="q"data-options="required:true"></input></td>

<td><ahref="javascript:void(0)"class="easyui-linkbutton"

onclick="submitForm()">Search</a></td>

</tr>

</table>

</div>

<br
/>

<table>

<tr>

<td>

<divclass="easyui-panel"

style="padding:
5px;
width:
400px;
height:
600px;">

<ulid="cluster_tree"class="easyui-tree"></ul>

</div>

</td>

<td>

<divclass="easyui-panel"

style="padding:
5px;
width:
1160px;
height:
600px;">

<tableid="docs"></table>

</div>

</td>

</tr>

</table>

function
submitForm() {

$(‘#cluster_tree‘).tree(

{

url : ‘tree.do/‘ + $("input[name=‘q‘]").val(),

method
: ‘GET‘,

onClick
: function(node) {

$(‘#docs‘).datagrid(

{

url : ‘docs.do/‘ + node.id + ‘/‘

+
$("input[name=‘q‘]").val(),

method
: ‘GET‘,

width
: ‘auto‘,

striped
: true,

singleSelect
: true,

loadMsg
: ‘数据加载中请稍后……‘,

rownumbers
: true,

columns
: [ [ {

field
: ‘name‘,

title
: ‘文档编号‘,

align
: ‘center‘

},
{

field
: ‘title‘,

title
: ‘文档名称‘,

align
: ‘left‘

},
{

field
: ‘score‘,

title
: ‘得分‘,

align
: ‘left‘

}
] ]

});

}

});

}

</script>

</body>

JAVA:

这里只提供接口级别的定义

/**

* 得到聚类树

* @param q
检索的字段

* @return 使用JSONArray生成JSON

* @throws
SolrServerException

@RequestMapping(value
= "tree.do/{q}",
method =
RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

public
String getTreeList(@PathVariable
String q) throws
SolrServerException

{}

/**

* 得到文档列表

* @param name
文档的ID

* @param q
检索的字段,再检索

* @return 使用JSONArray生成JSON

* @throws
SolrServerException

@RequestMapping(value
= "docs.do/{name}/{q}",
method = RequestMethod.GET,
produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

public
String getDocList(@PathVariable
String name, @PathVariable String q) throws
SolrServerException

{}

总结:

需要注意的是,这里虽然使用检索获得Tree,但是并没有采用POST表单的方式得到Tree的数据而是使用GET+参数方式获得.

EasyUI使的不多,感觉这方面的资料比较少,如果有更好的实现方式请告诉我,谢谢!

时间： 2024-08-02 12:33:15

EasyUI Tree与Datagrid联动的相关文章

递归和循环---从EasyUI Tree 发现自己的硬伤

前一阵子,朋友托我帮忙用vb.net写一个数独游戏,我当时的第一个想法---万能的互联网肯定有资源,肯定有人写---当然这是必须的---我站在巨人的肩膀上帮朋友完成代码---但是我突然觉得自己站在巨人这么高的肩膀上太高耸,想要找一下脚踏实地的感觉,所以我想自己写写,看看能不能写出来,结果就是------我压根没有思路. 对,毫不夸张,无从下手. 更深刻的一件事就是项目中用的的树状结构(easyui tree 实现),同样是根据数据库动态生成,我站在巨人的肩膀上,看着网上类似的datatable转

JQuery EasyUi Tree获取所有checkbox选中节点的id和内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta name="generator" content="HTML Tidy, see www.w3.org">

[转]easyui tree 模仿ztree 使用扁平化加载json

原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.html 一.扩展原因 ztree使用了一种扁平化的数据加载方式,就是id(自身id),pid(父id)的方式,参考http://www.ztree.me/v3/demo.php#_102,于是扩展easyui tree 也使用这种亲民的方式: 二.基本方法 1,载入扩展文件 2,在JS中实例化TRE

Easy-UI 动态添加DataGrid的Toolbar按钮

在前人的基础上进行的修改,不知道他是从哪里引用来的,所以没有粘贴引用地址. 原代码不支持1.3.6. 修改功能: 1.如果之前没有添加过工具,用这个方法不能添加(已修复): 2.估计是不支持1.3.6,所以在1.3.6下不能删除按钮(已修复): 3.添加了在删除最有一个按钮后把按钮容器删除掉: 插件代码: $.extend($.fn.datagrid.methods, { addToolbarItem: function (jq, items) { return jq.each(function

Easyui Tree方法扩展 - getLevel(获取节点级别)

Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLevel:function(jq,target){ var l = $(target).parentsUntil("ul.tree","ul"); return l.length+1; } }); 用法: var node = $().tree("getSele

jQuery EasyUI教程之datagrid应用（三）

今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能:jQuery EasyUI教程之datagrid应用(二) 接下来就是数据的增删改查了,首先我们在页面中添加功能按钮这里很简单就是datagrid的toolbar属性接下来我们实现按键的功能查询比较麻烦我们最后写,先写添加吧,既然要添加,就应该有表格或是输入的文本框吧,还要进行提交,那就要有f

EasyUI tree读取sql server的表结构得到json格式

本来项目需要一个tree的树结构,后来随便选择了一个easyUI tree开源框架,后来碰到一个问题,我是要从数据库递归出结构的,转成json的,怎么做?难道是递归了拼接StringBuilder?要是这样做就太傻了,当时也打算这么做.然后各种百度,博客园,QQ群去问,回答的也是五花八门,没人给我指点详细的,我只好自己琢磨了. 第一:递归数据库的表. 第二:序列化最后的递归结果. 这里是我的数据库的表: 然后下面是代码: 这里需要建立一个实体类,类的属性跟数据库表的一样,只是多了一个泛型属性,是

jQuery EasyUI教程之datagrid应用（二）

上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的点击查看上篇:jQuery EasyUI教程之datagrid应用(一) 这里不难发现生日的格式是毫秒(long型数据),并不是我们想要的年月日的格式,那我们就修改一下我们在js中写入格式时间的方法,并在生日一列用formatter来调用方法格式时间, //格式化时间 //把long型日期转为想要类型 function getDa

easyui tree末端子菜单显示：

easyui树形显示注意事项: [{"id":"01","text":"商户管理","state":"closed","checked":true,"children":[{"id":"0100","text":"商户管理","state":&quo

EasyUI Tree与Datagrid联动

效果图

代码:

总结:

EasyUI Tree与Datagrid联动的相关文章