位置: 编程技术 - 正文

zTree插件下拉树使用入门教程(ztree拖动)

编辑:rootadmin

推荐整理分享zTree插件下拉树使用入门教程(ztree拖动),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:ztree树形菜单,ztree拖动,ztree搜索框,ztree自动展开,ztree搜索框,ztree下拉框,ztree设置节点勾选,ztree input 下拉树,内容如对您有帮助,希望把文章链接给更多的朋友!

最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法。其一,就是使用zTree实现;其二,就是使用easyUI实现。因为公司的前端不是使用easyUI设计的,故这里我选择了zTree来实现下拉树。

这里使用简单的数据格式(即简单的Json格式)类似如下Json:

这里首先需要一个实体bean,用来封装对应查出来的数据,如下:

这里需要注意的是 pId 中的第二的字母是大写的,如果写成小写的就不能构造成树形结构,所有的都是根节点。

然后,将从数据库中查出来的数据,转换为对应的ztree需要的bean,再转换为相应的Json,代码如下:

将list转换为对应的Json方法,如下:

用到的Json工具包:

zTree插件下拉树使用入门教程(ztree拖动)

这样前台所需要的数据,就从库里取出,并封装成了对应的Json。

接下来就是前台的实现了,前台需要导入的js和css如下:

这里只有demo.css是自己添加的,其他都是官方制定的,demo.css是将官方的demo用到的css修改的,如下(这里有冗余样式没有删除掉);

然后,就是对应的下拉框:

这里有一个隐藏的文本框用来存放下拉框选择内容对应的id。

对应的脚本如下:

这样,一个下拉框就做完了。

如下图所示:

如果,需要在修改页面中回写相应的下拉列表数据,添加如下的脚本:

标签: ztree拖动

本文链接地址:https://www.jiuchutong.com/biancheng/373425.html 转载请保留说明!

上一篇:javascript HTML5 Canvas实现圆盘抽奖功能

下一篇:JS代码防止SQL注入的方法(超简单)(前端防止sql注入)

  • 免税收入进项税额转出比例结转法
  • 经营租赁的税务编码是什么
  • 季度利息分录
  • 产品质量问题赔偿账务处理
  • 专票小数点没打印齐能用吗
  • 本年收益的会计处理
  • 往期附加税申报错误更正后怎么退税
  • 企业缴纳残疾人保证金按什么标准缴纳
  • 企业所得税查增值税吗
  • 收到投资款怎么做记账凭证
  • 原始凭证包括会计档案吗
  • 企业所得税公益捐赠扣除限额
  • 某公司是一家刚成立的大型化妆品生产企业
  • 车辆报废收入如何处理
  • 实收资本变更做账依据
  • 收到股本的现金怎么做账
  • 受托方提供材料怎么写
  • 从联营企业分回利润可以在税前扣除吗
  • 小规模纳税人网上申报税务操作流程
  • 2018年老项目应该如何交税?
  • 公司为职工缴纳的医保不计入账户吗
  • 保证金计入哪个会计科目
  • 没有金税盘怎么查询已开发票
  • 增值税发票复印件
  • 查账征收改为核定征收需要什么资料
  • 计提代扣代缴个税
  • 企业增加值的计算
  • 龙骨花的养殖方法作用
  • icm是什么文件
  • 转出固定资产账务处理
  • php files
  • 最贵的域名是什么名字
  • Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案
  • nodejs安装及环境配置win10
  • 旅游企业税务筹划
  • 加速折旧的企业
  • 交易性金融资产公允价值变动计入
  • 微信php接口
  • php微信公众号开源框架
  • win10下 yolov8 tensorrt模型加速部署【实战】
  • typescript中文文档
  • javascript怎么用
  • 员工内部罚款能不能抵扣个税
  • 权益法转成本法非同一控制下为什么不公允
  • 跨年度多计提的附加税怎么做分录
  • 公司给员工交社保是怎么交的
  • 增值税发票扩版申请说明
  • 长期股权投资收益要交税吗
  • 出口不报关怎么收款
  • 坏账准备的核销的分录怎么做
  • 员工报销医药费怎么做会计分录
  • 物业管理公司收入确认
  • 个体户员工要签劳动合同吗
  • 消费税出口退税吗
  • 托盘费用怎么核算
  • 税率计税依据
  • 劳务报酬如何记账
  • 资本增值率计算公式是什么?
  • 如何设置银行存款日记账
  • mysql中key 、primary key 、unique key 与index区别
  • mysql索引命令
  • win7系统怎么运行xp系统的软件
  • 微软员工工资
  • windows8任务管理器在哪
  • linux操作系统root
  • 2020win7免费升级win10教程
  • 如何判断电脑是不是linux
  • 浅谈一下新冠的好处
  • javascript数据结构与算法第三版
  • linux终端命令行和输出在一行
  • win10 putty
  • shell脚本命令行参数
  • jquery 右键菜单
  • unity ugu
  • javascript面向对象编程指南第三版
  • 税务公众电话
  • 如何开具红字发票明细
  • 河北省税务局对外公开电话
  • 发票是去国税还是地税
  • 浙江医保怎么使用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设