zoukankan      html  css  js  c++  java
  • webix的Form绑定支持数组Array

    绑定的原理

    form.setValues:把树形对象,压平展开成一维的。比如:

    var data = {
        id: 11,
        name: {
            first: 'alex',
            last: 'wu'
        }
    };
    
    var dataCollapsed = {
        id: 11,
        name.first: 'alex',
        name.last: 'wu'
    };
    

    压平之后,再根据key去赋值。
    同理,form.getValues:是逆过程,把一维的数组合成树形结构。
    核心代码是webix.CodeParser.collapseNames/expandNames,一看就明白。压平展开collapseNames是个很好的递归的例子;合成树形expandNames则是双层循环。

    支持数组Array绑定

    但webix的实现里不支持数组,WPF是支持的、Vue.js也支持。而且实际的场景里,有时确实需要将数组压平展示,datatable之类的列表虽然强大,但看多了有点傻。改了下webix的源码,如下:

    webix.CodeParser = {
    	//converts a complex object into an object with primitives properties
    	collapseNames:function(base, prefix, data){
    		data = data || {};
    		prefix = prefix || "";
    
    		if(!base || typeof base != "object")
    			return null;
    
    		for(var prop in base){
    			if(base[prop] && typeof base[prop] == "object" && !webix.isDate(base[prop]) && !webix.isArray(base[prop])){
    				webix.CodeParser.collapseNames(base[prop], prefix+prop+".", data);
    			} else if(base[prop] && typeof base[prop] == "object" && webix.isArray(base[prop])){
    				for(var i=0;i<base[prop].length;i++){
    					webix.CodeParser.collapseNames(base[prop][i], prefix+prop+"["+i+"].", data);
    				}
    			} else {
    				data[prefix+prop] = base[prop];
    			}
    		}
    		return data;
    	},
    	//converts an object with primitive properties into an object with complex properties
    	expandNames:function(base){
    		var data = {},
    			regex = /(w+)[(d+)]/,
    			i, lastIndex, names, name, obj, prop;
    
    		for(prop in base){
    			names = prop.split(".");
    			lastIndex = names.length-1;
    			obj = data;
    			for( i =0; i < lastIndex; i++ ){
    				name = names[i];
    				var match = regex.exec(name);
    
    				if(match){
    					if(!obj[match[1]]){
    						obj[match[1]] = [];
    					}
    
    					while(obj[match[1]].length < 1+parseInt(match[2])){
    						obj[match[1]].push({});
    					}
    				}else if(!obj[name]){
    					obj[name] = {};
    				}
    
    				obj = match? obj[match[1]][match[2]] : obj[name];
    			}
    			obj[names[lastIndex]] = base[prop];
    		}
    
    		return data;
    	}
    };
    

    修改之后的问题是,不支持原来的树形绑定,可以通过既压平展开、又保留原来的列表属性来兼容2种绑定方式。

  • 相关阅读:
    java学习 接口与继承11 默认方法
    java学习 接口与继承10 内部类
    java学习 接口与继承9 抽象类
    java学习 接口与继承8 final
    理解管理信息系统
    vue中的错误日志
    vue中的ref属性
    2.有24颗外观完全一样的小球,其中有一个是空心的,现在只有一个天平,最少称几次能找出这个特殊的球?
    1.有888瓶编了号码的水及10只健康的小白鼠,其中一瓶水有毒,小白鼠饮用毒水一天后会死,最少需要几天可以找到哪瓶水有毒?
    SQL题1两表联查
  • 原文地址:https://www.cnblogs.com/AlexanderYao/p/6560166.html
Copyright © 2011-2022 走看看