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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值