jsp sys treeselect_写个公共的zTree弹出选择的demo

其实写这种树结构选择的公共组件,如果项目是用的jsp, 这个倒是蛮好写的,直接用自定义标签就可以实现了,jsp页面调用自定义标签,然后在自定义标签.tag里面写操作数结构的共性代码

本来我也想直接套用之前项目里面的自定义标签来实现的,但是现在这个项目全都是用的html+veloctity,所有这里jsp的自定义标签.tag就无法使用了,以前没用过veloctity这玩意,思考了下,最后根据jsp里面的自定义标签的方式在html里面用自定义属性实现了公共树结构的选中

注:demo代码用的springmvc+html+jquery+layer+zTree+velocity来实现的

springmvc(java)、html(页面)、jquery(js框架)、layer(弹出层组件)、zTree(树插件)、velocity(模板引擎)

1.写一个子父级关系的entitypublic class TestMenu{

//菜单id

private Long menuId;

//菜单名称

private String menuName;

//父亲级id

private Long menuParentId;

//子集集合

private ArrayList subList;

public TestMenu(){

super();

​}

public TestMenu(Long menuId,Long menuParentId){

super();

this.menuId = menuId;

this.menuParentId = menuParentId;

​}

//生成对应的get set方法

}

2.service还得写接口和实现还得写mybatis和dao或者Mapper,太麻烦了,这里就不写接口和查询的代码了(只需递归查询出一个数据集合就可以了)

3.写一个TestController类,zTree通过ajax来拿数据@Controller

@RequestMapping("/test")

public class TestController {

@Autowired

private TestService service;

@RequestMapping("/menuTree")

@ResponseBody

public Object menuTree() {

//调用service查询出树的集合

List list = service.findList();

return list;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Antd中,我们可以使用`TreeSelect`组件及其子组件`TreeNode`来实现行政区划层级树。下面是一个示例代码: ``` import { TreeSelect } from 'antd'; const { TreeNode } = TreeSelect; const treeData = [ { title: '北京市', value: '110000', children: [ { title: '市辖区', value: '110100', children: [ { title: '东城区', value: '110101', }, { title: '西城区', value: '110102', }, { title: '朝阳区', value: '110105', }, { title: '丰台区', value: '110106', }, { title: '石景山区', value: '110107', }, { title: '海淀区', value: '110108', }, { title: '门头沟区', value: '110109', }, { title: '房山区', value: '110111', }, { title: '通州区', value: '110112', }, { title: '顺义区', value: '110113', }, { title: '昌平区', value: '110114', }, { title: '大兴区', value: '110115', }, { title: '怀柔区', value: '110116', }, { title: '平谷区', value: '110117', }, ], }, { title: '县', value: '110200', children: [ { title: '密云县', value: '110228', }, { title: '延庆县', value: '110229', }, ], }, ], }, // 省略其他行政区划数据 ]; function renderTreeNodes(data) { return data.map(item => { if (item.children) { return ( <TreeNode value={item.value} title={item.title} key={item.value}> {renderTreeNodes(item.children)} </TreeNode> ); } return <TreeNode value={item.value} title={item.title} key={item.value} />; }); } function DistrictTreeSelect() { return ( <TreeSelect showSearch style={{ width: '100%' }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="请选择行政区划" allowClear treeDefaultExpandAll > {renderTreeNodes(treeData)} </TreeSelect> ); } ``` 在该示例代码中,我们首先定义了一个`treeData`数组,数组中的每个元素都代表一个行政区划。每个元素中的`title`属性表示该行政区划的名称,`value`属性表示该行政区划的编码,`children`属性表示该行政区划的子区划。如果该行政区划没有子区划,则`children`属性为空数组`[]`。 接下来,我们定义了一个`renderTreeNodes`函数,该函数用于递归地渲染行政区划树的每个节点。如果当前节点有子节点,则递归地调用`renderTreeNodes`函数渲染子节点;否则,直接渲染该节点。 最后,我们定义了一个`DistrictTreeSelect`组件,该组件使用`TreeSelect`组件渲染行政区划树。在`TreeSelect`组件的子组件中,我们调用`renderTreeNodes`函数渲染每个节点。 需要注意的是,我们还对`TreeSelect`组件进行了一些配置,包括设置`showSearch`属性为`true`,表示显示搜索框;设置`dropdownStyle`属性为一个对象,表示下拉框的样式;设置`placeholder`属性为一个提示文本;设置`allowClear`属性为`true`,表示允许清空选中的值;设置`treeDefaultExpandAll`属性为`true`,表示默认展开所有节点。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值