我的js无限级下拉列表级联插件

来源：互联网发布：编程技术编辑：程序博客网时间：2024/04/30 02:19

我的js无限级下拉列表级联插件

插件介绍

js独立插件，无限级下拉列表实现，提供数据缓存，不依赖jq。
使用简单，自定义列表渲染方式，自定义数据获取方法。

效果展示

这里写图片描述

使用说明

提供了对来自服务器的数据进行缓存。
缓存数据格式采用简单缓存实现，将所有数据添加入一个数组，数据的上下级关系通过【id】，【parentId】指定。

使用步骤及说明 :

    //提供的列表数据格式：    var selecData = {           /**         * 列表数据的id(必选)         * 顶级数据的id默认为"root",可自行指定         */        "id":"",        /**         * 列表数据的父级id(必选)         */        "parentId":"",        /**         * 指定列表的层级(初始化数据时需要)         * 顶级数据root为:-1         * 一级列表数据为:0         */        "selectLevel":-1,        /**         * 其他自己定义的列表数据字段         */             "xxx":""    }

引入该插件<script src="js/SelectCascade.js" type="text/javascript" charset="utf-8"></script>

初始化配置

    /**     * 列表级联构造函数     *      * @constructor     * @param {Array} selectConfigArr 关联的列表配置参数,第一项为第一级列表的配置,依次类推     * @param {Object} options 操作参数     */    var selectCascade = new SelectCascade([{        /**         * 当前列表获取数据的函数         * 插件在调用该方法时,会传入(parentId, callback)这两个参数         * @param {String} parentId 取得该列表数据的parentId         * @param {Function} callback 获取到该级列表数据之后的回调,用户手动调用         */        getSelectData: function(parentId, callback) {            //获取数据的方式自行实现            setTimeout(function() {                var data = searchFirstDataFromServer();                callback(data);//获取到数据时传入插件            }, 500)        },        /**         * 当前列表渲染函数         * 插件在调用该方法时,会传入参数(selectData, selecVal, next)         * @param {Array} selectData 该列表的数据,从服务器或从缓存获取的数据         * @param {String} selecVal 该列表选中的值         * @param {Function} next 加载下一级的函数,由用户手动调用,在列表初始化时,此项为null         */        renderSelect: function(selectData, selecVal, next) {            //列表html格式自行实现            /*  var html = "";                html += "<option value=''>请选择</option>";                if(selectData && selectData.length) {                    for(var i = 0; i < selectData.length; i++) {                        var obj = selectData[i];                        html += "<option value='" + obj.id + "'>" + obj.id + "</option>";                    }                }                $("#select1").html(html).val(selecVal);            */            next && next(); //渲染下一级列表            /**             * 可以临时指定下级列表的父级id             */            //next && next(selecVal); //渲染下一级列表        }    }],{        /**         * 指定第一级列表的父级id,默认为"root"         */        ROOT:"root",        /**         * 每次列表加载完成时执行(可选)         */        renderEnd: function() {        },        /**         * 每次列表开始加载时执行(可选)         */        renderStart: function() {        }    });

设置各级列表的触发方式

    /**     * 加载级联的列表     *      * @param {Object} currentDefaultOptions 本次列表加载的配置     * @param {Array} currentDefaultOptions.defaultSelectIdArr 本次列表加载的父级id链,如果为空则从第一级列表开始渲染     * @param {Function} currentDefaultOptions.renderStart 本次列表加载开始时的回调     * @param {Function} currentDefaultOptions.renderEnd 本次列表加载完成时的回调     */    selectCascade.renderSelectCascade({        /**         * 本次列表加载的父级id链,如果为空则从第一级列表开始渲染         */        defaultSelectIdArr: ["root"],        /**         * 在列表开始加载的父级id为空时,无法唯一确定父级id时,指定开始渲染的父层级,         * 对应defaultSelectIdArr[0]的层级,一般无需指定,         */        startLevel: -1,        /**         * 本次列表开始加载时执行         */        renderStart: function() {        },        /**         * 本次列表加载完成时执行         */        renderEnd: function() {        }    });    //每级列表的触发事件    $("#select1").on('change', function() {        var val = $(this).val();        //渲染当前数据的下级列表        selectCascade.renderSelectCascade({            //默认选中的各级列表值,选中下级列表第一个            defaultSelectIdArr: [val]//从渲染下一级,            startLevel: 0        });    })

可以初始化一部分数据

    /**     * 事先添加列表数据到缓存,列表数据需提供[selectLevel]字段     * @param {Array} dataArr 数据格式[{     *  id: "0012",     *  parentId: "001",     *  val: "001",     *  selectLevel: 0//指明该列表数据的层级     * }]     */    selectCascade.addSelectDataToCache([{        "id": "1",        "parentId": "root",        "val": "1",        "selectLevel": 0//指定的层级,第一级为0    }, {        "id": "2",        "parentId": "root",        "val": "2",        "selectLevel": 0    }, {        "id": "3",        "parentId": "root",        "val": "3",        "selectLevel": 0    }]);

其他API

    /**     * 通过parentId刷新直接子级列表数据     * @param {String} parentId     * @param {Array} newDataArr     */    selectCascade.refreshCacheByParentId("root",[{        "id": "4",        "parentId": "root",        "val": "4",        "selectLevel": 0//指定的层级,第一级为0    }, {        "id": "5",        "parentId": "root",        "val": "5",        "selectLevel": 0    }, {        "id": "6",        "parentId": "root",        "val": "6",        "selectLevel": 0    }]);    /**     * 通过id从缓存中查询列表数据     * @param {String} id     * @return {Object} data     */    var data = selectCascade.obtainCacheDataById("4");    /**     * 通过parentId从缓存中查询列表数据     * @param {String} parentId     * @return {Array} dataArray     */    var childs = selectCascade.findCacheDataByParentId("root");    /**     * 通过id从缓存中查询同级列表数据     * @param {String} id     * @return {Array} dataArray     */    var siblings = selectCascade.findCurrentSelectDataById("4");

下载地址

github仓库
码云仓库

阅读全文

0 0