ligerUI ligerTree多种实现方式

最新推荐文章于 2019-06-18 17:27:00 发布
最新推荐文章于 2019-06-18 17:27:00 发布
阅读量9.1k 收藏 4
点赞数
分类专栏： springmvc ligerUI ligerTree 文章标签： springmvc 递归 ligerUI ligerTree tr
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010117166/article/details/14225215
版权

          这几天做项目过程中，在项目的后台使用的是ligerUI,遇到了不少的问题，其中在tree上磕碰最多，在不断的尝试下，写了好几种不同的实现方式，在此总结一下，方便日后自己使用时可以信手拈来，同时也希望可以帮助其他的遇到和我类似问题的哥们儿。

          ligerTree有三种不同的实现方式。关于ligerTree的API我就不多说了，网上一大堆，关键是如何使用。

          第一种：点击加载子节点，一级一级显示。这个方式核心思想是：递归。

          页面js代码：


     //加载树 

     $("#maintree").ligerTree( {
url : 'viewtree?'+$.param( {
typeid:'1',
parentid : '-1'
}),
checkbox :false,
slide : false,
isleaf : false,
onBeforeExpand : onBeforeExpand,
onClick : function(node) {
if(node!=null && node.data!=null){
nodeid = node.data.nodeid;
if(nodeid != -1&&node.data.typeid==-1) {
gridManager.setOptions( {
parms : [{
name : 'organid',
value : nodeid
}]
});
gridManager.loadData(true);
}

} 
}
});


  //展开前事件,节点展开之前加载子节点的内容

  function onBeforeExpand(node) {
if (node.data.children && node.data.children.length ==0&&node.data.typeid!=-1) {
treeManager.loadData(node.target,
'viewtree?' + $.param( {
parentid : node.data.nodeid,
typeid:node.data.typeid
}));
}
}


控制层的方法:

      /**
* 加载组织管理树    
* @param request
* @param response
* @param writer
* @return
 */
@RequestMapping("/viewtree")
public String viewTree1(HttpServletRequest request,HttpServletResponse response,PrintWriter writer) {
JSONObject jsonObj = new JSONObject();
String parentid=request.getParameter("parentid");
String typeid=request.getParameter("typeid");
String treeJSON = "";

try{
if(typeid.equals("2")){   //盟市教研室
List<TbOrganization> menuList=tbOrganizationService.getAllMenus(parentid);
if(menuList!=null&&menuList.size()>0){
for(TbOrganization menu:menuList){
jsonObj.put("text",menu.getName());
jsonObj.put("nodeid",menu.getOrganid());
jsonObj.put("parentid",menu.getParentid());
jsonObj.put("type", menu.getType());
jsonObj.put("isexpand", "false");
jsonObj.put("typeid",3);
jsonObj.put("children", "[]");
treeJSON += jsonObj.toString() + ",";
}
}
}else if(typeid.equals("3"))    //加载旗县教研室
{ 
List<TbOrganization> menuList=tbOrganizationService.getAllMenus(parentid);
if(menuList!=null&&menuList.size()>0){
for(TbOrganization menu:menuList){
jsonObj.put("text",menu.getName());
jsonObj.put("nodeid",menu.getOrganid());
jsonObj.put("parentid",menu.getParentid());
jsonObj.put("type", menu.getType());
jsonObj.put("isexpand", "false");
jsonObj.put("typeid",4);
treeJSON += jsonObj.toString() + ",";
}
}
}else if(typeid.equals("4"))    //加载学校
{
List<TbOrganization> menuList=tbOrganizationService.getAllMenus(parentid);
if(menuList!=null&&menuList.size()>0){
for(TbOrganization menu:menuList){
jsonObj.put("text",menu.getName());
jsonObj.put("nodeid",menu.getOrganid());
jsonObj.put("parentid",menu.getParentid());
jsonObj.put("type", menu.getType());
jsonObj.put("isexpand", "false");
jsonObj.put("typeid",-1);
//jsonObj.put("children", "[]");
treeJSON += jsonObj.toString() + ",";
}
}
}else                           //加载教育厅教研室
{
List<TbOrganization> menuList=tbOrganizationService.getAllMenus(parentid);
if(menuList!=null&&menuList.size()>0){
for(TbOrganization menu:menuList){
jsonObj.put("text",menu.getName());
jsonObj.put("nodeid",menu.getOrganid());
jsonObj.put("parentid",menu.getParentid());
jsonObj.put("type", menu.getType());
jsonObj.put("isexpand", "false");
jsonObj.put("typeid",2);
jsonObj.put("children", "[]");
treeJSON += jsonObj.toString() + ",";
}
}
}
}catch(Exception ex){
ex.printStackTrace();
}


if (!treeJSON.equals("")){
//去掉了最后的,
treeJSON = treeJSON.substring(0, treeJSON.lastIndexOf(","));
}
treeJSON = "[" + treeJSON + "]";
if (treeJSON.equals("[{}]")){
treeJSON = "[]";
}
writer.print(treeJSON);
return null;
}

