欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jQuery EasyUI ztree插件使用

程序员文章站 2024-02-02 12:46:10
...

1.下载easyUI的开发包

    jQuery EasyUI ztree插件使用

     该包的结构是

    jQuery EasyUI ztree插件使用

2.将easyUI的资源文件引入的页面中：

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

1.1   layout页面布局

<body class="easyui-layout">
	<!-- 使用div元素描述每个区域 -->
	<div style="height: 100px" data-options="region:'north'">北部区域</div>
	<div style="width: 200px" data-options="region:'west'">西部区域</div>
	<div data-options="region:'center'">中心区域</div>
	<div style="width: 100px" data-options="region:'east'">东部区域</div>
	<div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>
region string 定义的布局面板位置,这个值是一个如下: north, south, east, west, center

    显示界面

    jQuery EasyUI ztree插件使用


1.2   accordion折叠面板

<!-- 制作accordion折叠面板 
			fit:true----自适应(填充父容器)
		-->
		<div class="easyui-accordion" data-options="fit:true">
			<!-- 使用子div表示每个面板 -->
			<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
			<div title="面板二">2222</div>
			<div title="面板三">3333</div>
		</div>
效果：
  显示界面

   jQuery EasyUI ztree插件使用

selected boolean 设置为true来展开面板。 false
title String 设置面板的标题  
iconCls String 一个图标的CSS类显示在选项卡面板标题 icon-search(查询)   icon-add(增加)  icon-cancel(删除) icon-save(保存)

1.3   tabs选项卡面板

<!-- 制作一个tabs选项卡面板 -->
		<div class="easyui-tabs" data-options="fit:true">
			<!-- 使用子div表示每个面板 -->
			<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
			<div data-options="closable:true" title="面板二">2222</div>
			<div title="面板三">3333</div>
		</div>

显示页面

jQuery EasyUI ztree插件使用

closable boolean 当设置为true,该选项卡面板将显示一个按钮就可闭点击关闭选项卡面板。 false

1.4在页面中引入ztree相关的文件：

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
	<!-- 展示ztree效果 :使用标准json数据构造ztree-->
				<ul id="ztree1" class="ztree"></ul>
				<script type="text/javascript">
					$(function(){
						//页面加载完成后，执行这段代码----动态创建ztree
						var setting = {};
						//构造节点数据
						var zNodes = [
						              {"name":"节点一","children":[
						                                        	{"name":"节点一_1"},
						                                        	{"name":"节点一_2"}
						                                        ]},//每个json对象表示一个节点数据
						              {"name":"节点二"},
						              {"name":"节点三"}
						              ];
						//调用API初始化ztree
						$.fn.zTree.init($("#ztree1"), setting, zNodes);
					});
				</script>

效果如图

jQuery EasyUI ztree插件使用

1.5   使用简单json数据构造ztree（重点）

