前端高级组件(树组与自动填充)封使用示例，看看封装表的青现理解思想就好，商业源码，不能泄

 第一先看树组件

 

 一般数组的数据需要在id  和 pid 

 

 后端接口如下：

 

 前端请求数据格式如下：

 上面是准备    ui 前端技术点如下：

 

 表单提交时都是取name的值，但是这儿后端传来绑定的表单的 name 是中文名，不是id   如何提取id  ,需要先搞一个隐藏域

，将这个域的id 绑定到当下表单组件，如果是多个表单，用data-sync-ele 来绑定， 最后就是表单确认时最终显示在

表单的中内容通过data-text-attr 来指定，这用绑定数值 就有二种方式，隐藏域和sync-ele

 

其它属性：data-delimiter="~"  显示时间隔用的分隔符

 

 

 可以通过dat-header 指定标识头 也可以指多个头，逗号分割，正好上面有attr有指定名字，可以作提示用

 

 

 

 

 

 

 

以下是自动提示的封装，以下是效果

 以下点击是肯它需要后端反回数据，参数是上面输的值，后端的接口应该 如下：

import com.jfinal.core.ActionKey;
import com.jfinal.core.Controller;
import com.jfinal.core.paragetter.Para;
以下是控制层代码
public class AutocompleteController extends Controller {

    public void autocomplete() {
        // 获取查询参数q
        String q = getPara("q");
        // 获取limit参数，默认值为10
        int limit = getParaToInt("limit", 10);
        // 调用服务层的getAutocompleteList方法获取自动补全列表
        List<String> autocompleteList = service.getAutocompleteList(q, limit, true, "na");
        // 渲染JSON数据
        renderJson(autocompleteList);
    }
以下是服务层
    // 假设的服务类和getAutocompleteList方法
    private Service service = new Service();

    class Service {
        public List<String> getAutocompleteList(String query, int limit, boolean always, String matchcolumns) {
            // 这里应该是自动补全逻辑的实现
            // 返回自动补全列表
            return new ArrayList<>();
        }
    }
}