一步一步jQuery流程设计器插件goflow(附代码)-6-增加结点属性及切换

  1 //定义流程模板属性  2 TemplatePRoperty = function () {  3     if (typeof TemplateProperty.defaults == "undefined") {  4         /*第一次定义对象时为TemplateProperty类定义静态属性*/  5         TemplateProperty.defaults = {  6             data: {  7                 RecNo: 0,  8                 OrgNo: 0,  9                 TemplateCode: "", 10                 TemplateName: "", 11                 InstanceName: "", 12                 DesignWidth: 1000, 13                 DesignHeight: 800, 14                 Version: 0, 15                 VerStatus: "设计", 16                 DesignerName: "", 17                 DesignTime: "", 18                 PublisherName: "", 19                 PublishTime: "", 20                 TemplateMemo: "" 21             } 22         }; 23         /*第一次定义对象时定义实例共有方法*/ 24         var p = TemplateProperty.prototype; 25         p.createTable = function () { 26             this.$table = $("<table class='gf_prop_tb' cellpadding='0' cellspacing='0'></table>"); 27             this.$tbody = $("<tbody></tbody>"); 28             this.$table.append(this.$tbody); 29             this.$propertyDiv.append(this.$table); 30             //行0 - 基本属性（分组） 31             this.$tbody.append(GoFlow.formatString( 32                "<tr style='display:table-row;background-color:rgb(234, 229, 229);height:0px;' group='TemplateBasic'>{0}</tr>", 33                "<td class='Expanded' group='TemplateBasic'></td><td style='width: 100%;height:0px;' colspan='3'>基本属性</td>")); 34             //行1 - 流程编码 35             this.$tbody.append(GoFlow.formatString( 36                 "<tr group='TemplateBasic' property='TemplateCode'><td/><td>流程编码</td>{0}</tr>", 37                 "<td colspan='2' readonly='true'><input type='text' maxlength='50' readonly='readonly'/></td>")); 38             //行2 - 流程名称 39             this.$tbody.append(GoFlow.formatString( 40                 "<tr group='TemplateBasic' property='TemplateName'><td/><td>流程名称</td>{0}</tr>", 41                 "<td colspan='2' readonly='true'><input type='text' maxlength='50' readonly='readonly'/></td>")); 42             //行3 - 实例名称 43             this.$tbody.append(GoFlow.formatString( 44                 "<tr group='TemplateBasic' property='InstanceName'><td/><td>实例名称</td>{0}{1}</tr>", 45                 "<td><input id='InstanceName' style='width:98.9%;' type='text' maxlength='50'/></td>", 46                 "<td style='min-width:35px;'><input class='BizData' type='button' value='...'/></td>")); 47  48             //行4 - 版本信息（分组） 49             this.$tbody.append(GoFlow.formatString( 50                "<tr style='display:table-row;background-color:rgb(234, 229, 229);height:0px;' group='TemplateVersion'>{0}</tr>", 51                "<td class='Expanded' group='TemplateVersion'></td><td style='width: 100%;height:0px;' colspan='3'>版本信息</td>")); 52             //行5 - 流程版本 53             this.$tbody.append(GoFlow.formatString("<tr group='TemplateVersion' property='Version'>{0}</tr>", 54                 "<td/><td>流程版本</td><td colspan='2' readonly='true'><div></div></td>")); 55             //行6 - 版本状态 56             this.$tbody.append(GoFlow.formatString("<tr group='TemplateVersion' property='VerStatus'>{0}</tr>", 57                 "<td/><td>版本状态</td><td colspan='2' readonly='true'><div></div></td>")); 58             //行7 - 修改人 59             this.$tbody.append(GoFlow.formatString("<tr group='TemplateVersion' property='DesignerName'>{0}</tr>", 60                 "<td/><td>修改人</td><td colspan='2' readonly='true'><div></div></td>")); 61             //行8 - 修改时间 62             this.$tbody.append(GoFlow.formatString("<tr group='TemplateVersion' property='DesignTime'>{0}</tr>", 63                 "<td/><td>修改时间</td><td colspan='2' readonly='true'><div></div></td>")); 64             //行9 - 发布人 65             this.$tbody.append(GoFlow.formatString("<tr group='TemplateVersion' property='PublisherName'>{0}</tr>", 66                 "<td/><td>发布人</td><td colspan='2' readonly='true'><div></div></td>")); 67             //行10 - 发布时间 68             this.$tbody.append(GoFlow.formatString("<tr group='TemplateVersion' property='PublishTime'>{0}</tr>", 69                 "<td/><td>发布时间</td><td colspan='2' readonly='true'><div></div></td>")); 70             //行11 - 其他设置（分组） 71             this.$tbody.append(GoFlow.formatString( 72                "<tr style='display:table-row;background-color:rgb(234, 229, 229);height:0px;' group='TemplateOther'>{0}</tr>", 73                "<td class='Expanded' group='TemplateOther'></td><td style='width: 100%;height:0px;' colspan='3'>其他设置</td>")); 74             //行12 - 设计区域宽度 75             this.$tbody.append(GoFlow.formatString( 76                "<tr group='TemplateOther' property='DesignWidth'><td/><td>设计宽度</td>{0}</tr>", 77                "<td colspan='2'><input type='text' class='goflow-valid-int' maxlength='50'/></td>")); 78             //行13 - 设计区域高度 79             this.$tbody.append(GoFlow.formatString( 80                "<tr group='TemplateOther' property='DesignHeight'><td/><td>设计高度</td>{0}</tr>", 81                "<td colspan='2'><input type='text' class='goflow-valid-int' maxlength='50'/></td>")); 82             //行14 - 备注 83             this.$tbody.append(GoFlow.formatString( 84                 "<tr group='TemplateOther' property='TemplateMemo'><td/><td>模板备注</td>{0}{1}</tr>", 85                 "<td><div id='TemplateMemo' style='width:100%;Word-break:break-all;word-wrap: break-word;'/></td>", 86                 "<td style='min-width:35px;'><input class='BizData' type='button' value='...'/></td>")); 87  88             //给控件赋值 89             this.bindData(); 90             //绑定事件 91             this.bindDelegate(); 92         }; 93         //把流程模板数据绑定到控件 94         p.bindData = function (data) { 95             var self = this; 96             if (data) { 97                 $.each(data, function (k, v) { 98                     self.setData(k, v); 99                 });100             } else {101                 $.each(self.$opts.data, function (k, v) {102                     self.setValue(k, v);103                 });104             }105         };106         //绑定事件107         p.bindDelegate = function () {108             //展开/收缩属性组109             this.$tbody.delegate("td[group].Fold,td[group].Expanded", "click", { self: this }, function (e) {110                 var $templateProp = e.data.self;111                 var fold = $(e.target).hasClass("Fold");112                 $(e.target).toggleClass("Fold", !fold);113                 $(e.target).toggleClass("Expanded", fold);114                 var selector = GoFlow.formatString(115                     "[group='{0}'][property]",116                     $(e.target).attr("group"));117                 $templateProp.$tbody.children(selector).toggle();118             });119         };120         p.getData = function (key) {121             return this.$opts.data[key];122         };123         p.setData = function (key, value) {124             this.$opts.data[key] = value;125             this.setValue(key, value);126         };127         p.getValue = function (key) {128             switch (key) {129                 case "TemplateCode":130                     break;131                 case "TemplateName":132                     break;133                 case "InstanceName":134                     break;135                 case "Version":136                     break;137                 case "VerStatus":138                     break;139                 case "DesignerName":140                     break;141                 case "DesignTime":142                     break;143                 case "PublisherName":144                     break;145                 case "PublishTime":146                     break;147                 case "Memo":148                     break;149                 default:150                     break;151             };152         };153         p.setValue = function (key, value) {154             switch (key) {155                 case "TemplateCode":156                     this.$tbody.find("tr:eq(1) > td:eq(2)").children("input:first").val(value);157                     break;158                 case "TemplateName":159                     this.$tbody.find("tr:eq(2) > td:eq(2)").children("input:first").val(value);160                     break;161                 case "InstanceName":162                     this.$tbody.find("tr:eq(3) > td:eq(2)").children("input:first").val(value);163                     break;164                 case "Version":165                     this.$tbody.find("tr:eq(5) > td:eq(2)").children("div:eq(0)").html(value);166                     break;167                 case "VerStatus":168                     this.$tbody.find("tr:eq(6) > td:eq(2)").children("div:eq(0)").html(value);169                     break;170                 case "DesignerName":171                     this.$tbody.find("tr:eq(7) > td:eq(2)").children("div:eq(0)").html(value);172                     break;173                 case "DesignTime":174                     this.$tbody.find("tr:eq(8) > td:eq(2)").children("div:eq(0)").html(value);175                     break;176                 case "PublisherName":177                     this.$tbody.find("tr:eq(9) > td:eq(2)").children("div:eq(0)").html(value);178                     break;179                 case "PublishTime":180                     this.$tbody.find("tr:eq(10) > td:eq(2)").children("div:eq(0)").html(value);181                     break;182                 case "DesignWidth":183                     this.$tbody.find("tr:eq(12) > td:eq(2)").children("input:first").val(value);184                     break;185                 case "DesignHeight":186                     this.$tbody.find("tr:eq(13) > td:eq(2)").children("input:first").val(value);187                     break;188                 case "TemplateMemo":189                     this.$tbody.find("tr:eq(14) > td:eq(2)").children("div:eq(0)").html(value);190                     break;191                 default:192                     break;193             };194         };195         //显示/隐藏196         p.setVisible = function (bool, data) {197             this.$table.CSS("display", bool ? "block" : "none");198             if (bool && data) {199                 this.bindData(data);200             }201         };202     }203 };204 //初始化TemplateProperty对象205 TemplateProperty.prototype.init = function (gf, pdiv, opts) {206     this.$gf = gf;207     this.$propertyDiv = pdiv;208     this.$opts = opts;209     this.createTable();210 };