Layui扩展组件-仿 select 的异步树形选择器(asynTreeSelect)(二)

将省市县数据源改成静态文件district.js,减少向服务器请求次数。

district.js文件

var district= [
        {
            "parentid": 0,
            "name": "北京市",
            "code": "110000",
            "id": 6942
        },
        {
            "parentid": 6942,
            "name": "北京市",
            "code": "110100",
            "id": 6943
        },
        {
            "parentid": 6943,
            "name": "东城区",
            "code": "110101",
            "id": 6944
        },
        {
            "parentid": 6943,
            "name": "西城区",
            "code": "110102",
            "id": 6945
        },
        {
            "parentid": 6943,
            "name": "朝阳区",
            "code": "110105",
            "id": 6946
        },
        {
            "parentid": 6943,
            "name": "丰台区",
            "code": "110106",
            "id": 6947
        },
        {
            "parentid": 6943,
            "name": "石景山区",
            "code": "110107",
            "id": 6948
        },
        {
            "parentid": 6943,
            "name": "海淀区",
            "code": "110108",
            "id": 6949
        },
        {
            "parentid": 6943,
            "name": "门头沟区",
            "code": "110109",
            "id": 6950
        },
        {
            "parentid": 6943,
            "name": "房山区",
            "code": "110111",
            "id": 6951
        },
        {
            "parentid": 6943,
            "name": "通州区",
            "code": "110112",
            "id": 6952
        }];
   

修改asynTreeSelect.js源文件


/**
 @ Name:layui.asynTreeSelect 异步树形选择器     
 @ Author:楼顶的向日葵
 @ 版本1.0
 @ 2020年5月27日 
 */

layui.define(['form', 'element'], function (exports) {
    var $ = layui.$
        , form = layui.form
        , element = layui.element
        //字符常量
        , MOD_NAME = 'asynTreeSelect', ELEM = '.layui-asynTreeSelect'
        //外部接口
        , asynTreeSelect = {
            index: layui.asynTreeSelect ? (layui.asynTreeSelect.index + 10000) : 0
            //设置全局项
            , set: function (options) {
                var that = this;
                that.config = $.extend({}, that.config, options);
                return that;
            }

            //事件监听
            , on: function (events, callback) {
                return layui.onevent.call(this, MOD_NAME, events, callback);
            }
        }

        //操作当前实例
        , thisIns = function () {
            var that = this
                , options = that.config
                , id = options.id || options.index;

            return {
                reload: function (options) {
                    that.config.defaultValue = options.defaultValue;
                    $("#" + that.elementId).val(options.defaultValue);
                    $("#" + that.dataUlId + " li").remove();
                    $("#" + that.contentId).empty();
                    _getNextDatas(that, that.config.rootNodeValue, true);
                }
                , config: options
                , setValue: function (value) {

                }
            }
        }

        //构造器
        , Class = function (options) {
            var that = this;
            that.index = ++asynTreeSelect.index;
            that.config = $.extend({}, that.config, asynTreeSelect.config, options);
            var $elem = $(that.config.elem);
            var deVal = $elem.val();
            var jsDeval = that.config.defaultValue;
            if (jsDeval == null || jsDeval == undefined || jsDeval.toString().length == 0)
                that.config.defaultValue = deVal;
            var elementId = $elem.prop("id");
            //that.config.maxWidth=$elem.width()*2; 
            var tempTime = new Date().getTime();
            that.elementId = elementId
            that.outDivId = elementId + "_a" + tempTime;
            that.displayInputId = elementId + "_b" + tempTime;
            that.dataDivId = elementId + "_c" + tempTime;
            that.closeImgId = elementId + "_d" + tempTime;
            that.refreshImgId = elementId + "_e" + tempTime;
            that.dataTabLayFilter = elementId + "_f" + tempTime;
            that.dataUlId = elementId + "_g" + tempTime;
            that.contentId = elementId + "_h" + tempTime;
            that.render();
        };

    //默认配置
    Class.prototype.config = {
        paramName: "currNodeId" //
        , maxWidth: null
        , rootNodeValue: null
        , defaultValue: null
        , toolbar: false
        , showRootNode: true
        , separator: null
        , data: [] // 数据源
        , response: {
            idName: "ID"
            , valueName: "NAME"
            , parentName: "PARENT_ID"
        }
        , onlick: $.noop
        , beforeRequest: $.noop
        , parseData: $.noop
    };

    //渲染视图
    Class.prototype.render = function () {
        var that = this
            , options = that.config;
        options.elem = $(options.elem);
        var elemTmp = options.elem;

        var placeholder = elemTmp.attr("placeholde
在 Vue2 中,Ant Design 的 ATreeSelect树形选择器组件允许通过 `treeNodeFilterProp` 属性来进行节点过滤,该属性用于指定节点上哪个属性会被用来匹配用户输入的关键字进行搜索。当你需要根据 `title`(节点标题)值进行搜索时,你可以将 `treeNodeFilterProp` 的值设置为 `'title'`。 例如,在组件的配置中,你可能会这样设置: ```vue <atree-select :options="treeData" v-model="selectedValue" :tree-node-filter-prop="'title'" /> ``` 在这里,`treeData` 是包含节点数据的对象数组,`selectedValue` 是选中的节点值。当用户在 ATreeSelect 中输入内容,它会按 `title` 字段匹配显示节点。 如果你想要实现切换 title 值查询,可以在组件内部添加一个事件监听器,比如点击按钮时动态改变这个属性: ```vue <template> <div> <button @click="toggleTitleFilter">切换查询字段</button> <atree-select ref="select" ...></atree-select> </div> </template> <script> export default { data() { return { selectedValue: '', treeData: [], // 初始化你的树数据 treeNodeFilterProp: 'title', // 初始查询字段 }; }, methods: { toggleTitleFilter() { this.treeNodeFilterProp = this.treeNodeFilterProp === 'title' ? 'someOtherProperty' : 'title'; // 如果想保存当前状态,可以更新组件实例的状态 this.$refs.select.treeNodeFilterProp = this.treeNodeFilterProp; } } }; </script> ``` 当点击 "切换查询字段" 按钮,`treeNodeFilterProp` 就会在 `'title'` 和 `'someOtherProperty'` 之间切换。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值