layui 高级查询 dynamicCondition 下拉框级联

通过layui表格 field json对象的形式传入

首先引入  dynamicCondition 

layui.extend({
    soulTable: 'layui-soul-table/soulTable',
    dynamicCondition: 'dynamicCondition/dynamicCondition',
}).use(['table', 'form', 'soulTable', 'func','dynamicCondition'], function () {
    var $ = layui.$;
    var form = layui.form;
    var table = layui.table;
    var soulTable = layui.soulTable;
    var func = layui.func;
    var dynamicCondition = layui.dynamicCondition;

创建dynamicCondition 对象 

var dcInstance = dynamicCondition.create({
        fields: dataFields //field json对象的形式传入
        , tableId:  Overdue.tableId
        , type: "simple"  //type:"simple"/"complex"
        , conditionTextId: "#condition"
        , popupBtnsWidth: 350
        , popupShowQueryBtn: false
        , unpopupShowQueryBtn: false
        , unpopupBtnswidth: 410
        , unpopupShowAddBtn: false
        , height: 400
        , queryCallBack: function (requestData) {
            requestDataStr = JSON.stringify(requestData);
            if (requestDataStr === "{}") {
                $("#condition").hide();
            } else {
                $("#condition").show();
            }
            full =1
        }
        , counts: 4
    });
    dcInstance.setDisplayModel('popup');//弹窗模式

 dynamicCondition创建的实例对象。

成员	类型	说明	实例
open	function	弹出动态添加查询条件界面	open()
setDisplayModel	function	2.0.2版本新增。设置显示模式：弹窗/无弹窗。取值：popup/unpopup. 默认popup	sertDisplayModel('popup)
setCondition	function	设置初始条件（适用于li的形式）	setCondition([[‘name’,null,’’],[‘sex’,null,‘1’]])
getRowDivs	function	根据字段名称获取行div，返回一个dom类型的数组	getRowDivs(conditionFieldVal)
getVal	function	根据字段名称获对应的值，如果该字段条件有多个，则只取第一行对应的值。	getVal(conditionFieldVal)

---

初始化高级搜索的条件

window.viewObj = {
    storageData: [],
    goodsCategoryData: [],
    goodsChildCategoryData: [],
    activeData: [],
    //创建一个创建option的方法
    renderSelectOptions: function (data, settings) {
        settings = settings || {};
        var valueField = settings.valueField || 'value',
            textField = settings.textField || 'text'
        var html = [];
        for (var i = 0, item; i < data.length; i++) {
            item = data[i];
            html.push('<option value="' + item[valueField] + '"');

            html.push('>');
            html.push(item[textField]);
            html.push('</option>');
        }
        return html.join('');
    }
}; 

 {title: '一级类目', field: 'goodsCategoryCode', edit: "select", templet: function () {
                var options = viewObj.renderSelectOptions(viewObj.goodsCategoryData, {
                    valueField: "code",
                    textField: "name"
                });
                return '<select lay-filter="goods"><option value="" >请选择一级类目</option>' + options + '</select>';
            }
        },
        {
            title: '二级类目', field: 'goodsChildCategoryCode', edit: "select",
            //不能使用一级类目的方式 虽然数据已经有了，但是下拉框没有重新渲染 重新打开是可以重新渲染上的
            templet: '<select><option value="">请选择二级类目</option>' + + '</select>'
        },

使用新增的辅助接口

afterOpen, instance.getRowDivs(fieldName)，instance.getVal(fieldName)
afterOpen是在用户点击查询按钮弹出查询条件窗口后的回调函数。比如实现下拉框级联可以用到。
其实也可以不定义afterOpen，用下面的方法代替。
instance.getRowDivs(fieldName)和instance.getVal(fieldName) 

---

 $("#searchMore").click(function () {
        dcInstance.open();
    //直接在这里书写下拉框级联逻辑和定义afterOpen是一样的
form.on('select(goods)', function (data) {
            //拿到第一个field为 goodsChildCategoryCode <select>对象 goodsChild就是<select></select>对象
            var goodsChild =dcInstance.getRowDivs("goodsChildCategoryCode")[0].eleJq
//每一次监听之前把 select初始化            
goodsChild.html("<option value=''>请选择二级类目</option>")
            viewObj.goodsCategoryData.forEach(item=>{
                item.goodsChildCategory.forEach(i=>{
                    if(i.goodsCategoryCode == data.value){
                        var option1 ='<option value=' + i.code + '>'+ i.name +'</option>'
                        goodsChild.append(option1)
                    }
                })
            })
            form.render("select");
})

 总结：新版本也支持自定义扩展器，如果不是复杂的联动这种方式是简单的，像把联动的数据装到全局变量里是行不通的，因为dynamicCondition没有渲染下拉框的方法，layui有form.render("select")

        通过jquery最基础添加标签的形式，拿到这个标签的对象，然后再进行一些逻辑操作.

自定义扩展器：高级查询组件dynamicCondition升级为v2.0.0版本（二）——扩展编辑器_xiaozaq的博客-CSDN博客