jquery miniUI treegrid 动态加载

jquery miniUi treeGrid 树动态加载问题,这里需要前台和后台交互

 

 

<div id="treegrid1" class="mini-treegrid" style="width:100%;height:480px;"    
    url="district-districtlist.htm" showTreeIcon="true"
    treeColumn="taskname" idField="district_id" parentField="parent_id" resultAsTree="false"
    showCheckBox="true" checkRecursive="false">
     <div property="columns">
         <div type="indexcolumn"></div>
          <div name="taskname" field="district_name"  headerAlign="center"
     allowSort="true">
     菜单名称
    </div>
          <div  field="district_id"  headerAlign="center"
     allowSort="true">
     地区编号
    </div>
    <div field="parent_id"  headerAlign="center"
     allowSort="true" >
     父地区编号
    </div>
    
    <div field="icon"  headerAlign="center"
     allowSort="true">
     菜单图标
    </div>
     </div>
     </div>

 

    url="district-districtlist.htm"  调用java 的查询方法(根据不同的语言而定)

 

 

后台的java的部分代码

 

 District district = new District();
    
     if(district_id == null)
      district.setParent_id("0");
     else
      district.setParent_id(district_id);
    
    
    int count =  districtService.getDistrictCountByDistrict(district);
     
   
  List<Map<String,Object>> res =new ArrayList<Map<String,Object>>();
  
  if(count>0){

 List<District> districts =  districtService.getDistrictDistrictByDistrict(district);
   for(District  d : districts){
    Map<String,Object> r = new HashMap<String,Object>();
    r.put("district_id", d.getDistrict_id());
    r.put("district_name", d.getDistrict_name());
    r.put("parent_id", d.getParent_id());
    r.put("isLeaf", false);
    r.put("expanded", false);
    res.add(r);
   }
   
  }

  jsonData = PluSoft.Utils.JSON.Encode(res);
  return SUCCESS;

 

根据传入的district_id 是否为null判断是否为第一的加载,null第一次加载,设置默认值0,根节点。

mini UI会在你点击展开的时候,传入自己的idField的值,这里需要接受,本人用的是struts2接收的。

 int count =  districtService.getDistrictCountByDistrict(district);
判断时候还有下节点如果该节点下有下节节点,那么,就循环遍历加载

没有节点,就返回一个空的结果集给前段

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要在项目中引入treegrid插件的相关文件,包括js和css文件。可以在官网上下载最新版本的插件。 然后,在html页面中创建一个表格,指定id属性和class属性为"treegrid",并定义表头和表身。 接下来,需要在js文件中编写代码来初始化treegrid插件,实现树状表格的展示和交互。具体步骤如下: 1. 引入treegrid插件的js文件。 2. 在页面加载完成后,获取表格元素,并调用treegrid方法进行初始化。 ``` $(function () { var table = $('#myTable'); table.treegrid({ // 插件参数 }); }); ``` 3. 配置插件参数,包括表格数据、列定义、排序方式、是否显示折叠图标等。 ``` table.treegrid({ // 数据相关参数 idField: 'id', // 数据的id字段名 treeField: 'name', // 树形结构的字段名 parentField: 'parentId', // 父节点的id字段名 data: myData, // 表格数据 // 列定义 columns: [[ { field: 'id', title: 'ID', width: 50 }, { field: 'name', title: '名称', width: 200 }, { field: 'price', title: '价格', width: 100 } ]], // 排序方式 sortName: 'name', sortOrder: 'asc', // 显示折叠图标 expanderExpandedClass: 'glyphicon glyphicon-minus', expanderCollapsedClass: 'glyphicon glyphicon-plus' }); ``` 4. 可以通过插件提供的方法来实现树状表格的交互,如展开、折叠、选中、取消选中等。 ``` // 展开节点 table.treegrid('expand', nodeId); // 折叠节点 table.treegrid('collapse', nodeId); // 选中节点 table.treegrid('select', nodeId); // 取消选中 table.treegrid('unselect', nodeId); ``` 以上就是使用treegrid插件创建树状表格的详细步骤。需要注意的是,插件的具体使用方式可能因版本不同而略有差异,建议在使用前查看官方文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值