easyui+ztree后台管理系统模板

百威

浏览: 691159 次
来自: ...

最近访客更多访客>>

gaozzsoft

A741841403

Liu.Guo.Zhu

mmmzzc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后台管理系统模板</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.1/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="js/JQuery-zTree-v3.5.15/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jQuery-zTree-v3.5.15/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/extends.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body class="easyui-layout">
<!-- 头部标题 -->
<div data-options="region:'north',border:false" style="height:60px; padding:5px; background:#F3F3F3"> 
	<a href="#"><span class="northTitle">后台管理系统模板</span></a>
    <span class="loginInfo">登录用户：admin&nbsp;&nbsp;姓名：管理员&nbsp;&nbsp;角色：系统管理员</span>
</div>

<!-- 左侧导航 -->
<div data-options="region:'west',split:true,title:'导航菜单', fit:false" style="width:200px;"> 
  <ul id="menuTree" class="ztree"></ul>
</div>

<!-- 页脚信息 -->
<div data-options="region:'south',border:false" style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;">
	<span id="sysVersion">系统版本：V1.0</span>
    <span id="nowTime"></span>
</div>

<!-- 内容tabs -->
<div id="center" data-options="region:'center'">
  <div id="tabs" class="easyui-tabs">
    <div title="首页" style="padding:5px;display:block;" >
      <p>模板说明：</p>
        <ul>
          <li>主界面使用 easyui1.3.5</li>
          <li>导航树使用 JQuery-zTree-v3.5.15</li>
        </ul>
      <p>特性说明：</p>
        <ul>
          <li>所有弹出框均显示在顶级父窗口</li>
          <li>修改easyui window拖动，移动时显示窗口而不显示虚线框，并限制拖动范围</li>
        </ul>
    </div>
  </div>
</div>


</body>
</html>

index.js

