mobile-select - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

mobile-select.js

@@ -36,2 +36,3 @@ /*!
 			var _this = this; 
+			_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
 			_this.checkDataType();
@@ -194,3 +195,3 @@ _this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
 					//行
-						tempHTML += '<li data-id="'+wheelsData[i].data[j].id+'">'+wheelsData[i].data[j].value+'</li>';
+						tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
 					}
@@ -269,3 +270,3 @@ }else{
 				for(var i=0; i<node.length; i++){
-					if('childs' in node[i] && node[i].childs.length > 0){
+					if(_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0){
 						_this.cascade = true;
@@ -283,7 +284,9 @@ _this.cascadeJsonData = _this.wheelsData[0].data;
 			var tempArr = [];
+			var keyMap_id = this.keyMap.id;
+			var keyMap_value = this.keyMap.value;
 			for(var i=0; i<targetArr.length; i++){
-				tempArr.push({
-					"id": targetArr[i].id,
-					"value": targetArr[i].value
-				});	
+				var tempObj = {}; 
+				tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
+				tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
+				tempArr.push(tempObj);	
 			}
@@ -296,3 +299,3 @@ return tempArr;
 			_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
-			if(_this.initPosition){
+			if(_this.initPosition.length>0){
 				_this.initDeepCount = 0;
@@ -309,10 +312,10 @@ _this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);
 			if(parent){
-				if ('childs' in parent && parent.childs.length > 0) {
-					_this.displayJson.push(_this.generateArrData(parent.childs)); 
+				if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
+					_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); 
 					_this.initDeepCount++;
-					var nextNode = parent.childs[_this.initPosition[_this.initDeepCount]];
+					var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
 					if(nextNode){
 						_this.initCheckArrDeep(nextNode);
 					}else{
-						_this.checkArrDeep(parent.childs[0]);
+						_this.checkArrDeep(parent[_this.keyMap.childs][0]);
 					}
@@ -327,5 +330,5 @@ }
 			if(parent){
-				if ('childs' in parent && parent.childs.length > 0) {
-					_this.displayJson.push(_this.generateArrData(parent.childs)); //生成子节点数组
-					_this.checkArrDeep(parent.childs[0]);//检测下一个子节点
+				if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
+					_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); //生成子节点数组
+					_this.checkArrDeep(parent[_this.keyMap.childs][0]);//检测下一个子节点
 				}
@@ -346,3 +349,3 @@ }
 				else {
-					resultNode = resultNode.childs[posIndexArr[i]];
+					resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
 				}
@@ -395,3 +398,3 @@ }
 						//行
-							tempHTML += '<li data-id="'+_this.displayJson[i][j].id+'">'+_this.displayJson[i][j].value+'</li>';
+							tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
 						}
@@ -406,3 +409,3 @@ _this.slider[i].innerHTML = tempHTML;
 						//行
-							tempHTML += '<li data-id="'+_this.displayJson[i][j].id+'">'+_this.displayJson[i][j].value+'</li>';
+							tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
 						}
@@ -446,3 +449,3 @@ tempHTML += '</ul>';
 				for(var j=0; j<data.length; j++){
-					tempHTML += '<li data-id="'+data[j].id+'">'+data[j].value+'</li>';
+					tempHTML += '<li data-id="'+data[j][_this.keyMap.id]+'">'+data[j][_this.keyMap.value]+'</li>';
 				}
@@ -449,0 +452,0 @@ _this.wheelsData[sliderIndex] = {data: data};

package.json

 {
   "name": "mobile-select",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A multi-function mobile phone scrolling selector, support single to multi-select, support multi-level cascade, provide custom callback function, provide update function redraw, relocation function, compatible pc drag and so on.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -16,3 +16,3 @@ <p align="center"><img width="130" src="https://github.com/onlyhom/img-folder/blob/master/png/m_logo_orange.png?raw=true"></p>
 
-[【中文文档】](https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md)
+[【查看中文文档】](https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md)
 
@@ -44,3 +44,11 @@ ## Features
 
+#### Method1 tag import：
+```html
+<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
+<script src="js/mobileSelect.js" type="text/javascript"></script>
 ```
+
+#### Method2 npm install：
+
+```
 npm install mobile-select -D
@@ -54,2 +62,3 @@ ```
 
+
 ## Getting Started
@@ -61,3 +70,3 @@
 ```html
-<div id="day"></div>
+<div id="day"></div><!--Don't forget this trigger in your page-->
 
@@ -115,6 +124,6 @@ <script type="text/javascript">
 ```html
-<div id="area2"></div> <!--Don't forget this trigger in your page-->
+<div id="area2"></div>
 
 <script type="text/javascript">
-  var addressLocation = new MobileSelect({
+  var mobileSelect3 = new MobileSelect({
       trigger: '#area2',
@@ -153,3 +162,187 @@ title: '地区选择-联动',
 
+#### ④ajax asynchronous fill data
 
+```html
+
+<!-- ************ Non-cascade Format ************ -->
+
+<div id="trigger4"></div>
+
+<script type="text/javascript">
+    var mobileSelect4 = new MobileSelect({
+        trigger: '#trigger4',
+        title: 'ajax fill data - non-cascade',
+        wheels: [
+                    {data:[
+                        {id:'1',value:'choose area'},
+                    ]},
+                    {data:[
+                        {id:'1',value:'choose distance'},
+                    ]}
+                ],        
+        callback:function(indexArr, data){
+            console.log(data);
+        }
+    });
+
+    $.ajax({
+        type: "POST",
+        url: "xxxx",
+        data: {},
+        dataType: "json",
+        success: function(res){
+            //Assume that the obtained res.data.area is：
+            // [
+            //     {id:'1',value:'area1'},
+            //     {id:'2',value:'area2'},
+            //     {id:'3',value:'area3'},
+            //     {id:'4',value:'area4'}
+            // ]
+
+            //Assume that the obtained res.data.distance is：
+            // [
+            //     {id:'1',value:'200 metres'},
+            //     {id:'2',value:'300 metres'},
+            //     {id:'3',value:'400 metres'}
+            // ]
+ 
+            mobileSelect4.updateWheel(0, res.data.area); //Update the 0th wheel
+            mobileSelect4.updateWheel(1, res.data.distance); //Update the 1th wheel
+        }
+    });
+</script>
+</script>
+
+
+
+
+<!-- ************ Cascade Format ************ -->
+
+<div id="trigger4"></div>
+
+<script type="text/javascript">
+    var mobileSelect4 = new MobileSelect({
+        trigger: '#trigger4',
+        title: 'ajax fill data - cascade',
+        wheels: [
+                    {data:[
+                        {
+                            id:'1',
+                            value:'',
+                            childs:[
+                                {id:'A1',value:''},
+                            ]
+                        }
+                    ]}
+                ],        
+        callback:function(indexArr, data){
+            console.log(data);
+        }
+    });
+
+    $.ajax({
+        type: "POST",
+        url: "xxxx",
+        data: {},
+        dataType: "json",
+        success: function(res){
+            //Assume that the obtained res.data is：
+            // [{
+            //     id:'1',
+            //     value:'after update',
+            //     childs:[
+            //         {id:'A1',value:'apple'},
+            //         {id:'A2',value:'banana'},
+            //         {id:'A3',value:'orange'}
+            //     ]
+            // }]
+            mobileSelect4.updateWheels(res.data);
+        }
+    });
+</script>
+```
+
+#### ⑤How to use in vue-cli   
+
+```
+npm install mobile-select -D
+```
+
+```html
+<template>
+    <div>
+        <div id="trigger5">vue-cli-demo</div>
+    </div>
+</template>
+
+<script>
+    import MobileSelect from 'mobile-select'
+
+    export default {
+        mounted() {
+            var mobileSelect5 = new MobileSelect({
+                trigger: "#trigger5",
+                title: "vue-cli-demo",
+                wheels: [
+                    {data: ["周日","周一","周二","周三","周四","周五","周六"]}
+                ],
+                callback:function(indexArr, data){
+                    console.log(data);
+                }
+            });
+        }
+    }
+</script>
+```
+
+
+#### ⑥Json format - Data field mapping    
+```html
+<div id="trigger6"></div>
+
+<script type="text/javascript">
+    // If your data field is named id, title, children
+    // does not match the id, value, childs field name of mobileSelect
+    // You can use the keyMap property for field name mapping
+    var mobileSelect6 = new MobileSelect({
+        trigger: '#trigger6',
+        title: 'keyMap',
+        wheels: [
+                    {data:[
+                        {
+                            id:'1',
+                            title:'A',
+                            children:[
+                                {id:'A1',title:'A-a'},
+                                {id:'A2',title:'A-b'},
+                                {id:'A3',title:'A-c'}
+                            ]
+                        },
+                        {
+                            id:'1',
+                            title:'B',
+                            children:[
+                                {id:'B1',title:'B-a'},
+                                {id:'B2',title:'B-b'},
+                                {id:'B3',title:'B-c'}
+                            ]
+                        },
+                    ]}
+                ],
+        keyMap: {
+            id:'id',
+            value: 'title',
+            childs :'children'
+        },         
+        callback:function(indexArr, data){
+            console.log(data);
+        }
+    });
+</script>
+```
+
+
+
+
+
 ## Options
@@ -175,5 +368,5 @@
 |bgColor|`'#ffffff'`|string| The Wheels background color |
+|keyMap|`{id:'id', value:'value', childs:'childs'`}|object| Field name mapping, applies to field names that do not match id, value, childs |
 
 
-
 #### Tips: The meaning of the parameters returned in the callback function is as follows
@@ -282,2 +475,5 @@ - **indexArr** is the currently selected index array, such as[0,0,1]
 
+### 2017-09-07[更新]    
+Add keyMap function
+update README
 
@@ -284,0 +480,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

42889

increased by15.54%

Lines of code

760

increased by0.4%

Number of lines in readme file

479

increased by69.26%

No dependency changes