EasyUI Tree 树点击按钮打开选中

js

  init_edit('propagandaTemplates');
  show_company();
  
  function init_edit(id) {
  	let $dialog = $('#department_dialog');
    $('.company-btn').click(function () {
      add_company($dialog);//点击弹出框
    });

	//弹出框删除按钮
    $dialog.on('click', '.icon-del', function () {
      let index = $(this).index(),
        tree_id = $(this).parent().attr('tree-id'),
        $department_tree = $('#department_tree'),
        node = $('#department_tree').tree('find', tree_id);
      company_list.splice(index, 1);
      if (node != undefined) $department_tree.tree('uncheck', node.target);
       //找到点击得那一行得tree_id,然后删除得那一条不选中
      $(this).parent().remove();//当前得那一行删除
    });
  }

	  //人员选择弹出框
  function add_company($dialog) {
    $dialog.dialog({
      title: '添加成员',
      width: 600,
      modal: true,
      closed: false,
      onOpen: function () {
        role_dialog($dialog);
      },
      buttons: [{
          text: '确认',
          cls: 'btn-confirm',
          id: 'btn_confirm',
          handler: function () {
            company_list = company_list.concat(
              $.map($dialog.find('.department_list'), (v, i) => {
                  return {
                    id: tree_id,
                    name: $(v).attr('data-scope'),
                    type: 'zzjg',
                    code: $(v).attr('data-code'),
                    pid: $(v).attr('data-pid')
                  };
              })
            );
            show_company();//调用初始化列表
            $dialog.dialog('close');
          },
        },
        {
          text: '取消',
          cls: 'btn-cancle',
          handler: function () {
            $dialog.dialog('close');
          },
        },
      ],
    });
  }

  //人员选择
  function role_dialog($dialog) {
    let $department_tree = $('#department_tree'),
      loading_box = `<div class="loading_box">
                <div class="loading">
                    <div class="loading-360 rotate-360"><div class="loading-dot-a"></div><div class="loading-dot-b"></div><div class="loading-dot-c"></div><div class="loading-dot-d"></div></div>
                </div>
            </div>`,
    $department_box = $dialog.find('.department_box');
    $department_box.prepend(loading_box);
    $department_tree.tree({
      cascadeCheck: false,//定义是否级联检查。
      onClick: function (node) {
        if (node.checked) {
          $department_tree.tree('uncheck', node.target);
        } else {
          $department_tree.tree('check', node.target);
        }
      },
      onBeforeExpand: function (node) {//节点展开前触发，返回 false 则取消展开动作。
        if (!$department_box.find('.loading_box').length) {
          $dialog.find('div.tree').hide();
          $dialog.find('.scroll').scrollTop(0).perfectScrollbar('update');
          $department_box.prepend(loading_box);
        }
      },
      onExpand: function (node) {//节点展开触发，返回 false 则取消展开动作。
        $department_box.find('.loading_box').remove();
        $department_box.find('div.tree').show();
      },
      onCheck: function (node) {
        if (node.checked) {
          if (!$('.yx_department').find('p.name_' + node.id).length ) {
          //判断已经选中得行数与当前选中得行数是否相同，若相同则不重复选中，不相同则选中
            let html = `<p class="department_list name_${node.id}" tree-id='${node.id}'  data-scope="${ node.text }" data-code = "${node.code}" data-pid = "${node.pid}" >${node.text}<i class="icon-del"></i></p>`;
            $('.yx_department').append(html);
          }
        } else {
          $('.yx_department')
            .find('p.name_' + node.id)
            .find('.icon-del')
            .click();
        }
      },
      onLoadSuccess: function (node, data) {
        $department_box.find('.loading_box').remove();
        $department_box.find('div.tree').show();
        $.map($('.yx_department .department_list'),function(v,i){
          var tree_id = $(v).attr('tree-id'),
          nodes = $department_tree.tree('find', tree_id);
          if (nodes) {
              $department_tree.tree('check', nodes.target);
          }
        })
        //判断显示选中得行数，tree树勾选上
        if (data.length == 0) {
          var _html = `<div class="noData" style="text-align:center;">没有找到匹配的记录</div>`;
          $department_tree.html(_html);
        } else {
          $department_box.find('.noData').remove();
        }
      },
    });
  }

	  //初始化列表
  function show_company() {
    let html = '';
    if (uuid == '-' || html !== '') {//render得uuid用于判断是否为编辑，不需要管
      $('.company_span').show()
    } else {
      $('.company_span').hide()
    }
    $('.company_list_span').empty(html);
    if (company_list.length == 0) {
      $('.company_span').hide()
    } else {
      $('.company_span').show()
    }
    $.map($('.yx_department .department_list'),function(v,i){
      html += `${$(v).attr('data-scope')}；`;
    })
    //将已选中成员显示在页面上
    $('.company_list_span').append(html);
  }

html

     <span class="company_span">适用范围：</span>
	 <span class="company_list_span"></span>
	 <button class="company-btn btn-border-blue">选择参加对象</button>


	<!-- 添加成员弹窗 -->
    <div class="easyui-dialog role_dialog" id="department_dialog" data-options="closed:true"
        style="padding: 20px 30px;">
        <div class="department_left">
            <p>从下面选择要添加的成员：</p>
            <div class="department_box scroll">
                <div id="department_tree" data-options="url: '{% url " %s:commonInterface:get_tree_node"|str_replace:SERVER_NAME %}', data:[],queryParams:{cid: '{{ cid }}' , 'id' : {{zzjg_id}}},lines:true,checkbox:true"></div>
            </div>
        </div>
        <div class="icon-right"></div>
        <div class="department_right">
            <p>已经选择的成员：</p>
            <div class="yx_department scroll">
                {% for row in scope %}
                <p class="department_list name_{{ row.id }}" tree-id="{{row.id}}" data-scope="{{ row.name }}"
                    data-code="{{row.code}}" data-pid="{{row.pid}}">{{row.name}}<i class="icon-del"></i></p>
                {% endfor %}
            </div>
        </div>
    </div>