javascript 常用方法 解析URL,补充前导字符, 省市联动, 循环替换模板

2018-11-7 20:41:20 星期三

 1. 解析URL

 1         function parseUrl(url)
 2         {
 3             url = decodeURIComponent(url);
 4             var u = url.split('?');
 5 
 6             var args = {};
 7             args['uri'] = u[0];
 8 
 9             if (u.length === 2) {
10                 var items = u[1].split("&");
11                 var item = null, name = null, value = null;
12                 for(var i=0; i < items.length; i++){
13                     item = items[i].split("=");
14                     if(item[0]){
15                         name = item[0];
16                         value = item[1] ? item[1] : "";
17                         args[name] = value;
18                     }
19                 }
20             }
21 
22             return args;
23         }

 

2019-4-25 10:44:30 星期四

2. 补充前导字符

 1 //给字符串str补上多个前导字符pad, 最终使str总长为length
 2 function strPad(str, pad, length)
 3 {
 4     var padn = length - str.length;
 5     var pads = '';
 6 
 7     for (i =0; i < padn ; i++) {
 8         pads += pad;
 9     }
10 
11     return pads + str;
12 }

 

2019-5-13 14:25:53 星期一

3. 构建URL

 1 function buildUrl(prefix, obj)
 2 {
 3     let param = parseUrl(prefix);
 4     delete param.uri;
 5 
 6     for (let i in obj) {
 7         param[i] = obj[i]; //去掉重复的键, 用obj中的覆盖prefix中的
 8     }
 9 
10     let arr = [];
11     for (let j in param) {
12         arr.push(j + '=' + param[j]);
13     }
14 
15     let str = arr.join('&');
16 
17     if (prefix.indexOf('?') !== -1) {
18         let u =prefix.split('?');
19         return u[0] + '?' + str;
20     } else {
21         return prefix + '?' + str;
22     }
23 }
View Code 

 

2019-5-21 19:35:24 星期二

4. 国省市县联动

  1 var countryLength = 3; //国家编号的长度
  2 var provinceLength = 2; //省编号的长度
  3 var cityLength = 2; //城市编号的长度
  4 var areaLength = 2; //县区编号的长度
  5 var _countryList = ''; //国家: {001000000:"中国", ...}
  6 var _provinceList = ''; //省/州: {001010000:"河南省", ...}
  7 var _cityList = ''; //城市: {001010100:"南阳市", ...}
  8 var _areaList = ''; //县区: {001010101:"赊店", ...}
  9 
 10 var _blankOption = '<option label="" value=""></option>';
 11 var _tplOption = '<option label="{label}" value="{value}">{text}</option>';
 12 
 13 $.ajax({
 14     type :"get",
 15     url :'getCountryProvinceCity',
 16     dataType: 'json',
 17     async :false,
 18     success :function(data){
 19         _countryList = data.country_list;
 20         _provinceList = data.province_list;
 21         _cityList = data.city_list;
 22         _areaList = data.area_list;
 23     }
 24 });
 25 
 26 clearProvince('country', 'province', 'city', 'area'); //清除掉下拉列表中不关联的省市县
 27 
 28 //cpc: country province city
 29 //国家变动事件
 30 function cpcChangeCountry(countryId, provinceId) {
 31     var country = $("#"+countryId).val(); //新选择的国家
 32     var provinceDom = $("#"+provinceId);
 33     
 34     var provinceHtml = _blankOption;
 35     var tmp='';
 36     for (code in _provinceList) {
 37         var prefix1 = strPad(country, '0', countryLength);
 38         var prefix2 = code.substring(0, countryLength);
 39 
 40         if (prefix1 === prefix2) {
 41             tmp = _tplOption;
 42             tmp = tmp.replace('{label}', _provinceList[code]);
 43             tmp = tmp.replace('{value}', code);
 44             tmp = tmp.replace('{text}', _provinceList[code]);
 45             provinceHtml += tmp;
 46         }
 47     }
 48 
 49     provinceDom.html(provinceHtml);
 50 }
 51 
 52 //省份变动事件
 53 function cpcChangeProvince(provinceId, cityId) {
 54     var province = $("#"+provinceId).val(); //新选择的省份
 55     var cityDom = $("#"+cityId);
 56 
 57     var len = countryLength+provinceLength;
 58     var provincePrefix = province.substring(0, len);
 59 
 60     var cityHtml = _blankOption;
 61     var tmp = '';
 62     for (code in _cityList) {
 63         var cityPrefix = code.substring(0, len);
 64         if (provincePrefix === cityPrefix) {
 65             tmp = _tplOption;
 66             tmp = tmp.replace('{label}', _cityList[code]);
 67             tmp = tmp.replace('{value}', code);
 68             tmp = tmp.replace('{text}', _cityList[code]);
 69             cityHtml += tmp;
 70         }
 71     }
 72 
 73     cityDom.html(cityHtml);
 74 }
 75 
 76 //城市变动事件
 77 function cpcChangeCity(cityId, areaId) {
 78 
 79     var city = $("#"+cityId).val(); //选择的城市
 80     var areaDom = $("#"+areaId);
 81 
 82     var len = countryLength+provinceLength+cityLength;
 83     var cityPrefix = city.substring(0, len);
 84     
 85     var areaHtml = _blankOption; //默认值
 86     var tmp = '';
 87     for (code in _areaList) {
 88         var areaPrefix = code.substring(0, len);
 89         if (cityPrefix === areaPrefix) {
 90             tmp = _tplOption;
 91             tmp = tmp.replace('{label}', _areaList[code]);
 92             tmp = tmp.replace('{value}', code);
 93             tmp = tmp.replace('{text}', _areaList[code]);
 94             areaHtml += tmp;
 95         }
 96     }
 97 
 98     areaDom.html(areaHtml);
 99 }
