场景

SpringBoot+Jquery+jsTree实现页面树型结构：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897251

效果

实现

前提

已经搭建完jsTree的引入之后，能正常显示树形结构以及详情明细的情况V下，实现点击编辑也能

选择树形结构并能更改。

点击编辑显示弹窗

在同一个页面设置添加和编辑共用的页面隐藏。

<div class="modal inmodal" id="orgAddModel" tabindex="-1" role="dialog"  aria-hidden="true"><div class="modal-dialog modal-lg" id="addDiv" th:fragment="addDiv"><div class="modal-content animated fadeIn"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><i class="fa fa-plus-circle modal-icon pl-1p75"></i><h4 class="modal-title" th:text="${orgAddTitle}">添加架构</h4><small><span th:text="${orgAddName}"></span></small></div><form id="orgAdd"  role="form" action=""><div class="modal-body"><div class="form-row"><input type="hidden" class="form-control" name= "id"th:value="${sp==null?'':sp.id}"/><input type="hidden" class="form-control" name="op" th:value="${op}"/><!-- <input type="hidden" class="form-control" name= "orgLevel"th:value="${sp==null?'':sp.orgLevel}"/>--><input type="hidden" class="form-control" name= "pid"th:value="${sp==null?'':sp.pid}"/><div class="form-group col-md-4"><label>架构名称</label><input type="text" placeholder="请输入架构名称" class="form-control" name= "text"th:value="${sp==null?'':sp.text}"/></div><div class="form-group col-md-4" th:if="${sp} ne null"><label>架构排序</label><input type="number" placeholder="请输入排序号码" class="form-control" name= "sortNum"onkeyup="this.value= this.value.replace(/\D/g,'')"onafterpaste="this.value= this.value.replace(/\D/g,'')"th:value="${sp==null?'':sp.sortNum}"/></div><div class="form-group col-md-4"><label>架构图标</label><input type="text" placeholder="请输入图标信息" class="form-control" name= "icon"th:value="${sp==null?'':sp.icon}"/></div><div class="form-group col-md-4"><label>架构编号</label><input type="text" placeholder="请输入架构编号" class="form-control" name= "num"th:value="${sp==null?'':sp.num}"/></div><div class="form-group col-md-4"><label>架构分类</label><select class="form-control m-b" name="orgClassify"><optionth:selected="${sp==null?true:0==sp.orgClassify ? true:false}" value="0">集团</option><optionth:selected="${sp==null?false:1==sp.orgClassify ? true:false}" value="1">公司</option><optionth:selected="${sp==null?false:2==sp.orgClassify ? true:false}" value="2">工厂</option><optionth:selected="${sp==null?false:3==sp.orgClassify ? true:false}" value="3">部门</option><optionth:selected="${sp==null?false:4==sp.orgClassify ? true:false}" value="4">岗位</option></select></div><div class="form-group col-md-4"><label>是否展开</label><select class="form-control m-b" name="opened"><optionth:selected="${sp==null?true:0==sp.opened ? true:false}"value="0">折叠</option><optionth:selected="${sp==null?true:1==sp.opened ? true:false}" value="1">展开</option></select></div><div class="form-group col-md-4"><label>是否是顶级</label><select class="form-control m-b" name="isTopLevel" id="isTopLevel"><optionth:selected="${sp==null?true:1==sp.isTopLevel ? true:false}"value="1">是</option><optionth:selected="${sp==null?true:0==sp.isTopLevel ? true:false}" value="0">否</option></select></div><div class= "form-groupcol-md-4"th:if="${sp!=null && sp.isTopLevel==0}"><label>归属机构</label><input id="belong_org_id" type="hidden" name="belongOrgId"/><input id="belong_org_ids" type="hidden" name="belongOrgIds"/><input id="belong_org_des" type="text" readonly placeholder="请选择一项归属机构" class="form-control" name= "belongOrgDes"th:value="${rm==null || rm.sysRole ==null?'':rm.sysRole.remark}"/><div id="belong_org_jstree"></div><div class="form-group col-md-4"><label>备注</label><textarea  rows="4" placeholder="请输入备注" class="form-control" name= "remark"th:text="${sp==null?'':sp.remark}"></textarea></div></div></div><div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">保存</button></div></form></div></div></div>
</div>

注：

在归属机构这里设置了几个隐藏的input框，用于获取被选中的节点的id值并在编辑后的保存时

提交到后台。

编辑按钮的点击事件

<button class="btn btn-info " type="button" onclick="orgEdit()"><i class="fa fa-paste"></i> 编辑</button>

js代码

