【MUI】动态索引列表实现【搜索有效的方法】

来源:互联网 发布:西电软件学院 编辑:程序博客网 时间:2024/06/16 02:13
搜索无效的原因是因为 索引列表的js实现早于我们的ajax的方法。没有把数据加到索引列表的js ,导致索引列表源码js读不到后来的数据,所以不能搜索,【不知道我这么说大家能不能听懂。因为我看到有人问这个 才来说一下 笨方法,希望大家不喷我就好】
接下来步入正题,大家打开mui.indexedlist.js这个源码js,我们只需要把我们的ajax添加数据加入到源码js初始化之前,(让js在初始化的时候加载到数据即可)。

把我下面的数据复制到mui.indexedlist.js源码里面,找准位置,我首尾都多给了源码,大家应该可以找准位置,复制进去之后,就可以了。很简单,看了之后都能懂。

var IndexedList = $.IndexedList = $.Class.extend({        /**         * 通过 element 和 options 构造 IndexedList 实例         **/        init: function(holder, options) {            var self = this;            mui.ajax('', {//这个是数据导入的ajax  填入url  即可                    data: {},                    dataType: 'json', //服务器返回json格式数据                    type: 'post', //HTTP请求类型                    timeout: 10000, //超时时间设置为10秒;                    success: function(data) {                        var table = document.body.querySelector('.mui-table-view');                        for (var i = 0; i < data.length; i++) {                            //插入数据                        }                        self.init1(holder, options);                    },                    error: function(xhr, type, errorThrown) {                        console.log(type);                    }                });        },        init1: function(holder, options) {            var self = this;            self.options = options || {};            self.box = holder;            if (!self.box) {                throw "实例 IndexedList 时需要指定 element";            }            self.createDom();            self.findElements();            self.caleLayout();            self.bindEvent();        },               createDom: function() {            var self = this;            self.el = self.el || {};            //styleForSearch 用于搜索,此方式能在数据较多时获取很好的性能            self.el.styleForSearch = document.createElement('style');            (document.head || document.body).appendChild(self.el.styleForSearch);        },


1 0