前端篇之表单维护

本人是一名初入编程坑的菜鸟，这次表单维护也是本鸟一次体验，生活不易，远离编程。

这次表单维护主要是对数据库内数据进行增删改查，功能简单，在此仅记录本次编程之路。

需求：

先看看第一步化工单位树吧：

化工树采用Ztree实现：ztree官网：http://www.treejs.cn/v3/demo.php#_101

首先本人下载了ztree开源代码，并进行各种尝试，尽力了解各属性，方法作用。

然后开始整个页面的布局，使用了bootstrap:https://getbootstrap.com/2.3.2/index.html,布局当然按照要求分为左右两部分，左侧用于存放化工单位树，右侧用于存放对应的化工单位危险源。

然后开始化工单位树的制作：

1：布置基本化工单位树代码，此时的数据是写死的，大致是一个框架，其包含。

       1.页面容器

            

        2.Ztree配置信息

                 

                

           

在js入口函数内部使用jquery+ajax，接受数据接口返回的数据,将数据调给Ztree初始化方法，这样ztree就有了数据，根据配置信息，使用key_id做为节点唯一标示，使用equipment_name作为节点名称

               

ztree树基本已经配置完成了，现在要求化工单位目录树能够进行模糊查询，现在就需要在树顶部加个文本框，给它个id="key"

从上图可以看到已经bind方法对该文本框进行各种监听，监听调用的方法都调用了searchNode函数，下面看下searchNode函数做了哪些事。

             

从上图可以看出，这个函数主要用来查询节点名称跟文本框内容是否存在匹配，上面出现了updateNodes()这个函数就是用来显示模糊搜索高亮显示的节点。      

          

这样一个带有模糊搜索功能的化工单位树就做好了