Apicloud——关于索引列表
2024-06-04 23:12:56
2019-03-08 11:37:04
ApiCloud+mui完成索引列表例子
主用mui的索引列表，把他的静态数据换成了动态请求数据
效果：
有几个问题，整理一下：
1、请求来的数据无排序，先进行排序，找了一个写的非常好的demo
demo的详细内容
1 //排序
2 function chineseLetter(lists, dataLeven) {
3 var letter = 'abcdefghjklmnopqrstwxyz'.split('')
4 var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('')
5 /* 获取数组元素比较的值 */
6 function getValue(option) {
7 if (!dataLeven) return option
8 var data = option
9 dataLeven.split('.').filter(function(item) {
10 data = data[item]
11 })
12 return data + ''
13 }
14 /* 进行排序 */
15 lists.sort(function(item1, item2) {
16 return getValue(item1).localeCompare(getValue(item2), 'zh-Hans-CN')
17 })
18 /* 判断需要排序的字符串是否含有中文字符 */
19 if (/[\u4e00-\u9fff]/.test(getValue(lists[0])) && typeof lists[0] === 'object') pySegSort(0, 0)
20 /* 给省列表中添加首字符 */
21 function pySegSort(letterIndex, zhIndex) {
22 var first = true // 首次是否加 字母标识
23 for (var i = zhIndex; i < lists.length; i++) {
24 var item = lists[i]
25 // 是否有值 && 当前值大于等于本次字母的最小值 && (最后一位 || 当前值小于下次字母的最小值)
26 var state = zh[letterIndex] && getValue(item).localeCompare(zh[letterIndex], 'zh') >= 0 && (letterIndex === letter.length - 1 || getValue(item).localeCompare(zh[letterIndex + 1], 'zh') < 0)
27 if (state) { // 满足条件，同一个首字母下的：例如 A 下的所有省份
28 if (first) { //是否是第一次出现
29 item.letter = letter[letterIndex].toUpperCase()
30 first = false
31 } else {
32 item.letter = ''
33 }
34 } else { // 递归调用 函数，进行下次字母下的排列
35 letterIndex++
36 if (letterIndex < letter.length) {
37 pySegSort(letterIndex, i)
38 break
39 }
40 }
41 }
42 }
43 }
44 chineseLetter(lists, 'name')2、用了一个汉字转拼音的demo
3、mui的索引列表例子是用的静态数据，搜索有效，数据换成动态的时候，搜索就无效了
原因是：在数据加载完之前就已经初始化完成，所以无法查询
解决方法：
1 mui.init();//把此段代码放在加载数据函数的后面执行
2 mui.ready(function() {
3 var header = document.querySelector('header.mui-bar');
4 var list = document.getElementById('list');
5
6 list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
7 //此处再加一个延时
8 setTimeout(function(){
9 window.indexedList = new mui.IndexedList(list);
10 },1000)
11
12 });4、为列表添加点击事件并把数据广播出去
1 list_html += '<li data-group="' + lists[i].letter + '" class="mui-table-view-divider mui-indexed-list-group " name="' + lists[i].letter + '">' + lists[i].letter + '</li>' + 2 '<li data-tags="' + new_list + '" class="mui-table-view-cell mui-indexed-list-item nam" id="' + lists[i].id + '" οnclick="getpara(\'' + lists[i].id + '\',\'' + listname + '\')">' + listname + '</li>'
1 function getpara(ids, names) {
2 api.sendEvent({//执行点击事件，并把id和name广播出去
3 name: 'getpara',
4 extra: {
5 key1: ids,
6 key2: names
7 }
8 });
9
10 api.closeWin();
11
12
13 }完整代码：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
7 <title>APICloud APP</title>
8 <link rel="stylesheet" type="text/css" href="../css/api.css" />
9 <!-- <link rel="stylesheet" type="text/css" href="../css/style.css" /> -->
10 <link href="../css/mui.min.css" rel="stylesheet" />
11 <link href="../css/mui.indexedlist.css" rel="stylesheet" />
12 <style>
13 html,
14 body {
15 height: 100%;
16 overflow: hidden;
17 }
18
19 .mui-bar {
20 -webkit-box-shadow: none;
21 box-shadow: none;
22 height: 80px;
23 background-color: #F3544E;
24 }
25
26 .mui-bar-nav~.mui-content {
27 padding-top: 80px;
28 }
29
30 .buy_car_arrowl {
31 width: 13px;
32 height: 20px;
33 background-size: cover;
34 color: #fff;
35 background-image: url('../image/service/back.png');
36 }
37
38 .mui-search .mui-placeholder {
39 line-height: 40px;
40 }
41 </style>
42 </head>
43
44 <body>
45
46 <header class="mui-bar mui-bar-nav">
47 <div style="width:100%;height:60px;display:flex;justify-content:space-around;align-items:flex-end;">
48 <div class="buy_car_arrowl" οnclick="closeWin()"></div>
49 <div style="height:100%;width:65%;display:flex;align-items:flex-end;justify-content:center;color:white;">城市列表</div>
50 <div></div>
51 </div>
52 </header>
53 <div class="mui-content">
54 <div id='list' class="mui-indexed-list">
55 <div class="mui-indexed-list-search mui-input-row mui-search" style="background-color:#f2f2f2;padding:3px 8px 3px 8px;">
56 <input style="background-color:white;border-radius:5px;" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="输入城市名查询">
57 </div>
58 <div class="mui-indexed-list-bar">
59 <a>A</a>
60 <a>B</a>
61 <a>C</a>
62 <a>D</a>
63 <a>E</a>
64 <a>F</a>
65 <a>G</a>
66 <a>H</a>
67 <a>I</a>
68 <a>J</a>
69 <a>K</a>
70 <a>L</a>
71 <a>M</a>
72 <a>N</a>
73 <a>O</a>
74 <a>P</a>
75 <a>Q</a>
76 <a>R</a>
77 <a>S</a>
78 <a>T</a>
79 <a>U</a>
80 <a>V</a>
81 <a>W</a>
82 <a>X</a>
83 <a>Y</a>
84 <a>Z</a>
85 </div>
86 <div class="mui-indexed-list-alert"></div>
87 <div class="mui-indexed-list-inner">
88 <div class="mui-indexed-list-empty-alert">没有数据</div>
89 <ul class="mui-table-view" id="listul">
90
91 </ul>
92 </div>
93 </div>
94 </div>
95 <script src="../script/jquery.min.js"></script>
96 <script src="../script/mui.min.js"></script>
97 <script src="../script/mui.indexedlist.js"></script>
98 <script type="text/javascript" src="../script/tiqu.js"></script>
99 <script type="text/javascript" src="../script/zhuanpinyin.js"></script>
100 <script type="text/javascript" src="../script/api.js"></script>
101 <script type="text/javascript" charset="utf-8">
102 apiready = function() {
103 getcity();
104 }
105
106 //获取城市
107 function getcity() {
108
109 //ajax
110 api.ajax({
111 url: url,
112 method: 'post',
113 data: {
114
115 }
116 }, function(ret, err) {
117 if (ret) {
118 //加载动画
119 api.showProgress({
120 title: '加载中...',
121 text: ''
122 });
123
124 var list_html = '';
125 var lists = ret.data.city;
126 // console.log(JSON.stringify(lists));
127
128 //排序
129 function chineseLetter(lists, dataLeven) {
130 var letter = 'abcdefghjklmnopqrstwxyz'.split('')
131 var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('')
132 /* 获取数组元素比较的值 */
133 function getValue(option) {
134 if (!dataLeven) return option
135 var data = option
136 dataLeven.split('.').filter(function(item) {
137 data = data[item]
138 })
139 return data + ''
140 }
141 /* 进行排序 */
142 lists.sort(function(item1, item2) {
143 return getValue(item1).localeCompare(getValue(item2), 'zh-Hans-CN')
144 })
145 /* 判断需要排序的字符串是否含有中文字符 */
146 if (/[\u4e00-\u9fff]/.test(getValue(lists[0])) && typeof lists[0] === 'object') pySegSort(0, 0)
147 /* 给省列表中添加首字符 */
148 function pySegSort(letterIndex, zhIndex) {
149 var first = true // 首次是否加 字母标识
150 for (var i = zhIndex; i < lists.length; i++) {
151 var item = lists[i]
152 // 是否有值 && 当前值大于等于本次字母的最小值 && (最后一位 || 当前值小于下次字母的最小值)
153 var state = zh[letterIndex] && getValue(item).localeCompare(zh[letterIndex], 'zh') >= 0 && (letterIndex === letter.length - 1 || getValue(item).localeCompare(zh[letterIndex + 1], 'zh') < 0)
154 if (state) { // 满足条件，同一个首字母下的：例如 A 下的所有省份
155 if (first) { //是否是第一次出现
156 item.letter = letter[letterIndex].toUpperCase()
157 first = false
158 } else {
159 item.letter = ''
160 }
161 } else { // 递归调用 函数，进行下次字母下的排列
162 letterIndex++
163 if (letterIndex < letter.length) {
164 pySegSort(letterIndex, i)
165 break
166 }
167 }
168 }
169 }
170 }
171 chineseLetter(lists, 'name')
172 // console.log(JSON.stringify(lists));
173
174 for (var i = 0; i < lists.length; i++) {
175 var listname = lists[i].name;
176 //转拼音
177 var new_list = ConvertPinyin(listname);
178
179 list_html += '<li data-group="' + lists[i].letter + '" class="mui-table-view-divider mui-indexed-list-group " name="' + lists[i].letter + '">' + lists[i].letter + '</li>' +
180 '<li data-tags="' + new_list + '" class="mui-table-view-cell mui-indexed-list-item nam" id="' + lists[i].id + '" οnclick="getpara(\'' + lists[i].id + '\',\'' + listname + '\')">' + listname + '</li>'
181
182 }
183 $('#listul').append(list_html);
184 $('li[name=""]').css('display', 'none')
185 // console.log(list_html);
186 //加载结束
187 api.hideProgress();
188 } else {
189 alert(JSON.stringify(err));
190 }
191 });
192
193 }
194
195 mui.init();
196 mui.ready(function() {
197 var header = document.querySelector('header.mui-bar');
198 var list = document.getElementById('list');
199 //calc hieght
200 list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
201 //create
202 setTimeout(function() {
203 window.indexedList = new mui.IndexedList(list);
204 }, 1000)
205
206 });
207
208 //添加点击事件
209 // mui('body').on('tap','.nam',function(){210 // alert($(this).val())
211 // })
212 function getpara(ids, names) {
213 api.sendEvent({
214 name: 'getpara',
215 extra: {
216 key1: ids,
217 key2: names
218 }
219 });
220
221 api.closeWin();
222
223
224 }
225
226 //关闭
227 function closeWin() {
228 api.closeWin({});
229 }
230 </script>
231 </body>
232
233 </html>View Code
转载于:https://www.cnblogs.com/jry199506/p/10494943.html
Apicloud——关于索引列表相关推荐
- pandas使用np.where函数计算返回dataframe中指定数据列包含缺失值的行索引列表list
pandas使用np.where函数计算返回dataframe中指定数据列包含缺失值的行索引列表list(index of rows with missing values in dataframe ...
- pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行（drop multiple rows in dataframe with integer index）
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行(drop multiple rows in dataframe with integer index) 目录
- pandas使用query函数基于判断条件获得dataframe中满足条件的数据行(row)的索引列表（index of rows matching conditions in dataframe）
pandas使用query函数基于判断条件获得dataframe中满足条件的数据行(row)的索引列表(index of rows matching conditions in dataframe) ...
- pandas使用dropna函数计算返回dataframe中不包含缺失值的行索引列表list（index of rows without missing values in dataframe）
pandas使用dropna函数计算返回dataframe中不包含缺失值的行索引列表list(index of rows without missing values in dataframe) 目录
- uniapp：索引列表
uniapp:索引列表 一.简单:uniapp:索引列表 解释: 1.效果:通过点击右侧字母索引导航栏,滚动到对应区域. 2.实现思路:使用uni-app原生scroll-view组件的scroll- ...
- 仿微信联系人索引列表ListView
IM 模块中经常用到 字母索引 ListView 来做通讯录 或者称联系人列表, 今天跟大家分享一个仿微信联系人索引列表, 优点是轻量级,简单易懂. 不要任何依赖 , jar包等 效果预览 工程结构 ...
- uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
- 自定义mui的索引列表indexedList（可用作通讯录）详细用法
mui的索引列表用来展示通讯录或者列表信息还是不错的 首先,下载mui插件,下载地址: https://download.csdn.net/download/lianzhang861/10446598 ...
- VUE+MintUI的索引列表实现“卖座网”同款城市列表
卖座网:https://m.maizuo.com/v5/#/city(F12拿城市列表JSON) MintUI索引列表:https://elemefe.github.io/mint-ui/#/inde ...
最新文章
- CVS/SVN 托管服务
- burst tx 功能 开启_Serverspeeder 锐速config配置文件详解
- 从WINDOWS日志判断哪块硬盘好坏！！
- java拼图游戏Mian_Java拼图游戏源码 MainApp启动器 main(): 创建主界面类对 联合开发网 - pudn.com...
- python 组合优化 回撤最小_【策略回测】多因子搭配组合优化（内附bonus）
- 服务器p盘cpu占用率低,硬盘问题导致的CPU占用率100%解决实例
- java-时间间隔类period类和Duration类
- linux没法上网,LINUX没法上网?
- 网站搭建：从零搭建个人网站教程（1）
- python读书心得体会范文_读书心得体会范文6篇
- 戏精，程序员的桌面画风竟然是酱紫的！
- 2022年全球市场柠檬酸酯总体规模、主要生产商、主要地区、产品和应用细分研究报告
- 关于STL中vector容器的一些总结
- 加载java ie停止工作_IE报错“Internet Explorer 已停止工作”解决方案
- Css3中hover伪类的用法
- 使用js 计算两个日期之间的相差的天数
- HoloLens2之路－配置文件（一）
- 快速搭建迅搜搜索引擎步骤
- Thinkpad X200 屏幕备案
- HTML爱心动画小玩意儿
热门文章
- Visual studio之C# 利用Settings保存COM口配置信息
- kvm最小磁盘大于等于5G
- PAT：1032. Sharing (25) AC
- Flutter通过BasicMessageChannel实现Flutter 与Android iOS 的双向通信
- JavaScript设计模式返璞归真
- Mr.J-- HTTP学习笔记（五）-- Web服务器
- ORA-12519: TNS:no appropriate service handler found 解决方法
- 用node-webkit把web应用打包成桌面应用
- BZOJ5343 [Ctsc2018]混合果汁 【二分 + 主席树】
- 1 利用Anaconda完美解决Python 2与python 3的共存问题