<!-- 展示ztree效果 :使用简单json数据构造ztree-->
	<ul id="ztree2" class="ztree"></ul>
		<script type="text/javascript">
			$(function(){
				//页面加载完成后，执行这段代码----动态创建ztree
			           var setting2 = {
					data: {
					simpleData: {
						enable: true//使用简单json数据构造ztree节点
						}
					}
				};
			//构造节点数据
		     var zNodes2 = [
		    {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
	            {"id":"2","pId":"3","name":"节点二"},
		     {"id":"3","pId":"0","name":"节点三"}
						              ];
		   //调用API初始化ztree
		   $.fn.zTree.init($("#ztree2"), setting2, zNodes2);
					});
				</script>
  其中pId表示父节点    例如
              {"id":"1","pId":"2","name":"节点一"}
            {"id":"2","pId":"3","name":"节点二"} 表示节点一是节点二的子节点

显示效果

jQuery EasyUI ztree插件使用

1.6   发送ajax请求获取json数据构造ztree

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
				<ul id="ztree3" class="ztree"></ul>
				<script type="text/javascript">
					$(function(){
						//页面加载完成后，执行这段代码----动态创建ztree
						var setting3 = {
								data: {
									simpleData: {
										enable: true//使用简单json数据构造ztree节点
									}
								}
						};
						
						//发送ajax请求，获取json数据
						//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
						var url = "${pageContext.request.contextPath}/json/menu.json";
						$.post(url,{},function(data){
							//调用API初始化ztree
							$.fn.zTree.init($("#ztree3"), setting3, data);
						},'json');
					});
				</script>

$.post(url,data,success(data, textStatus, jqXHR),dataType)
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）。

     

1.7   使用ztree提供的API为节点绑定事件

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
	<script type="text/javascript">
		$(function(){
			//页面加载完成后，执行这段代码----动态创建ztree
			var setting3 = {
				data: {
				    simpleData: {
					enable: true//使用简单json数据构造ztree节点
						}
					},
				callback: {
					//为ztree节点绑定单击事件
					onClick: function(event, treeId, treeNode){
						if(treeNode.page != undefined){
							//判断选项卡是否已经存在
							var e = $("#mytabs").tabs("exists",treeNode.name);
							if(e){
							//已经存在，选中
							$("#mytabs").tabs("select",treeNode.name);
								}else{
								//动态添加一个选项卡
							$("#mytabs").tabs("add",{
									title:treeNode.name,
									closable:true,
									content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
									});
									}
								}
							}
					}
			};
						
				//发送ajax请求，获取json数据
				//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
				var url = "${pageContext.request.contextPath}/json/menu.json";
				$.post(url,{},function(data){
					//调用API初始化ztree
					$.fn.zTree.init($("#ztree3"), setting3, data);
					},'json');
					});
				</script>
select which 选择一个选项卡面板,‘which’参数可以是标题或索引的选项卡面板。
exists which 表明如果特别面板是存在,‘which’参数可以是标题或索引的选项卡面板。
add options

添加一个新的选项卡面板,选择参数是一个配置对象,看到选项卡面板属性为更多的细节。

当添加一个新的选项卡面板,它将成为选择。　　

添加一个未经选择的选项卡面板,记得设置”selected“属性为false。 

// add a unselected tab panel  
$('#tt').tabs('add',
        {
          title: 'new tab',
          selected: false 
          //... 
});

1.7  jQuery easyUI messager使用方式

    alert

.messager.alert title, msg, icon, fn 显示一个警告窗口。参数:
title: 标题文本显示在标题面板。
msg: 消息文本显示。
icon: 形象的图标将显示。可用值是:error,question,info,warning.
fn: 这个回调函数窗口关闭时触发。

代码示例:

$.messager.alert('My Title','Here is a info message!','info');  
  //alert方法 消息提示框
    $(function(){
    	$.messager.alert("标题","内容","info");
    });

效果如下

jQuery EasyUI ztree插件使用

   confirm

.messager.confirm title, msg, fn 显示一个确认消息窗口,可以取消按钮。参数:
title: 标题文本显示在标题面板。
msg: 消息文本显示。
fn(b): 回调函数,当用户单击Ok按钮,通过true函数,否则通过false来它。

代码示例:

$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){if (r){ // exit action; } });
 
//confirm方法  确认框    其中function中的参数可以任意字母，返回值有true false
     $(function(){
    	$.messager.confirm("提示信息","你确定要删除这条信息吗?",function(t){
    		alert(t);
    	});
    });

效果如下

jQuery EasyUI ztree插件使用

    show

   
messager.show options 显示一个消息窗口在屏幕底部。选项参数是一个配置对象:
showType: 定义了如何将显示消息窗口。可用值: null,slide,fade,show. 默认为slide。
showSpeed: 定义了时间在毫秒完成显示消息窗口。默认值为600。
width: 定义消息窗口的宽度。默认值为250。
height: 定义消息窗口的高度。默认值为100。
title: 标题文本显示在标题面板。
msg: 消息文本显示。
style: 定义了自定义dpecification风格为消息窗口。
timeout: 如果定义为0,消息窗口不会关闭,除非用户关闭它。对unzero定义,消息窗口将自动关闭当超时。默认为4秒。

代码示例:

$.messager.show({  	
  title:'My Title',  	
  msg:'Message will be closed after 5 seconds.',  	
  timeout:5000,  	
  showType:'slide'  
});  

// 显示消息窗口顶部中心 
$.messager.show({  	
  title:'My Title',  	
  msg:'Message will be closed after 4 seconds.',  	
  showType:'show',  	
  style:{  		
    right:'',  		
    top:document.body.scrollTop+document.documentElement.scrollTop,  		
    bottom:''  	
  }  
});  
 //show方法   欢迎框
    $(function(){
    	$.messager.show({
    		title:'欢迎信息',
    		msg:'欢迎admin登录',
    		timeout:5000,
    		showType:'show'
    	});
    });

效果如图

jQuery EasyUI ztree插件使用

1.8 jQuery easyUI menubutton菜单使用

<!-- 制作菜单 -->
	<a data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton">控制面板</a>
	
	<!-- 使用div元素制作下拉菜单 -->
	<div id="mm">
		<div onclick="alert(1111)" data-options="iconCls:'icon-edit'">修改密码</div>
		<div>联系管理员</div>
		<div class="menu-sep"></div>
		<div>退出系统</div>
	</div>

jQuery EasyUI ztree插件使用    

                    其中上面的iconCls的值也是这四种    icon-search(查询)   icon-add(增加)  icon-cancel(删除) icon-save(保存)

1.9validatebox使用

      

提供的校验规则：

1、非空校验required="required"

2、使用validType指定

         email:正则表达式匹配电子邮件规则。

         url:正则表达式匹配的URL规则。

         length[0,100]:在x和x字符允许。

         remote['http://.../action.do','paramName']:发送ajax请求做验证值,返回“true”当成功      
<tr>
     <td>确认密码：</td>
       <td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
   </tr>

1.92  combotree(组合树)

<!-- 组合树 -->
  <input name="parentFunction.id" 
	  class="easyui-combotree" style="width:170px;"  
	  data-options="url:'functionAction_listajax.action'"/>

注  其中url返回的数据是json数据如   其中text文本是展现到界面看的  children是管理系统的子节点的内容

{  
"id" : 1,  
"text" : "系统管理",  
"iconCls" : "icon-save",  
"children" : [  
{  
"text" : "主机信息",  
"state" : "closed",  
"children" : [  
{  
"text" : "版本信息"  
}

        



2. datagrid使用方法（重要）

<!-- 方式一：将静态HTML渲染为datagrid样式 -->
    <table class="easyui-datagrid">
       <thead>
           <tr>
              <th data-options="field:'id'" >编号</th>
              <th data-options="field:'name'" >姓名</th>
              <th data-options="field:'age'" >年龄</th>
           </tr>
       </thead>
       <tbody>
            <tr>
              <td>1</td>
              <td>李四</td>
              <td>10</td>
            </tr>
             <tr>
              <td>2</td>
              <td>王五</td>
              <td>100</td>
            </tr>
       
       </tbody>
    </table>
field string 列字段名。相当于<input>里面的name的值

显示效果

jQuery EasyUI ztree插件使用


 <!-- 方式二：发送ajax请求获取json数据创建datagrid --> 
    <table   data-options="url:'${pageContext.request.contextPath }/json/datagrid.json'"
        class="easyui-datagrid">
       <thead>
           <tr>
              <th data-options="field:'id'">编号</th>
              <th data-options="field:'name'">姓名</th>
              <th data-options="field:'age'" >年龄</th>
           </tr>
       </thead>
    </table>

提供json文件：

                   {"id":"001","name":"李四","age":100},
		   {"id":"002","name":"王思","age":100},
		   {"id":"003","name":"利息","age":100}

效果如图

    jQuery EasyUI ztree插件使用

<!-- 方式三：使用easyUI提供的API创建datagrid -->
    <table id="mytables"> 
    </table>
    <script type="text/javascript">
       $(function(){
    	 //页面加载完成后，创建数据表格datagrid
    	   $("#mytables").datagrid({
    		 //定义标题行所有的列
    		   columns:[[
    			     {title:'编号',field:'id'},
    			     {title:'姓名',field:'name'},
    			     {title:'年龄',field:'age'}	   
    		       ]],
    		   url:'${pageContext.request.contextPath }/json/datagrid_data.json',
    			 //定义工具栏
    			 toolbar:[
    				 {text:'添加',iconCls:'icon-add',
    					 //为按钮绑定单击事件
    					 handler:function(){
    						 alert("sadas");
    					 }},
    				 {text:'删除',iconCls:'icon-remove'},
    				 {text:'更新',iconCls:'icon-edit'},
    				 {text:'查询',iconCls:'icon-search'}
    			 ],
    			 //分页
    			 pagination:true
    	   });
       });
    
    </script>

columns
 array
 定义标题行所有的列
url string 一个URL请求数据从远程站点   它返回的是json数据
toolbar
 array,selector
 顶部工具栏的数据网格面板     text为工具的名称    iconCls为工具的图标

如果数据表格中使用了分页条，要求服务端响应的json变为：

jQuery EasyUI ztree插件使用
请求

jQuery EasyUI ztree插件使用

响应

jQuery EasyUI ztree插件使用


效果如图

jQuery EasyUI ztree插件使用


2.1   jquery OCUpload一键上传插件使用

第一步：将js文件引入页面

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>

第二步：在页面中提供任意一个元素

<input id="myButton" type="button" value="上传">

第三步：调用插件提供的upload方法，动态修改HTML页面元素

<script type="text/javascript">
	$(function(){
		//页面加载完成后，调用插件的upload方法，动态修改了HTML页面元素
		$("#myButton").upload({
			action:'xxx.action',
			name:'myFile'
		});
	});</scripe>

jQuery EasyUI ztree插件使用

2.2  easyUI combobox下拉框使用

制作一个json文件：

jQuery EasyUI ztree插件使用
<input data-options="url:'${pageContext.request.contextPath }/json/combobox_data.json',
			valueField:'id',
			textField:'name'" 
			class="easyui-combobox">

里面还有一个mode属性
mode string 定义了如何加载列表数据当文本改变。设置为“remote“如果下拉列表框从服务器加载。当设置为“remot“模式下,用户类型将被发送的  http请求参数命名为“q”服务器来检索新数据。

jQuery EasyUI ztree插件使用

效果如图

jQuery EasyUI ztree插件使用

其中     valueField的值因与json数据的存在key相对应  同理textFiled也是    

             总之 valueField和textFiled的值是json数据的key值       class=“easyui-combobox”表示已下拉框样式使用


2.3  datagrid编辑功能使用方式

editor string,object 显示编辑类型。当字符串显示编辑类型,当对象包含两个属性:
type: 字符串,编辑类型、可能的类型是:文本,文本区,复选框,numberbox,validatebox,datebox combotree、组合框。
options: 对象,编辑选项对应的编辑类型。
insertRow param
插入一个新行,参数包含以下属性:
index: 插入的行索引,如果没有定义,添加新行。
row: 行数据。

代码示例:

//插入新的一行在第二排的位置
$('#dg').datagrid('insertRow',{
  	index: 1,	// index start with 0
  	row: {
  		name: 'new name',
  		age: 30,
  		note: 'some messages'
  	}
  });

deleteRow index 删除一行。
onAfterEdit rowIndex, rowData, changes 当用户完成编辑,参数包含:
rowIndex: 编辑行索引,从0
rowData: 对应的记录编辑行
changes: 更改的字段/值对
getRowIndex row 返回指定的行索引,行参数可以一行记录或id字段值。
beginEdit index 编辑一行结束。
endEdit index 编辑一行结束。 

<table id="mytable"></table>
	<!-- 方式三：使用easyUI提供的API创建datagrid -->
	<script type="text/javascript">
		$(function(){
			var myIndex = -1;//全局变量，值为正在编辑行的索引
			//页面加载完成后，创建数据表格datagrid
			$("#mytable").datagrid({
				//定义标题行所有的列
				columns:[[
				          {title:'编号',field:'id',checkbox:true},
				          {width:150,title:'姓名',field:'name',editor:{
				        	  								type:'validatebox',
				        	  								options:{}
				          								   }},
				          {width:150,title:'年龄',field:'age',editor:{
								type:'numberbox',
  								options:{}
								   }},
				          {width:150,title:'日期',field:'address',editor:{
								type:'datebox',
  								options:{}
								   }}
				          ]],
				//指定数据表格发送ajax请求的地址
				url:'${pageContext.request.contextPath }/json/datagrid_data.json',
				rownumbers:true,
				singleSelect:true,
				//定义工具栏
				toolbar:[
				         {text:'添加',iconCls:'icon-add',
				        	 //为按钮绑定单击事件
				        	 handler:function(){
				        		 $("#mytable").datagrid("insertRow",{
				        			 index:0,//在第一行插入数据
				        			 row:{}//空行
				        		 });
				        		 $("#mytable").datagrid("beginEdit",0);
				        		 myIndex = 0;
				         	 }
				         },
				         {text:'删除',iconCls:'icon-remove',handler:function(){
				        	//获得选中的行对象
				        	 var rows = $("#mytable").datagrid("getSelections");
				        	 if(rows.length == 1){
				        		 var row = rows[0];
				        		 //获得指定行对象的索引
				        		 myIndex = $("#mytable").datagrid("getRowIndex",row);
				        	 }
				        	 $("#mytable").datagrid("deleteRow",myIndex);
				        	 //$.post();
				         }},
				         {text:'修改',iconCls:'icon-edit',handler:function(){
				        	 //获得选中的行对象
				        	 var rows = $("#mytable").datagrid("getSelections");
				        	 if(rows.length == 1){
				        		 var row = rows[0];
				        		 //获得指定行对象的索引
				        		 myIndex = $("#mytable").datagrid("getRowIndex",row);
				        	 }
				        	 $("#mytable").datagrid("beginEdit",myIndex);
				         }},
				         {text:'保存',iconCls:'icon-save',handler:function(){
				        	 $("#mytable").datagrid("endEdit",myIndex);
				         }}
				         ],
				//显示分页条
				pagination:true,
				pageList:[3,5,7,10],
				//数据表格提供的用于监听结束编辑事件
				onAfterEdit:function(index,data,changes){
					console.info(data);
					$.post();
				}
			});
		});
	</script>

总结

   

一般   $("{1}").datagrid(param,value）；

     {1}表示那个标签执行的id值    param 表示 操作datagrid(数据表格)的属性    value表示param 的值









上一篇： idea Gradle 编译可执行jar

下一篇： 集成学习之多数投票预测

推荐阅读