services层、Mapper层代码我都不粘贴了，很简单啦。下面是几张图片可以帮助理解：

    

        

第二种方式：一次性加载出来整个tree(含有树的右键菜单).   这种方法核心是：关联集合

  页面js :


        var gridManager = null;
        var treeManager =null;
        var contextmenuManager=null;

        $(function ()
        {
        var layout = $("#layout").ligerLayout( {
leftWidth : 200
});
//加载树的右键菜单
contextmenuManager = $.ligerMenu({ top: 100, left: 100, width: 120,items:
           [
           { id: 'addmenu',text: '新建子菜单', click: cmitemclick },
           { line: true },
           { id: 'modifymenu',text: '修改菜单', click: cmitemclick },
           { id: 'deletemenu',text: '删除菜单', click: cmitemclick }
           ]
          });

                      //加载菜单树
$("#maintree").ligerTree({
url: '${ctx}/resource/viewtree',
checkbox : false,
slide : false,
isleaf : false,
onClick : function(node) {
if(node!=null&&node.data!=null){
gridManager.setOptions( {
parms : [{
name : 'parentid',
value : node.data.nodeid
}]
});
gridManager.loadData(true);
}
},
onContextmenu: function (node, e){
selectedNode=node;
if(node.data.parentid==-1){
contextmenuManager.setEnabled('addmenu');
contextmenuManager.setDisabled('modifymenu');
contextmenuManager.setDisabled('deletemenu');
}else{
contextmenuManager.setDisabled('addmenu');
contextmenuManager.setEnabled('modifymenu');
contextmenuManager.setEnabled('deletemenu');
}
contextmenuManager.show({ top: e.pageY, left: e.pageX });
return false;
}
});
treeManager = $("#maintree").ligerGetTreeManager();
        }); 

