Step by step jQuery flow designer plug-in goflow (with code), jquerygoflow

Step by step jQuery flow designer plug-in goflow (with code), jquerygoflow

The UI interface of the designer is ready. How can I display the attributes of the node next? It is inconvenient to use a pop-up window. The propertygrid of easyui is displayed on the rightmost side and easyui is introduced, this makes the plug-in more complex. Finally, you decide to write the plug-in by yourself.

1. The implementation result is as follows:

1.1. Attribute display

1.2 hide attributes

1.3 hide attribute groups

2. jQuery-drag left and right separators (Demo)

3. process board attribute definition and initialization

// Define the Process Template attribute TemplateProperty = function () {if (typeof TemplateProperty. defaults = "undefined") {/* defines static attributes for the GoFlow class when the object is defined for the first time */TemplateProperty. defaults = {data :{}};/* defines the common method of the instance when the object is defined for the first time */var p = TemplateProperty. prototype; p. createTable = function () {// assign this to the control. bindData (); // bind event this. bindDelegate () ;}; // bind the Process Template data to the control p. bindData = function () {var self = this; $. each (self. $ opts. data, functio N (k, v) {self. setValue (k, v) ;};}; // bind event p. bindDelegate = function () {// expand/Contract attribute group this. $ tbody. delegate ("td [group]. fold, td [group]. expanded "," click ", {self: this}, function (e) {var $ templateProp = e. data. self; var fold = folder (e.tar get ). hasClass ("Fold"); alias (e.tar get ). toggleClass ("Fold ",! Fold); folder (e.tar get ). toggleClass ("Expanded", fold); var selector = GoFlow. formatString ("[group = '{0}'] [property]", condition (e.tar get ). attr ("group"); $ templateProp. $ tbody. children (selector ). toggle () ;}); // input bind onchange event this. $ tbody. delegate ("td> input", "change", {self: this}, function (e) {var $ templateProp = e. data. self; var key = values (e.tar get ). parent (). parent (). attr ("property"); var value = alias (e.tar get ). val (); $ templateProp. setData (key, value) ;}); // input bind onkeydown event this. $ tbody. delegate ("td> input. goflow-valid-int "," keydown ", function (e) {return GoFlow. validInt (e) ;}) ;}; p. getData = function (key) {return this. $ opts. data [key] ;}; p. setData = function (key, value) {this. $ opts. data [key] = value ;}; p. getValue = function (key) {switch (key) {};}; p. setValue = function (key, value) {switch (key) {};}}; // initialize the TemplateProperty object TemplateProperty. prototype. init = function (pdiv, opts) {this. $ propertyDiv = pdiv; this. $ opts = opts; this. createTable ();};

4. The latest goflow plug-in structure after the Process Template attribute is added is as follows:

(Function ($, undefined) {// define the Process Template attribute TemplateProperty = function () {}; // initialize the TemplateProperty object TemplateProperty. prototype. init = function (pdiv, opts) {}; // defines the GoFlow class GoFlow = function () {}; // initializes the GoFlow object (gfDiv: jQuery object; opts: parameter) goFlow. prototype. init = function (gfDiv, opts) {}; // plug-in definition $. fn. goflow = function (opts) {};}) (jQuery); // closure ends

5. Code: GoFlow_02.zip