sui.js和workflow2.js内容详解-白红宇

一、

二、

var config=$("div[name=lwnf]").sui().getConfig()~var config = this.zoo.getConfig();等同

三、注册组件

var zoos = {};

function register(name, com){

com.prototype = Zoo;

zoos[name.toLowerCase()] = com;

}

"com" 为函数或者说是对象

注册的组件都可以用 $(selector).sui().methodname()或者this.zoo.methodname()调取方法。

注册组件就是对已有的封装使用包括各种验证属性设置

富文本编辑器 wangEdit

上传编辑删除

sui.js

function render(data){

addBtn(data);

$.each(data, function(index, item) {

var $tr = buildTr(item);

$tableBody.append($tr);

SUI.init($.noop, $tr);

if(typeof config.onRenderRow === "function"){

config.onRenderRow.call(dom, $tr[0], item);

}

});

}

SUI.init($.noop, $tr);

function init(callback, context){

for(var type in zoos){

var zooDefine = $(".sui-" + type, context);

zooDefine.each(function(){

build(this);

});

}

$.type(callback)==="function"&&callback();

}

build(this);

function build(element, type){

if($(element).sui()){

return element;

}

if(!type){

var suitype = element.className.match(/sui-(\S+)/i); // / ../i 忽略大小写 \S非空白字符 \s空白字符 match匹配正则，返回数组

if(suitype&&suitype[1]){

type = suitype[1];

}else{

return element;

}

var el = create(type, element);

var isui = $(el).attr("isui");

if(!isui){

$(el).attr("sui",true);

}

var conf = el.zoo.parse(element);

el.zoo.init(conf);

$(el).on('change', function(){

var _conf = el.zoo.getConfig();

if(_conf&&_conf.mode=="editable"&&_conf.validate){

el.zoo.validate();

}

});

return el;

}

create(type, element)

function create(type, dom){

type = type.toLowerCase();

var element = new zoos[type](dom);

element.zoo.type = type;

$(element).addClass('sui-component sui-'+type); // addclass（）方法，如果是添加多个类名（空格隔开），如果原class已经存在类名，就会被隐藏。

return element;

}

function register(name, com){

com.prototype = Zoo;

zoos[name.toLowerCase()] = com;

}

workflow2.js

加载流程

设置属性值

//回填数据

if(callback) callback(entity,function(data){

form.sui().setValue(data);

});

workflow2.js中调用sui的方法

var entity = $.extend(true, {}, this.entity);

SUI.init(function(){

var workItem = _this.workflow.workItem ||{};

//初始化下一步

var activityTree = _this.workflow.activityTree;

var partis = $(".sui-participates").sui();

var morePartis = $(".sui-moreparticipates").sui();

if(partis && activityTree){

var attrs = activityTree.exts?activityTree.exts.attrs : {};

var attach = attrs.attach;

var config = partis.getConfig();

config.tree = activityTree;

config.process = workItem.processDefName;

config.processInstId = workItem.processInstID;

config.properties.attach = attach;

config.processExt = _this.workflow.processDefExt.attrs;

config.properties.opinionAtTop = attrs.opinionAtTop;

partis.setConfig(config);

}

if(morePartis && activityTree){

var attrs = activityTree.exts?activityTree.exts.attrs : {};

var attach = attrs.attach;

var config = morePartis.getConfig();

config.tree = activityTree;

config.process = workItem.processDefName;

config.processInstId = workItem.processInstID;

config.properties.attach = attach;

config.processExt = _this.workflow.processDefExt.attrs;

config.properties.opinionAtTop = attrs.opinionAtTop;

morePartis.setConfig(config);

}

if($(".sui-multiopinion").length>0){

$(".sui-multiopinion").each(function(){

var config = $(this).sui().getConfig();

config.properties.workItemId = initConfig.workItemId;

$(this).sui().setConfig(config);

});

}

//回填数据这是调用form组件中的方法form.sui().setValue(data);

if(callback) callback(entity,function(data){

form.sui().setValue(data);

});

//form表单组件

获取data对象的对应的属性值

function getDataValue(data, name){

if(!name){

return;

}

var splits = name.split(".");

var temp = data;

for(var i =0; i < splits.length; i++){

var key = splits[i];

temp = temp[key]; // 获取对象的属性的方法有二： 1是用“.name” 2是 [name]

if(!temp){

break;

}

return temp;

}

回填数据的方法，这是真正的回填数据，上面的只是调用。

this.setValue = function(data){

value = data;

var children = [];

getChildren(dom, children);

$.each(children, function(i, el){

var zoo = el.zoo;

var val = getDataValue(data, zoo.name);

if(zoo.notForm|| typeof val ==="undefined" || val==="undefined"){

return;

}

zoo.setValue(val);

});

}