// 编辑操作
function orgEdit() {//获取选中的节点var ref = $('#org_tree').jstree(true),sel = ref.get_selected();//如果为空，则提示请选择if(!sel.length) {swal({type: 'error',title: '错误提示',text: '请选择一个架构！'})return false;}sel = sel[0];var url = '/sysEnterpriseOrg/orgAdd.do';//将选中的节点以及标识为编辑的标识变量传递到后台var data = {"id":sel,"op":"editAction"};//编辑的modal框加载要编辑数据，根据传递的选中的节点的id$('#addDiv').load(url, data, function () {//加载编辑页面的归属结构的树形结构var ajaxUrl = "/sysEnterpriseOrg/doListOrgRecursion.do";$.post(ajaxUrl,data).done(function (res) {if(res.status){//设置归属机构的树形结构$('#belong_org_jstree').data('jstree', false).empty();$('#belong_org_jstree').jstree({'core':{'data': res.data,"multiple": false,//单选"themes": {"responsive": false}},"checkbox" : {"keep_selected_style" : false,"three_state":false,"cascade":"undetermined"},"plugins" : [ "checkbox","changed" ]}).on("changed.jstree", function (e, data,node) {var undeterminedsArr =$("#belong_org_jstree").jstree(true).get_undetermined(); //使用get_checked方法var checkedArr = $("#belong_org_jstree").jstree(true).get_checked();choseOrgArr = undeterminedsArr.reverse().concat(checkedArr);choseOrgTextArr = [];choseOrgIdsArr = [];choseOrgArr.forEach(function (value,index,array) {var text = $("#belong_org_jstree").jstree(true).get_node(value).text;var id = $("#belong_org_jstree").jstree(true).get_node(value).id;var textArr = text.split("(");choseOrgTextArr.push(textArr[0]);choseOrgIdsArr.push(id);})$("#belong_org_des").val(choseOrgTextArr.join("/").toString());$("#belong_org_id").val(checkedArr[0]);$("#belong_org_ids").val(choseOrgIdsArr.join(",").toString());})$("#belong_org_jstree").fadeOut();$("#belong_org_des").focus(function(){$("#belong_org_jstree").fadeIn();})$("#belong_org_des").blur(function(){$("#belong_org_jstree").fadeOut();})}else{swal({type: 'warning',title: '异常提示:',text: '获取归属机构数据失败，请重新尝试！',confirmButtonColor: "#1ab394",})}}).fail(function (err) {swal({type: 'warning',title: '异常提示:',text: '获取归属机构数据异常！',confirmButtonColor: "#1ab394",})});initOrgAddFormValidate("editAction");$("#orgAddModel").modal('show');});
}

注：

在实现jsTree时数据库中层级关系的依据是pid字段即父级节点id。

所以在编辑时改变其父节点就是要获取最后选中的节点的id，并将其传递给后台，后台将其pid更改即可。

SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID相关推荐

下拉式菜单在GridView编辑时联动选择
父子下拉式菜单DropDownList在GridView编辑时联动选择. 本Demo从添加时的父子DropDownList联动选择,以及在GridView的编辑时联动功能实现. 文件格式:.wmv;大 ...
ArcGIS小知识（五）——arcmap锁定图层-编辑时只选择唯一图层
1.锁定:右键单击想要选择要素的图层,Selection->MakeThis The Only Selectable Layer: 2.解锁方式一为:在table ofcontents下面的几个 ...
SpringBoot+MyBatisPlus+DataTables实现退货管理的添加和编辑时控制checkbox的回显选中
场景 SpringBoot+My BatisPlus+DataTables实现企业车间退货管理(学习企业级开发思想): https://blog.csdn.net/BADAO_LIUMANG_QIZH ...
当有键盘时如何在开始编辑时使UITextField向上移动？
使用iOS SDK: 我有一个带有UITextField的UIView , UITextField一个键盘. 我需要它能够: 提起键盘后,允许滚动UIScrollView的内容以查看其他文本字段自动 ...
服务器控件下拉框显示隐藏,演练：在 GridView Web 服务器控件中编辑时显示下拉列表...
演练:在 GridView Web 服务器控件中编辑时显示下拉列表 08/18/2008 本文内容更新:2007 年 11 月 GridView 控件默认显示用于编辑的文本框.可以使用 ASP.NE ...
C语言编辑时光标一直闪,win7系统编辑文字鼠标光标一直闪烁问题的解决方法 - win7吧...
win7系统编辑文字鼠标光标一直闪烁问题的解决方法使用电脑的过程中我们肯定是会进行文字输入的,不管是聊天游戏还是网页访问我们都会必要的进行一些文字编辑,但是有用户在对文字进行编辑时却遇到鼠标光标一 ...
layui省市区的实现，及编辑时如何返显
第一步:引入layui和jquery <link rel="stylesheet" href="./layui/css/layui.css">< ...
安装linux系统时将选择下列哪一个操作,linux操作系统考试试卷
<linux操作系统考试试卷>由会员分享,可在线阅读,更多相关<linux操作系统考试试卷(7页珍藏版)>请在人人文库网上搜索. 1.试卷编号 10 拟题教研室(或教师)签名 ...
关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为"安徽中控"项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必 ...

SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID

场景

效果

实现

前提

点击编辑显示弹窗

SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID相关推荐

最新文章

热门文章