WTM Three 控件优化使用

WTM Three 控件优化使用

WTM 简介

WTM 框架设计的核心理念就是”尽一切可能提高开发效率“。
WTM 框架把常规编码结构化，重复编码自动化，它不仅是一个框架，它是强有力的生产力工具！
在不分离的模式下，它连通了前台 UI 和后台代码。你不需要前后台分离，不需要两个人配合，减少成本，缩短工期。
在前后端分离的模式下，同样可以使用代码生成器同时生成前台和后台的代码，极大的降低了前后端人员的沟通成本，从本质上提升了开发效率，让“分离”不再复杂和昂贵
具体信息请查看官网
git 地址

---

背景

wtm 框架提供了 wt:tree 和 wt:treecontainer 两种树形控件,
其中,wt:tree 是简单的树形控件,wt:treecontainer 是带容器的属性控件。但是我想要的是既包含 tree 中的搜索功能,又要 treecontainer 的容器功能,经过不断尝试，最终还是决定使用 tree 控件,相对比较容易些.

---

修改

• 修改对应的 wt:tree 代码

  1. 由于此框架样式是用 xmSelect 的模板,所以大部分修改,参照了 xmSelect 的文档.

  2. 首先增加一些属性,增加可视化程度
     

  3. 增加搜索后的回调函数,进行搜索后的处理操作
     

     为了代码灵活性,所以增加了一个对外属性,方便后期进行其它操作
     

  4. 实际使用

  • html

  <div class="layui-fluid layui-col-space10" style="height:100%">
    <div class="layui-col-md3">
      <wt:tree
        field="Searcher.VariableId"
        show-toolbar="false"
        items="Searcher.Trees"
        hide-label="true"
        change-func="SelectClick"
        my-script="if($('.xm-search-input').val()==undefined||$('.xm-search-input').val()==null||$('.xm-search-input').val()==''){GateWayInformationListVM_Searcher_VariableId.changeExpandedKeys(false);}
                      else{
                  GateWayInformationListVM_Searcher_VariableId.changeExpandedKeys(true);
                  }"
      />
    </div>
    <div class="layui-col-md9">
      <wt:searchpanel vm="@Model" reset-btn="true" id="gatewaysearch">
        <wt:row items-per-row="ItemsPerRowEnum.Three">
          <wt:textbox field="Searcher.Name" />
          <wt:textbox field="Searcher.EquipmentName" />
          <wt:textbox field="Searcher.EquipmentCode" />
        </wt:row>
      </wt:searchpanel>
      <wt:grid
        vm="@Model"
        url="/GateWayInformation/Search"
        limit="10"
        height="450"
        id="mytab"
      />
    </div>
  </div>
  

  • js

  function SelectClick(obj) {
    if (
      obj != null &&
      obj != undefined &&
      obj.arr.length > 0 &&
      obj.arr[0].value != undefined
    ) {
      console.log("点击触发:" + obj.arr[0].value);
      $("#tempinput").remove();
      $("#gatewaysearch").append(
        "  <input type='hidden'id='tempinput' name = 'VariableId' value = '" +
          obj.arr[0].value +
          "' />"
      );
      GateWayInformationListVM_Searcher_VariableId.changeExpandedKeys(false);
      var postjson = {
        "Entity.Name": "我是网关",
        "Entity.VariableInformationId": obj.arr[0].value,
        "Entity.EquipmentName": obj.arr[0].name,
        "Entity.EquipmentCode": obj.arr[0].name,
      };
      $.post("xxx", postjson, function (res) {
        console.log("传输完成");
        $("#wtSearchBtn_gatewaysearch").trigger("click");
      });
    } else {
      $("#tempinput").remove();
      $("#wtSearchBtn_gatewaysearch").trigger("click");
    }
  }
  $(document).ready(function () {
    mytab.height = "full-110";
  });
  

---

效果

本次修改是为了方便界面友好度,并未做太多修改