jQueryEasyUI和Ztree树形菜单

简介

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

1* 主局布局方案：layout data-options='west' 标签

 设置面板 fit 为 true ，自适应父容器大小  

 设置选项卡 closable 为 true ，添加可关闭按钮 

2* 编写树形菜单 使用 ztree  

 通过 ztree 制作树形菜单 

步骤：1. ：在页面显示菜单位置，添加 <ul>设置 class=”ztree”
               <ul id ="nodes" class="ztree"></ul>		
		      2. : 开启简单数据格式支持 
			  var setting ={
				  data:{
					  simpleData:{
						  enable:true//支持简单json格式
					  }
				  }
			  }
			  3. ：编写树形菜单数据
			     var nodes=[
		             {id:1,pid:0,name:"父节点1"},
		             {id:11,pid:1,name:"子节点1"},
		             {id:12,pid:1,name:"子节点2"},
		        ]
			  4. 生成树形菜单
			  $.fn.zTree.init($("#nodes"),setting,zNodes);

 通过 iconCls 属性指定图标样式  所有图标有 icon.css 文件控制的  

3* 下拉菜单class=”easyui-menubutton” 

4* 消息窗口 messager 的使用

右下角窗口  $.messager.show

进度条窗口  $.messager.progress

5* 方法调用语法：
              对象.控件名("方法名",参数);
              $("#xxx").combobox('reload','getData.action');

 6* 添加窗口 class="easyui-window"
 7* 校验框  class="easyui-validatebox" required=true必须完成校验
 8* 选择一行数据 datagrid('getselected')
 9* 表格数据进行回显 form('load',row)
 10* 生成下拉列表框 class='easyui-checkbox' 
              (三个属性 url 获取列表数据、textField 显示内容字段名、valueField 生成选项 value 属性依据字段名 )
 11* datagrid 在页面加载后 会自动向 url 地址发送一次请求 
 12* formatter 控制表格显示样式 参数(value,rowData,rowIndex)
              (value:当前属性对应json数据的值,rowData:当前行数据,rowIndex:第几行)

 13*分页查询 

14* 获取 datagrid 选中的数据 

 15* 将选中数据 回显 form 表单 

 

 

jquery easyui参考文件API  密码：链接：qgmn