ztree input框只读checkbox多选增添取消，逗号分隔

最新推荐文章于 2022-05-18 14:04:25 发布

订书钉qq

最新推荐文章于 2022-05-18 14:04:25 发布

阅读量1k

点赞数 1

分类专栏： js方法文章标签： checkbox ztree input

本文链接：https://blog.csdn.net/qq543539043/article/details/79460526

版权

js方法专栏收录该内容

5 篇文章 0 订阅

订阅专栏

功能实现：点击办理人姓名input框（只读），弹出ztree树对应的多选框，选中则出现在input框中，以逗号分隔(gwjh-eodiSendprocessdefForm.ftl)

前台效果选中展示

取消其中一个效果展示

代码展示

ftl页面表单元素

<body style="">
       <div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index:1000000000000;">
           <ul id="userForSelect" class="ztree form-control" style="margin-top:0;margin-top: 10px;overflow-y:scroll;height:290px;background: #f0f6e4;padding-right:20px;width:260px;"></ul>
       </div>
       <div style="padding:5px;">
       <div class="panel " >
           <div class="panel-heading" style="">
               <strong>
               <#if (rid!'')!=''><i class="icon-pencil"></i>编辑<#else><i class="icon-plus"></i>添加</#if>发文流程定义
               </strong>
           </div>
           <div class="panel-body" style="padding:5px;padding-top:15px;">
           <form id="form" class="form-horizontal" role="form" method='post' action="./EodiSendprocessdefSave">
           <input type="hidden" id="spdRid" name="spdRid" value="${rid?default('')}"/>
               </div>
               <div class="form-group">
                     <label class="col-sm-1 control-label required" >办理人姓名</label>
                     <div class="col-sm-3">
                         <input type="hidden" id='spdUserid' name="spdUserid" value="" />
                         <input type='text' id='spdUsername' name="spdUsername" readonly οnclick="showMenu(); return false;" value='<#if formData?exists>${formData.spdUsername!''}</#if>' class='form-control' placeholder=''/>
                     </div>
               </div>

               <div class="form-group">
                     <div class="col-sm-offset-2 col-sm-2">
                        <button class="btn btn-primary" οnclick="save();" type="button"><i class="icon icon-save"></i> 保存</button>
                        <button class="btn" type="button" οnclick="JavaScript :history.back(-1)"><i class="icon icon-reply"></i> 返回</button>
                     </div>
                </div>
               </form>
           </div>
       </div>
       </div>
   </body>

ftl 页面 js代码

</script>

后台代码

@RequestMapping(value = "/userTreeByOrganId", method ={RequestMethod.GET,RequestMethod.POST })
   @ResponseBody
   public List<ZTreeModel> userTreeByOrganId(
           @RequestParam(value = "userId", defaultValue = "", required = false) String userId,// 页号
           HttpServletRequest request){
        String[] str = userId.split(",");
       EntityWrapper<User> entityWrapper = new EntityWrapper<User>();
       entityWrapper.eq("organID", getOrganID());
       List<User> users = userServiceImpl.selectList(entityWrapper);
       List<ZTreeModel> treeList = new ArrayList<ZTreeModel>();
       for (int i = 0; i < users.size(); i++) {
           User user = users.get(i);
           String userName = user.getUserName();
           ZTreeModel atm = new ZTreeModel(user.getUserID(), getOrganID(),userName, true, "");
           for (int j = 0; j < str.length; j++){
               if(str[j].equals(user.getUserID())){
                   atm.setChecked(true);
               }
            }
           treeList.add(atm);
       }
       return treeList;
   }

ztreemodel

public class ZTreeModel {

   private String id;
   private String pId;
   private String name;
   private String path;
   private boolean open;
   private boolean checked;
   private String icon;
   private String iconSkin;

   public ZTreeModel() {

   }

   public ZTreeModel(String id, String pId, String name,
                   boolean open, String iconSkin) {
       this.id = id;
       this.pId = pId;
       this.name = name;
       this.open = open;
       this.iconSkin = iconSkin;
   }



   public String getId() {
       return id;
   }
   public void setId(String id) {
       this.id = id;
   }
   public String getpId() {
       return pId;
   }
   public void setpId(String pId) {
       this.pId = pId;
   }
   public String getName() {
       return name;
   }
   public void setName(String name) {
       this.name = name;
   }
   public String getPath() {
       return path;
   }
   public void setPath(String path) {
       this.path = path;
   }
   public boolean isOpen() {
       return open;
   }
   public void setOpen(boolean open) {
       this.open = open;
   }
   public boolean isChecked() {
       return checked;
   }
   public void setChecked(boolean checked) {
       this.checked = checked;
   }
   public String getIcon() {
       return icon;
   }
   public void setIcon(String icon) {
       this.icon = icon;
   }
   public String getIconSkin() {
       return iconSkin;
   }
   public void setIconSkin(String iconSkin) {
       this.iconSkin = iconSkin;
   }


}

订书钉qq

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ztree input框只读checkbox多选增添取消，逗号分隔

功能实现：点击办理人姓名input框（只读），弹出ztree树对应的多选框，选中则出现在input框中，以逗号分隔(gwjh-eodiSendprocessdefForm.ftl)前台效果选中展示 ...
复制链接

扫一扫