控制层的方法：

     /*
* 加载树(多次查询)
*/
@RequestMapping("/viewtree")
public String viewTree(HttpServletRequest request,HttpServletResponse response,PrintWriter writer) {
JSONArray menuArr=new JSONArray();
try{

                       //获取这个集合的时候在sql语句中需要一个关联。getAllMenus()是查的一级节点内容，同时关联查出二级节点的内容。sql语句的关联我写在下面啦
List<TbOrganization> menuList=tbOrganizationService.getAllMenus();
if(menuList!=null){
for(TbOrganization menu:menuList){
List<TbOrganization> childrenList=menu.getChildren();
JSONObject nodeJson=new JSONObject();
nodeJson.put("text",menu.getName());
nodeJson.put("nodeid",menu.getOrganid());
nodeJson.put("parentid",menu.getParentid());
nodeJson.put("type", menu.getType());
if(childrenList!=null&&childrenList.size()>0){
JSONArray childMenuArr=new JSONArray();
for(TbOrganization childMenu: childrenList){
JSONObject childNodeJson=new JSONObject();
childNodeJson.put("text",childMenu.getName());
childNodeJson.put("nodeid",childMenu.getOrganid());
childNodeJson.put("parentid",childMenu.getParentid());
childNodeJson.put("type", menu.getType());
if(childMenu.getOrganid()!=null)
{
JSONArray GrandchildMA=new JSONArray();
List<TbOrganization> QXList=tbOrganizationService.getOrganizationListByParentId(childMenu.getOrganid());
for(TbOrganization GrandchildMenu: QXList)
{
JSONObject GrandchildNodeJson=new JSONObject();
GrandchildNodeJson.put("text",GrandchildMenu.getName());
GrandchildNodeJson.put("nodeid",GrandchildMenu.getOrganid());
GrandchildNodeJson.put("parentid",GrandchildMenu.getParentid());
GrandchildNodeJson.put("type", GrandchildMenu.getType());
GrandchildMA.add(GrandchildNodeJson);
}
childNodeJson.put("children", GrandchildMA);
}
childMenuArr.add(childNodeJson);
}
nodeJson.put("children", childMenuArr);
}
menuArr.add(nodeJson);

}

}

}catch(Exception ex){
ex.printStackTrace();
}
writer.println(menuArr.toJSONString());
return null;
}

使用第二种方式的需要注意以下几点：

       1.在你的实体层需要有一个集合：private List<TbOrganization> children = new ArrayList<TbOrganization>();  //关联子节点

       2.sql语句：

                         <!--加载树  -->
                         <select id="getAllMenus"  parameterType="Integer" resultType="TbOrganization">
                            select
                                 <include refid="Base_Column_List" />  //需要显示的字段
                             from tb_organization
                           <if test="type==0" >
                                      where type=#{type}
                                  </if>
    
                          </select>


                          <sql id="Base_Column_List" >
                                      organid, name, parentid,type, remark
                           </sql>

                            //  关联需要加载的子节点

                             <resultMap id="BaseResultMap" type="TbOrganization" >
                                        <id column="organid" property="organid" jdbcType="VARCHAR" />
                                        <result column="type" property="type" jdbcType="INTEGER" /> 
                                        <collection property="children" select="selectOrganizationChildren" column="organid" ofType="TbOrganization"></collection>
                              </resultMap>

                            //collection中的属性select的值和下面查询sql语句中的id的值相同

                                <select id="selectOrganizationChildren" parameterType="String" resultType="TbOrganization">
                                    select
                                        <include refid="Base_Column_List" />
                                   from tb_organization
                                  where parentid= #{organid}
                                </select>     

第二种方式的缺点:对于3级以下节点可以选择使用，超过3级就不推荐使用。控制层中循环查询可能就会很影响效率。


第三种方式：  一次性加载出来整个tree(不含有树的右键菜单)         推荐使用第三种方式：简单 方便 快捷，我就是使用的这种方式。这种方式需要一次性查出所有的数据。

     js页面代码：

          var data1 = [];
  $.post("viewtree",function(data){
  for(var i=0;i<data.length;i++)
   {
    //tree的数据源
    data1.push({ id:data[i].nodeid, pid:data[i].parentid,type:data[i].type, text:data[i].text });  
       }
    treeManager=$("#maintree").ligerTree({  
           data:data1, 
           checkbox:false,
           idFieldName :'id',
           parentIDFieldName :'pid',
           onclick:function(node)
           {
      if(node!=null&&node.data!=null)
      {
       
      gridManager.setOptions({
  parms : [{
name : 'parentid',
value : node.data.id 
}]
  });
  formdata(node.data.id);  
  gridManager.loadData(true);
   
                  }
     
       }
       });
},'json');

               

控制层：

               @RequestMapping("/viewtree")
