视图列增加样式、属性、事件配置

o2web/source/x_component_query_Query/Viewer.js

@@ -248,9 +248,18 @@ MWF.xApplication.query.Query.Viewer = MWF.QViewer = new Class({
                     var size = MWF.getTextSize(column.displayName, viewTitleCellNode);
                     viewCell.setStyle("min-width", ""+size.x+"px");
                     if (this.json.titleStyles) viewCell.setStyles(this.json.titleStyles);
+
+                    if( typeOf(column.titleStyles) === "object" )viewCell.setStyles(column.titleStyles);
+                    if( typeOf(column.titleProperties) === "object" )viewCell.setProperties(column.titleProperties);
                 }else{
                     this.hideColumns.push(column.column);
+                    if( typeOf(column.titleProperties) === "object" )viewCell.setProperties(column.titleProperties);
+                }
+                if( column.events && column.events.loadTitle && column.events.loadTitle.code ){
+                    var code = column.events.loadTitle.code;
+                    this.Macro.fire( code, {"node" : viewCell, "json" : column, "data" : column.displayName, "view" : this});
                 }
+
                 if (column.allowOpen) this.openColumns.push(column.column);
             }.bind(this));
             this.lookup(data);
@@ -1263,6 +1272,7 @@ MWF.xApplication.query.Query.Viewer.Item = new Class({
         this.prev = prev;
         this.idx = i;
         this.clazzType = "item";
+
         this.load();
     },
     load: function(){
@@ -1294,6 +1304,8 @@ MWF.xApplication.query.Query.Viewer.Item = new Class({
             this.sequenceTd.set("text", s);
         }
 
+        debugger;
+
         Object.each(this.view.entries, function(c, k){
             var cell = this.data.data[k];
             if (cell === undefined) cell = "";
@@ -1308,11 +1320,32 @@ MWF.xApplication.query.Query.Viewer.Item = new Class({
                     }else{
                         td.set("text", v);
                     }
+                    if( typeOf(c.contentProperties) === "object" )td.setProperties(c.contentProperties);
+
+                    Object.each( c.events || {}, function (e , key) {
+                        if(e.code){
+                            if( key === "loadContent" ){
+                                this.view.Macro.fire( e.code,
+                                    {"node" : td, "json" : c, "data" : v, "view": this.view, "row" : this});
+                            }else if( key !== "loadTitle" ){
+                                td.addEvent(key, function(event){
+                                    return this.view.Macro.fire(
+                                        e.code,
+                                        {"node" : td, "json" : c, "data" : v, "view": this.view, "row" : this},
+                                        event
+                                    );
+                                }.bind(this));
+                            }
+                        }
+                    });
                 }
+
                 if (this.view.openColumns.indexOf(k)!==-1){
                     this.setOpenWork(td, c)
                 }
+
                 if (this.view.json.itemStyles) td.setStyles(this.view.json.itemStyles);
+                if( typeOf(c.contentStyles) === "object" )td.setStyles(c.contentStyles);
             }
             //}
         }.bind(this));
@@ -1633,6 +1666,7 @@ MWF.xApplication.query.Query.Viewer.ItemCategory = new Class({
                 break;
             }
         }
+
         if (this.groupColumn){
             //var text = (this.groupColumn.code) ? MWF.Macro.exec(this.groupColumn.code, {"value": this.data.group, "gridData": this.view.gridJson, "data": this.view.viewData, "entry": this.data}) : this.data.group;
             var text = this.data.group;
@@ -1652,8 +1686,33 @@ MWF.xApplication.query.Query.Viewer.ItemCategory = new Class({
         this.expanded = false;
         if (this.view.json.itemStyles) this.categoryTd.setStyles(this.view.json.itemStyles);
 
+        debugger;
+        if( this.groupColumn ){
+            if( typeOf(this.groupColumn.contentStyles) === "object" )this.categoryTd.setStyles(this.groupColumn.contentStyles);
+            if( typeOf(this.groupColumn.contentProperties) === "object" )this.categoryTd.setProperties(this.groupColumn.contentProperties);
+        }
+
         this.setEvent();
 
+        var column = this.groupColumn;
+        var td = this.categoryTd;
+        Object.each( column.events || {}, function (e , key) {
+            if(e.code){
+                if( key === "loadContent" ){
+                    this.view.Macro.fire( e.code,
+                        {"node" : td, "json" : column, "data" : this.data.group, "view": this.view, "row" : this});
+                }else if( key !== "loadTitle" ){
+                    td.addEvent(key, function(event){
+                        return this.view.Macro.fire(
+                            e.code,
+                            {"node" : td, "json" : column, "data" : this.data.group, "view": this.view, "row" : this},
+                            event
+                        );
+                    }.bind(this));
+                }
+            }
+        });
+
         this.view.fireEvent("postLoadCategoryRow", [null, this]);
     },
     setEvent: function(){

o2web/source/x_component_query_ViewDesigner/$View/column.html

@@ -156,8 +156,16 @@
             </table>
         </div>
         <div class="MWFFormulaArea" name="code" title="显示脚本 (S)"></div>
-
 	</div>
+    <div title="样式" class="MWFTab">
+        <div class="MWFMaplist" name="titleStyles" title="标题单元格样式"></div>
+        <div class="MWFMaplist" name="titleProperties" title="标题单元格属性"></div>
+        <div class="MWFMaplist" name="contentStyles" title="内容单元格样式"></div>
+        <div class="MWFMaplist" name="contentProperties" title="内容单元格属性"></div>
+    </div>
+    <div title="事件"  class="MWFTab">
+        <div class="MWFEventsArea" name="events"></div>
+    </div>
 	<div title="JSON"  class="MWFTab">
 		<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
 	</div>

o2web/source/x_component_query_ViewDesigner/$View/column.json

@@ -0,0 +1,32 @@
+{
+  "events": {
+    "loadTitle" : {
+      "code": "",
+      "html": ""
+    },
+    "loadContent" : {
+      "code": "",
+      "html": ""
+    },
+    "click": {
+      "code": "",
+      "html": ""
+    },
+    "mousedown": {
+      "code": "",
+      "html": ""
+    },
+    "mouseup": {
+      "code": "",
+      "html": ""
+    },
+    "mouseout": {
+      "code": "",
+      "html": ""
+    },
+    "mouseover": {
+      "code": "",
+      "html": ""
+    }
+  }
+}

o2web/source/x_component_query_ViewDesigner/Property.js

@@ -17,6 +17,9 @@ MWF.xApplication.query.ViewDesigner.Property = MWF.FVProperty = new Class({
         this.data.vtype = this.view.json.type;
         this.data.pid = this.view.json.id + this.data.id;
         this.htmlPath = this.options.path;
+
+        this.maplists = {};
+
         this.designer = designer;
 
         this.propertyNode = propertyNode;
@@ -71,6 +74,7 @@ MWF.xApplication.query.ViewDesigner.Property = MWF.FVProperty = new Class({
                     this.loadActionStylesArea();
                     this.loadActionArea();
                     this.loadStylesList();
+                    this.loadMaplist();
                 }
             }.bind(this));
         } else {
@@ -792,6 +796,39 @@ MWF.xApplication.query.ViewDesigner.Property = MWF.FVProperty = new Class({
 
         }.bind(this));
     },
+    loadMaplist: function(){
+        var maplists = this.propertyContent.getElements(".MWFMaplist");
+        debugger;
+        maplists.each(function(node){
+            var title = node.get("title");
+            var name = node.get("name");
+            var collapse = node.get("collapse");
+            var mapObj = this.data[name];
+            if (!mapObj) mapObj = {};
+            MWF.require("MWF.widget.Maplist", function(){
+                node.empty();
+                var maplist = new MWF.widget.Maplist(node, {
+                    "title": title,
+                    "collapse": (collapse) ? true : false,
+                    "onChange": function(){
+                        //this.data[name] = maplist.toJson();
+                        //
+                        var oldData = this.data[name];
+                        this.changeJsonDate(name, maplist.toJson());
+                        this.changeStyle(name, oldData);
+                        this.changeData(name);
+                    }.bind(this),
+                    "onDelete": function(key){
+                        debugger;
+
+                        this.module.deletePropertiesOrStyles(name, key);
+                    }.bind(this)
+                });
+                maplist.load(mapObj);
+                this.maplists[name] = maplist;
+            }.bind(this));
+        }.bind(this));
+    },
     loadActionStylesArea: function () {
         var _self = this;
         var actionAreas = this.propertyContent.getElements(".MWFActionStylesArea");

o2web/source/x_component_query_ViewDesigner/View.js

@@ -1098,19 +1098,205 @@ MWF.xApplication.query.ViewDesigner.View = new Class({
 
 });
 
+MWF.xApplication.query.ViewDesigner.View.$Module = MWF.QV$Module = new Class({
+    Extends: MWF.widget.Common,
+    Implements: [Options, Events],
+
+    copyStyles: function(from, to){
+        if (!this.json[to]) this.json[to] = {};
+        Object.each(from, function(style, key){
+            //if (!this.json[to][key])
+            this.json[to][key] = style;
+        }.bind(this));
+    },
+    removeStyles: function(from, to){
+        if (this.json[to]){
+            Object.each(from, function(style, key){
+                if (this.json[to][key] && this.json[to][key]==style){
+                    delete this.json[to][key];
+                }
+                //if (this.json[from][key]){
+                //   delete this.json[to][key];
+                //}
+            }.bind(this));
+        }
+    },
+    setTemplateStyles: function(styles){
+        if (styles.styles) this.copyStyles(styles.styles, "styles");
+        if (styles.properties) this.copyStyles(styles.properties, "properties");
+    },
+    clearTemplateStyles: function(styles){
+        if (styles){
+            if (styles.styles) this.removeStyles(styles.styles, "styles");
+            if (styles.properties) this.removeStyles(styles.properties, "properties");
+        }
+    },
+    setStyleTemplate: function(){
+        if( this.view.templateStyles && this.view.templateStyles[this.moduleName] ){
+            this.setTemplateStyles(this.view.templateStyles[this.moduleName]);
+        }
+    },
+    setAllStyles: function(){
+        this.setPropertiesOrStyles("styles");
+        this.setPropertiesOrStyles("inputStyles");
+        this.setPropertiesOrStyles("properties");
+        this.reloadMaplist();
+    },
+    showProperty: function(){
+        if (!this.property){
+            this.property = new MWF.xApplication.query.ViewDesigner.Property(this, this.view.designer.propertyContentArea, this.view.designer, {
+                "path": this.propertyPath,
+                "onPostLoad": function(){
+                    this.property.show();
+                }.bind(this)
+            });
+            this.property.load();
+        }else{
+            this.property.show();
+        }
+    },
+    hideProperty: function(){
+        if (this.property) this.property.hide();
+    },
+
+    deletePropertiesOrStyles: function(name, key){
+        if (name=="properties"){
+            try{
+                this.node.removeProperty(key);
+            }catch(e){}
+        }
+    },
+    setPropertiesOrStyles: function(name){
+        if (name=="styles"){
+            try{
+                this.setCustomStyles();
+            }catch(e){}
+        }
+        if (name=="properties"){
+            try{
+                this.node.setProperties(this.json.properties);
+            }catch(e){}
+        }
+    },
+    setCustomNodeStyles: function(node, styles){
+        var border = node.getStyle("border");
+        node.clearStyles();
+        //node.setStyles(styles);
+        node.setStyle("border", border);
+
+        Object.each(styles, function(value, key){
+            var reg = /^border\w*/ig;
+            if (!key.test(reg)){
+                node.setStyle(key, value);
+            }
+        }.bind(this));
+    },
+    setCustomStyles: function(){
+        var border = this.node.getStyle("border");
+        this.node.clearStyles();
+        this.node.setStyles(this.css.moduleNode);
+
+        if (this.initialStyles) this.node.setStyles(this.initialStyles);
+        this.node.setStyle("border", border);
+
+        if (this.json.styles) Object.each(this.json.styles, function(value, key){
+            if ((value.indexOf("x_processplatform_assemble_surface")!=-1 || value.indexOf("x_portal_assemble_surface")!=-1)){
+                var host1 = MWF.Actions.getHost("x_processplatform_assemble_surface");
+                var host2 = MWF.Actions.getHost("x_portal_assemble_surface");
+                if (value.indexOf("/x_processplatform_assemble_surface")!==-1){
+                    value = value.replace("/x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
+                }else if (value.indexOf("x_processplatform_assemble_surface")!==-1){
+                    value = value.replace("x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
+                }
+                if (value.indexOf("/x_portal_assemble_surface")!==-1){
+                    value = value.replace("/x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
+                }else if (value.indexOf("x_portal_assemble_surface")!==-1){
+                    value = value.replace("x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
+                }
+            }
+
+            var reg = /^border\w*/ig;
+            if (!key.test(reg)){
+                if (key){
+                    if (key.toString().toLowerCase()==="display"){
+                        if (value.toString().toLowerCase()==="none"){
+                            this.node.setStyle("opacity", 0.3);
+                        }else{
+                            this.node.setStyle("opacity", 1);
+                            this.node.setStyle(key, value);
+                        }
+                    }else{
+                        this.node.setStyle(key, value);
+                    }
+                }
+            }
+            //this.node.setStyle(key, value);
+        }.bind(this));
+    },
+
+    _setEditStyle: function(name, obj, oldValue){
+        var title = "";
+        var text = "";
+        if (name==="name"){
+            title = this.json.name || this.json.id;
+            text = this.json.type.substr(this.json.type.lastIndexOf("$")+1, this.json.type.length);
+            this.treeNode.setText("<"+text+"> "+title);
+        }
+        if (name==="id"){
+            title = this.json.name || this.json.id;
+            if (!this.json.name){
+                text = this.json.type.substr(this.json.type.lastIndexOf("$")+1, this.json.type.length);
+                this.treeNode.setText("<"+text+"> "+this.json.id);
+            }
+            this.treeNode.setTitle(this.json.id);
+            this.node.set("id", this.json.id);
+        }
+
+        this._setEditStyle_custom(name, obj, oldValue);
+    },
+
+    reloadMaplist: function(){
+        if (this.property) Object.each(this.property.maplists, function(map, name){ map.reload(this.json[name]);}.bind(this));
+    },
+    getHtml: function(){
+        var copy = this.node.clone(true, true);
+        copy.clearStyles(true);
+
+        var html = copy.outerHTML;
+        copy.destroy();
+
+        return html;
+    },
+    getJson: function(){
+        var json = Object.clone(this.json);
+        var o = {};
+        o[json.id] = json;
+        return o;
+    }
+});
 
 MWF.xApplication.query.ViewDesigner.View.Column = new Class({
-	initialize: function(json, view, next){
+    Extends: MWF.QV$Module,
+    initialize: function(json, view, next){
         this.propertyPath = "../x_component_query_ViewDesigner/$View/column.html";
-		this.view = view;
+        this.view = view;
         this.json = json;
         this.next = next;
         this.css = this.view.css;
         this.content = this.view.viewTitleTrNode;
         this.domListNode = this.view.domListNode;
         this.load();
-	},
+    },
     load: function(){
+        if( !this.json.events ){
+            this.loadDefaultJson(function () {
+                this._load()
+            }.bind(this))
+        }else{
+            this._load();
+        }
+    },
+    _load: function(){
         this.areaNode = new Element("td", {"styles": this.css.viewTitleColumnAreaNode});
         this.areaNode.store("column", this);
 
@@ -1139,6 +1325,26 @@ MWF.xApplication.query.ViewDesigner.View.Column = new Class({
 
         this.setCustomStyles();
     },
+    loadDefaultJson: function(callback){
+        if( this.view.defaultColumnJson ){
+            this.json = Object.merge( this.json, Object.clone(this.view.defaultColumnJson) );
+            if (callback) callback(this.json);
+        }
+        var url = this.view.path+"column.json";
+        MWF.getJSON(url, {
+            "onSuccess": function(obj){
+                this.view.defaultColumnJson = Object.clone(obj);
+                this.json = Object.merge( this.json, Object.clone(obj) );
+                if (callback) callback(this.json);
+            }.bind(this),
+            "onerror": function(text){
+                this.view.designer.notice(text, "error");
+            }.bind(this),
+            "onRequestFailure": function(xhr){
+                this.view.designer.notice(xhr.responseText, "error");
+            }.bind(this)
+        });
+    },
     setCustomStyles : function(){
         var viewStyles = this.view.json.data.viewStyles;
         var border = this.areaNode.getStyle("border");
@@ -1526,183 +1732,6 @@ MWF.xApplication.query.ViewDesigner.View.Column = new Class({
 
 });
 
-MWF.xApplication.query.ViewDesigner.View.$Module = MWF.QV$Module = new Class({
-    Extends: MWF.widget.Common,
-    Implements: [Options, Events],
-
-    copyStyles: function(from, to){
-        if (!this.json[to]) this.json[to] = {};
-        Object.each(from, function(style, key){
-            //if (!this.json[to][key])
-            this.json[to][key] = style;
-        }.bind(this));
-    },
-    removeStyles: function(from, to){
-        if (this.json[to]){
-            Object.each(from, function(style, key){
-                if (this.json[to][key] && this.json[to][key]==style){
-                    delete this.json[to][key];
-                }
-                //if (this.json[from][key]){
-                //   delete this.json[to][key];
-                //}
-            }.bind(this));
-        }
-    },
-    setTemplateStyles: function(styles){
-        if (styles.styles) this.copyStyles(styles.styles, "styles");
-        if (styles.properties) this.copyStyles(styles.properties, "properties");
-    },
-    clearTemplateStyles: function(styles){
-        if (styles){
-            if (styles.styles) this.removeStyles(styles.styles, "styles");
-            if (styles.properties) this.removeStyles(styles.properties, "properties");
-        }
-    },
-    setStyleTemplate: function(){
-        if( this.view.templateStyles && this.view.templateStyles[this.moduleName] ){
-            this.setTemplateStyles(this.view.templateStyles[this.moduleName]);
-        }
-    },
-    setAllStyles: function(){
-        this.setPropertiesOrStyles("styles");
-        this.setPropertiesOrStyles("inputStyles");
-        this.setPropertiesOrStyles("properties");
-        this.reloadMaplist();
-    },
-    showProperty: function(){
-        if (!this.property){
-            this.property = new MWF.xApplication.query.ViewDesigner.Property(this, this.view.designer.propertyContentArea, this.view.designer, {
-                "path": this.propertyPath,
-                "onPostLoad": function(){
-                    this.property.show();
-                }.bind(this)
-            });
-            this.property.load();
-        }else{
-            this.property.show();
-        }
-    },
-    hideProperty: function(){
-        if (this.property) this.property.hide();
-    },
-
-    deletePropertiesOrStyles: function(name, key){
-        if (name=="properties"){
-            try{
-                this.node.removeProperty(key);
-            }catch(e){}
-        }
-    },
-    setPropertiesOrStyles: function(name){
-        if (name=="styles"){
-            try{
-                this.setCustomStyles();
-            }catch(e){}
-        }
-        if (name=="properties"){
-            try{
-                this.node.setProperties(this.json.properties);
-            }catch(e){}
-        }
-    },
-    setCustomNodeStyles: function(node, styles){
-        var border = node.getStyle("border");
-        node.clearStyles();
-        //node.setStyles(styles);
-        node.setStyle("border", border);
-
-        Object.each(styles, function(value, key){
-            var reg = /^border\w*/ig;
-            if (!key.test(reg)){
-                node.setStyle(key, value);
-            }
-        }.bind(this));
-    },
-    setCustomStyles: function(){
-        var border = this.node.getStyle("border");
-        this.node.clearStyles();
-        this.node.setStyles(this.css.moduleNode);
-
-        if (this.initialStyles) this.node.setStyles(this.initialStyles);
-        this.node.setStyle("border", border);
-
-        if (this.json.styles) Object.each(this.json.styles, function(value, key){
-            if ((value.indexOf("x_processplatform_assemble_surface")!=-1 || value.indexOf("x_portal_assemble_surface")!=-1)){
-                var host1 = MWF.Actions.getHost("x_processplatform_assemble_surface");
-                var host2 = MWF.Actions.getHost("x_portal_assemble_surface");
-                if (value.indexOf("/x_processplatform_assemble_surface")!==-1){
-                    value = value.replace("/x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
-                }else if (value.indexOf("x_processplatform_assemble_surface")!==-1){
-                    value = value.replace("x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
-                }
-                if (value.indexOf("/x_portal_assemble_surface")!==-1){
-                    value = value.replace("/x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
-                }else if (value.indexOf("x_portal_assemble_surface")!==-1){
-                    value = value.replace("x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
-                }
-            }
-
-            var reg = /^border\w*/ig;
-            if (!key.test(reg)){
-                if (key){
-                    if (key.toString().toLowerCase()==="display"){
-                        if (value.toString().toLowerCase()==="none"){
-                            this.node.setStyle("opacity", 0.3);
-                        }else{
-                            this.node.setStyle("opacity", 1);
-                            this.node.setStyle(key, value);
-                        }
-                    }else{
-                        this.node.setStyle(key, value);
-                    }
-                }
-            }
-            //this.node.setStyle(key, value);
-        }.bind(this));
-    },
-
-    _setEditStyle: function(name, obj, oldValue){
-        var title = "";
-        var text = "";
-        if (name==="name"){
-            title = this.json.name || this.json.id;
-            text = this.json.type.substr(this.json.type.lastIndexOf("$")+1, this.json.type.length);
-            this.treeNode.setText("<"+text+"> "+title);
-        }
-        if (name==="id"){
-            title = this.json.name || this.json.id;
-            if (!this.json.name){
-                text = this.json.type.substr(this.json.type.lastIndexOf("$")+1, this.json.type.length);
-                this.treeNode.setText("<"+text+"> "+this.json.id);
-            }
-            this.treeNode.setTitle(this.json.id);
-            this.node.set("id", this.json.id);
-        }
-
-        this._setEditStyle_custom(name, obj, oldValue);
-    },
-
-    reloadMaplist: function(){
-        if (this.property) Object.each(this.property.maplists, function(map, name){ map.reload(this.json[name]);}.bind(this));
-    },
-    getHtml: function(){
-        var copy = this.node.clone(true, true);
-        copy.clearStyles(true);
-
-        var html = copy.outerHTML;
-        copy.destroy();
-
-        return html;
-    },
-    getJson: function(){
-        var json = Object.clone(this.json);
-        var o = {};
-        o[json.id] = json;
-        return o;
-    }
-})
-
 MWF.require("MWF.widget.Toolbar", null, false);
 MWF.xApplication.query.ViewDesigner.View.Actionbar = new Class({
     Extends: MWF.xApplication.query.ViewDesigner.View.$Module,