100 
101 //给字符串str补上前导字符pad, 最终使str总长为length
102 function strPad(str, pad, length)
103 {
104     var padn = length - str.length;
105     var pads = '';
106 
107     for (i =0; i < padn ; i++) {
108         pads += pad;
109     }
110 
111     return pads + str;
112 }
113 
114 //刚进入编辑页面时, 去掉省份,城市中与当前国家无关的选项
115 function clearProvince(countryId, provinceId, cityId, areaId) {
116     var country = $("#"+countryId).val(); //当前选择的国家
117     var provinceDom = $("#"+provinceId);
118     var cityDom = $("#"+cityId);
119     var areaDom = $("#"+areaId);
120     var province = provinceDom.val();
121     var city = cityDom.val();
122 
123 
124     if (country) {
125         //删除省份中不属于国家的
126         for (code in _provinceList) {
127             let prefix1 = strPad(country, '0', countryLength);
128             let prefix2 = code.substring(0, countryLength);
129 
130             if (code.length> 0 && prefix1 !== prefix2) {
131                 provinceDom.find("option[value='"+code+"']").remove();
132             }
133         }
134 
135         //删除城市中不属于省份的
136         for (code in _cityList) {
137             let prefix1 = province.substring(0, countryLength+provinceLength);
138             let prefix2 = code.substring(0, countryLength+provinceLength);
139 
140             if (code.length> 0 && prefix1 !== prefix2) {
141                 cityDom.find("option[value='"+code+"']").remove();
142             }
143         }
144 
145         //删除区县中不属于城市的
146         for (code in _areaList) {
147             let prefix1 = city.substring(0, countryLength+provinceLength+cityLength);
148             let prefix2 = code.substring(0, countryLength+provinceLength+cityLength);
149         
150             if (code.length> 0 && prefix1 !== prefix2) {
151                 areaDom.find("option[value='"+code+"']").remove();
152             }
153         }
154     }
155 }
View Code

 

2019-6-5 9:26:52 星期三

5. 循环生成模板 

 1 function repeatHTML (tplDom, arr, func=null) {
 2     if (tplDom.length === 0) {
 3         console.log('repeatHTML:: tplDom empty');
 4         return '';
 5     }
 6 
 7     if (!(arr instanceof Array) || arr.length === 0) {
 8         console.log('repeatHTML:: arr empty');
 9         return '';
10     }
11 
12     let tpl = tplDom;
13     let out = '';
14     for (let i=0; i<arr.length; i++) {
15         arr[i]['_idx'] = i+1;
16         if (typeof func === 'function') {
17             arr[i] = func(arr[i]);
18         }
19         let map = arr[i];
20         let tmp = tpl;
21         for (let j in map) {
22             let re = new RegExp('{' + j + '}', 'g');
23             tmp = tmp.replace(re, map[j]);
24         }
25 
26         out += tmp;
27     }
28     return out;
29 }
30 
31 function repeatInnerHTML (selector, arr, func=null) {
32     let tplDom = document.querySelector(selector);
33     if (!tplDom) {
34         error('未找到: '+selector);
35         return;
36     }
37 
38     tplDom.innerHTML = repeatHTML(tplDom.innerHTML, arr, func);
39 }
View Code

 

6. 选中select标签中的option

id: select标签的id, values: array, option的value属性数值

 1 function changeSelectedOption(domId, value) {
 2     let select = document.getElementById(domId);
 3     if (value === '') {
 4         for (let i=0; i<select.options.length; i++) {
 5             select.options[i].selected = false;
 6         }
 7     } else {
 8         for (let i=0; i<select.options.length; i++) {
 9             select.options[i].selected = (select.options[i].value === value);
10         }
11     }
12 }
13 
14 function markSelected(id, values) {
15     let arr = document.getElementById(id).getElementsByTagName('option');
16 
17     for (let i=0; i<arr.length; i++) {
18         let val = arr[i].getAttribute('value');
19         if (values.indexOf(val) > -1) {
20             arr[i].setAttribute('selected', 'selected');
21         } else {
22             arr[i].removeAttribute('selected');
23         }
24     }
25 }
View Code

 

7. 动态生成 select 标签

 1 // name:select标签的名字和id, 
 2 // dataList: 数组, 渲染option [{name:xx, value:yy}]
 3 // defaultValue, 数组, 默认选中的值
 4 // isMulity, 是否可多选
 5 function buildHtmlSelect(name, dataList, defaultValue=[],isMulity=false) {
 6     let tpl = '<option value="{value}" {select}>{name}</option>';
 7     let func = function(obj) {
 8         obj['select'] = (defaultValue.indexOf(obj['value']) !== -1) ? 'selected' : '';
 9         return obj;
10     }
11 
12     let options = repeatHTML(tpl, dataList, func);
13 
14     if (isMulity) {
15         return '<select multiple="true" id="'+name+'" name="'+name+'[]"> '+options+' </select>';
16     } else {
17         return '<select id="'+name+'" name="'+name+'"> '+options+' </select>';
18     }
19 }
View Code

 

posted @ 2018-11-07 20:45  myD  阅读(296)  评论(0)  编辑  收藏  举报