public String viewTree(HttpServletRequest request,HttpServletResponse response,PrintWriter writer) {
String type=request.getParameter("type");
String treeJSON = "";
JSONObject jsonObj = new JSONObject();
try{
List<TbOrganization> menuList=tbOrganizationService.getAllMenus(Integer.parseInt(type));
if(menuList!=null&&menuList.size()>0){
for(TbOrganization menu:menuList){
jsonObj.put("text",menu.getName());
jsonObj.put("nodeid",menu.getOrganid());
jsonObj.put("parentid",menu.getParentid());
jsonObj.put("type", menu.getType()+"");
treeJSON += jsonObj.toString() + ",";
}
}

}catch(Exception ex){
ex.printStackTrace();
}


if (!treeJSON.equals("")){
//去掉了最后的,
treeJSON = treeJSON.substring(0, treeJSON.lastIndexOf(","));
}
treeJSON = "[" + treeJSON + "]";
if (treeJSON.equals("[{}]")){
treeJSON = "[]";
}
writer.print(treeJSON);
return null;
}


这三种方式我都实现过，最后选择的是第三种。

over。         

u010117166
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ligerui之ligerTree_all
04-07
ligerui之ligerTree_all：博客：《ligerui_ligerTree_001_第一个“树”效果》
基于jQuery ligerUI实现分页样式
10-21
主要为大家详细介绍了基于jQuery ligerUI实现分页样式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ligerUI中树或者下拉框　ligerTree默认折叠，
蓝缘
08-13 7365
主要是红色部分，函数表示加载完成后执行 $("#tree1").ligerTree({ url: 'json.txt',onAfterAppend: function () {collapseAll();} }); manager = $("#tree1").ligerGetTreeManager(); 还有一个是下拉框里是一棵树，这个需要修改一下
jQuery LigerUI 插件介绍及使用之ligerTree
kongjunlongaa的博客
06-27 689
一，简介  ligerTree的功能列表： 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5,支持获取选中行等常见的接口方法   二，第一个例子 引入库文件 遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是说只需要引入plu
jQuery LigerUI ligerTree展开指定节点
石头
09-02 7394
概述 如果你的项目正在使用LigerUI框架恭喜中将了，ligerTree.js达不到我的期望，比如最近接手个项目，框架已经定型用的LigerUI，发现ligerTree.js不能展开指定节点，只有全展开、展开几级节点等，官方demo，如果要指定到某一个节点，那就需要修改源码了。 使用场景 那么问题来了，在什么情况下需要指定到节点呢？比如有这样一个需求，对树结构数据的维护，页面左则为树结...
关于ligerUi的ligertree的初始化默认选中多个的方法
笑语轻柔
11-27 3706
var parm = function (data) { return data.text.indexOf('节点1.3') == 0; }; tree.selectNode(parm); //function 中的参数data变量指的是ligerTree中的数据data //data.te
基于LigerUI前端技术实现的管理平台(纯静态页面,json,工作流及权限管理)
07-08
本项目是基于LigerUI实现的一个管理平台，其特点在于采用纯静态页面设计，数据交互主要通过JSON格式，同时包含了工作流管理和权限控制功能。 1. **LigerUI组件库**：LigerUI的核心是其一系列可复用的UI组件，这些...
解析Jquery的LigerUI如何实现文件上传
10-27
本篇文章是对Jquery中的LigerUI实现文件上传的方法，进行了分析介绍，需要的朋友可以参考下
Jquery-LigerUI.rar_ligerui
09-24
7. **下拉框**：LigerUI的下拉框组件提供多种模式，如联动下拉、搜索下拉等，适用于选择性输入的场景。 除了以上组件，LigerUI还提供了诸如进度条、提示框、滑块、按钮等其他实用组件。其设计简洁、易用，代码结构...
ligerTree.js的使用
10-09
你刚回来iououu 一会 uiou 以偶欧普欧普uouohiouppuio
LigerUI入门帮助（API里没写的入门帮助）【不断更新】
VaJoy童鞋的专栏
01-19 1万+
【布局：】   为了让左边区域（#accordion1）的连接能显示到右边区域（#framecenter）并生成tab选项卡，需创建以下js函数： function f_heightChanged(options) { if (tab) tab.addHeight(options.diff);
jQuery LigerUI 插件中ligerTree的使用介绍
五滴火
05-18 2403
一，简介  ligerTree的功能列表： 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5,支持获取选中行等常见的接口方法 二，第一个例子 引入库文件 遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是说只需要引入plug
(转)jQuery LigerUI 插件介绍及使用之ligerTree
02-08 192
一，简介 ligerTree的功能列表： 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5,支持获取选中行等常见的接口方法 二，第一个例子 引入库文件 遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是...
LigerUI下拉选择列表LigerComboBox中tree的节点初始化默认选中的问题
热门推荐
huitoukest的专栏
09-29 1万+
首先,直接后台传送tree的数据,然后前台控制那些ji
LigerTree之权限树
sun80264629的专栏
12-05 202
  jQuery.uuzz = $.uuzz || {}; jQuery.uuzz.Tree = { _treeView: null, _treeManager: null, _url: null, loadData: function(param){ var g = this; g.destroy(); g.getTreeManager().loadD...
php二位数组排序（按子元素排序）
12-18 151
array_multisort(array_column($mainTree[$note]["beCalls"], "wtp"), SORT_DESC, array_column($mainTree[$note]["beCalls"], "name"), SORT_DESC, $mainTree[$note]["beCalls"]); 转载于:https://www.c...
ligerTree简单例子
weixin_30402085的博客
06-18 188
效果图，如上 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery.js"></script> ...
ligerTree的绑定
hugaozhuang的专栏
07-26 3350
采用了框架结构：http://blog.csdn.net/hugaozhuang/article/details/8998557 在页面js部分，书写即可： //获取菜单 20130723 H         function GetMenu(jsonData, scope) {             if (jsonData) {                 var pushDa
用vue实现ligerui的grid
最新发布
06-08
首先需要在Vue项目中引入LigerUI的相关文件，可以通过CDN或下载LigerUI的文件进行引入。然后在Vue组件中定义一个grid组件，并在该组件中引入LigerUI的相关代码。 在Vue组件中的template中，可以使用LigerUI提供的grid标签来创建grid组件，例如： ``` <liger-grid :columns="columns" :data="data"></liger-grid> ``` 其中，columns是定义grid的列信息，data是要展示的数据信息。 在Vue组件中的script中，需要定义columns和data两个变量，例如： ``` <script> export default { name: 'MyGrid', data () { return { columns: [ { display: 'ID', name: 'id', width: 80, align: 'center' }, { display: 'Name', name: 'name', width: 120, align: 'left' }, { display: 'Email', name: 'email', width: 200, align: 'left' }, { display: 'Address', name: 'address', width: 200, align: 'left' } ], data: [ { id: 1, name: 'John', email: 'john@example.com', address: 'New York' }, { id: 2, name: 'Jane', email: 'jane@example.com', address: 'London' }, { id: 3, name: 'Bob', email: 'bob@example.com', address: 'Paris' } ] } } } </script> ``` 以上是一个简单的示例，其中columns定义了grid的列信息，包括列名、列字段名、列宽度和对齐方式等，data定义了要展示的数据信息。 需要注意的是，LigerUI的grid组件需要在mounted生命周期中进行初始化，例如： ``` mounted () { this.$nextTick(() => { $(this.$el).ligerGrid({ columns: this.columns, data: this.data }) }) } ``` 以上代码中，使用jQuery选择当前组件的元素，然后调用ligerGrid方法进行初始化，传入columns和data参数。 最后，需要在组件销毁时销毁grid组件，例如： ``` beforeDestroy () { $(this.$el).ligerDestroy() } ``` 以上是用Vue实现LigerUI的grid组件的基本步骤，可以根据实际需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值