/*
	主页加载方法

*/
//系统时间显示
setInterval("document.getElementById('nowTime').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
var setting = {
	data: {
		simpleData: {
			enable: true
		}
	},
	view: {
		selectedMulti: false
	},
	callback: {
		onClick:function(e, id, node){
			var zTree = $.fn.zTree.getZTreeObj("menuTree");
			if(node.isParent) {
				zTree.expandNode();
			} 
			else {
				addTabs(node.name, node.file);
			}
		}
	}
};

var zNodes =[
	{ id:1, pId:0, name:"系统管理", open:true},
	{ id:11, pId:1, name:"用户管理", file:"user/user.html"},
	{ id:12, pId:1, name:"数据备份", file:"backup.html"},
	{ id:13, pId:1, name:"权限管理", file:"authority.html"},
	{ id:14, pId:1, name:"角色管理", file:"role.html"},
	{ id:2, pId:0, name:"父节点", open:true},
	{ id:21, pId:2, name:"子节点21", file:""},
	{ id:22, pId:2, name:"子节点22", file:""},
	{ id:23, pId:2, name:"子节点23", file:""}
];

$(function() {
	$.fn.zTree.init($("#menuTree"), setting, zNodes);
	var zTree = $.fn.zTree.getZTreeObj("menuTree");
	
	//中间部分tab
	$('#tabs').tabs({  
		border:false,
		fit:true,
		onSelect: function(title, index){
			var treeNode = zTree.getNodeByParam("name", title, null);
			zTree.selectNode(treeNode);
		}
	}); 
	
	$('.index_panel').panel({  
	  width:300,  
	  height:200,  
	  closable:true,
	  minimizable:true,
	  title: 'My Panel'
	});
	
});

//添加一个选项卡面板 
function addTabs(title, url, icon){
	if(!$('#tabs').tabs('exists', title)){
		$('#tabs').tabs('add',{  
			title:title,  
			content:'<iframe src="'+url+'" frameBorder="0" border="0" scrolling="no" style="width: 100%; height: 100%;"/>',  
			closable:true
		});
	} 
	else {
		$('#tabs').tabs('select', title);
	}
}

user.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户管理</title>
<link rel="stylesheet" type="text/css" href="../css/default.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.5.1/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.5.1/themes/icon.css" />
<script type="text/javascript" src="../js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/extends.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script>

$(function(){
	$("#tt").datagrid({
		url:"datagrid.json?page=1&rows=10", 
		height:$("#body").height()-$('#search_area').height()-5,
		width:$("#body").width(),
		idField:'userId',
		//data: data,
		
		method:'get',
		singleSelect:true, 
		nowrap:true,
		fitColumns:true,
		rownumbers:true,
		showPageList:false,
		columns:[[
			{field:'userName',title:'用户名',width:100,halign:"center", align:"left"},
			{field:'name',title:'姓名',width:100,halign:"center", align:"left"},
			{field:'sex',title:'性别',width:100,halign:"center", align:"left"},
			{field:'department',title:'部门',width:100,halign:"center", align:"left"}
		]],
		toolbar:'#tt_btn',  
        pagination:true,
		onDblClickRow:function(rowIndex, rowData){
			viewDetail(rowData.userId);
		}
	});
	
	//新增弹出框
	$("#save").on("click", function(){
		$("#win").window({
			width:350,
			height:250,
			modal:true,
			title:'新增用户'
		});
		
		$('#win').window('open');  
	});
	//修改
	$("#update").on("click", function(){
		$.messager.alert("提示","update", "info");
	});
	//删除
	$("#delete").on("click", function(){
		$.messager.alert("提示","delete", "info");
	});
})

function viewDetail(date, id){
	$parent.messager.alert("提示","查询详细", "info");
}

//监听窗口大小变化
window.onresize = function(){
	setTimeout(domresize,300);
};
//改变表格宽高
function domresize(){
	$('#tt').datagrid('resize',{  
		height:$("#body").height()-$('#search_area').height()-5,
		width:$("#body").width()
	});
}
</script>
</head>
<body class="easyui-layout" >
<div id="body" region="center" > 
  <!-- 查询条件区域 -->
  <div id="search_area" >
    <div id="conditon">
      <table border="0">
        <tr>
          <td>用户名：</td>
          <td ><input  name="userName" id="userName"   /></td>
          <td>&nbsp;性别：</td>
          <td><input  name="sex" id="sex"  /></td>
          <td>&nbsp;部门：</td>
          <td><input  name="department" id="department"  /></td>
          <td>
              <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search" plain="true">查询</a> 
              <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-reset" plain="true" >重置</a>
          </td>
        </tr>
      </table>
    </div>
    <span id="openOrClose">111</span> 
  </div>
  <!-- 数据表格区域 -->
  <table id="tt" style="table-layout:fixed;"></table>
  <!-- 表格顶部工具按钮 -->
  <div id="tt_btn">
      <a href="javascript:void(0)"  id="save" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
      <a href="javascript:void(0)"  id="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a> 
      <a href="javascript:void(0)"  id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
   </div>
</div>

<div id="win" style="display: none">
	<!-- 内容 -->
	<div class="content">
	    <table width="280" border="0" align="center" cellpadding="3">
	      <tr>
	        <td width="80" align="right"><label for="userName"><span class="x">*</span>用户名：</label></td>
	        <td width="200">
	        <input type="text" name="userName" id="userName" /></td>
	      </tr>
	      <tr>
	        <td align="right"><label for="password"><span class="x">*</span>密码：</label></td>
	        <td><input type="password" name="password" id="password" /></td>
	      </tr>
	      <tr>
	        <td align="right"><label for="name"><span class="x">*</span>姓名：</label></td>
	        <td><input type="text" name="name" id="name" /></td>
	      </tr>
	      <tr>
	        <td align="right"><label for="sex"><span class="x">*</span>性别：</label></td>
	        <td><input type="text" name="sex" id="sex" /></td>
	      </tr>
	      <tr>
	        <td align="right"><label for="department"><span class="x">*</span>部门：</label></td>
	        <td><input type="text" name="department" id="department" /></td>
	      </tr>
	    </table>
	</div>
	<!-- 弹出框按钮 -->
	<div class="windowButton">
	     <a id="addUser_saveAndAdd" class="easyui-linkbutton my-dialog-button" plain="true" icon="icon-ok" href="javascript:void(0)" > 保存并新增</a> 
	     <a id="addUser_save" class="easyui-linkbutton my-dialog-button" plain="true" icon="icon-save" href="javascript:void(0)" > 保存</a> 
	     <a id="addUser_cancel" class="easyui-linkbutton my-dialog-button" plain="true" icon="icon-cancel" href="javascript:void(0)" >取消</a>
	</div>
</div>
</body>
</html>

jueryEasyUiDemo.zip (274.7 KB)
下载次数: 0

分享到：

开始使用jQueryEasyUI | 一份老外写的XMLHttpRequest代码多浏览器支 ...

2017-12-30 21:14
浏览 481
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui+ztree后台管理系统模板

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui+ztree后台管理系统模板

评论

发表评论

相关推荐

jQuery中$.ajax()和$.getJson()同步处理详解

jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

jquery实现textarea发布框限制文字字数输入(添加中文识别)

jquery实现textarea输入框限制字数的方法

EasyUI创建人员树的实例代码

jquery如何判断checkbox（复选框）是否被选中

利用jQuery简单实现CheckBox全选效果

JQuery 发送Json格式数据

jQuery JSONP跨域

jQuery AJAX 分页插件

jQuery表格自动增加

juery 插件使用

jquery 开发ajax

jquery 功能函数

jquery 动画特效

jquery控制页面

jquery基础

JQuery 获取和设置Select选项的代码

最近访客更多访客>>