使用SYSUI开发一个架构图代码使用说明

有时候我们需要对数据进行特殊的展示，如架构图展示，这里我们就用js编写一个功能强大但代码量少的事例。
SYSUI框架下载地址：下载地址

使用SYSUI前端UI框架开发一个多级架构图不限等级 如图：

无等级限制，更重要的是用户可以自己编写展示的样式，点击操作，不单单如图显示。用户通过html标签来实现不一样的显示
事例地址：演示地址
以下为html代码中需要编辑的内容，不同在于需要配置一些标签属性来实现效果

<ul class="clearfix menu-section menulist" id="jiagoulist" sys-template='html' sys-structure="tree" sys-grade="id,pid,grade" sys-Refactor="true">
	<li class="column-name sys-tree clearfix" sys-keyset="id,pid,name,mun,time,status,grade" sys-status="status">
		<a href="javascript:void(0)" sys-title-value="name"  sys-direction-value="status" sys-child-value="pid" sys-keyset="id,pid,name,mun,time,status,grade" class="name menuUl_title sys-region">
					<span class="menu-text sys-region" sys-keyset="name" sys-type="text"></span>
					<span class="menuicon sys-region" sys-keyset="mun" sys-type="text"></span>
			</a>
	</li>
</ul>

以上为html代码通过标签指令来实现数据的绑定渲染操作,支持页面打开，和点击事件处理

以下代码主要用于打开新的页面使用

	<a href="javascript:void(0)" sys-title-value="name"   target="_blank" sys-type="href" sys-href="list.html?" sys-keyset="id,name" class="name menuUl_title sys-region"></a>

以下代码主要是点击操作时使用

<a href="javascript:void(0)" sys-title-value="name" sys-type="onclick" sys-click="shijian(this)" sys-keyset="id,name" class="name menuUl_title sys-region"></a>

以上两段html不同在标签指令sys-type类型不同，类型不同 操作也不同 sys-href，sys-click 分别用于 类型href地址，onclick点击事件操作
如果使用onclick方法那如何编辑js代码了。

//点击事件，直接在SYSUI里的Method模块中定义的DOM方法中里声明
 shijian=function(event,id,name){
   
    //第一个函数值默认当前点击事件的方法。后面的值不定，根据用户在html中声明sys-keyset的数量定义
	 alert(name)			   	
  }

使用到的标签指令：
sys-keyset 绑定的键值名称

sys-click 编辑点击事件处理的方法 例如：sys-click=“shijian(this)”

sys-href 地址 例如：sys-href=“list.html?”

sys-type= 数据显示的类型 ，支持多种类型，这里使用text文本，href地址，onclick点击事件作为显示类型。具体用户可以查看SYSUI文档

sys-template=‘html’
sys-structure="tree"
这两个标签指令自己定义的，配合js使用，下面将说明，里面的值不变，第一个是展示式，第二个为编辑模式

sys-grade=“id,pid,grade” 数据重组需要的键值 一个是当前栏目的id 一个是当前栏目的父级，一个是当前栏的等级

sys-Refactor=“true” 是否使用框架自带的数据重组方法，使用该指令时数据无需做子父级的处理，返回所有即可，但需要声明子父级的id

sys-你的键值-value=“名称” 这个自定义标签指令用于DOM标签操作时使用

class=“sys-region” 所有需要定义标签的地方都要加该class属性。
以下为js代码，使用SYSUI框架

new SYSUI({
   
			Module:'#themeModule',
			mouIconClose: '', //箭头
			mouIconOpen: '', // 箭头
			Method:[{
   'module':'#pageModule',event:function(sys,obj,Callback){
    //set事件集合，obj当前事件
					obj.style.cssText="height:"+ (sys.height())+"px";//设置编辑内容的高度
				    var scrollDiv=sys.$("#scrollbararea");//需要滚动的区域
					sys.scrollbar(sys,obj,scrollDiv);//滚动条调用方法
			    }
			},{
   'module':'#jiagoulist',event:function(set,obj){
   
			   obj.style.display="none";
			   var jsondata=[
			   		{
   'id':1,"pid":0,"name":"公司架构","grade":