`

easyui+ztree后台管理系统模板

 
阅读更多
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>
分享到：
| 一份老外写的XMLHttpRequest代码多浏览器支 ...
评论
发表评论

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

相关推荐

    mvc+EF+easyui+ztree

    自己最近两天刚做的mvc项目linq to model first，包括分页，动态加载菜单栏，登录，记住密码，权限分配（差一步，等后续），非常适合刚入mvc的人借鉴，后续有更新，请下载者留下邮箱，后续会发到你的邮箱，或有什么...

    IT信息管理系统（springMVC+Mybatis+spring+easyui+zTree+ueditor+higchart）

    springMVC+Mybatis+spring+easyui+zTree+ueditor+higchart IT信息管理系统，需要tomcat+sqlsever+jdk1.6，源代码提供了数据库模型，数据库备份文件，以及服务启动注意事项。系统模块有：权限管理、用户管理、部门...

    C#基于MVC+EasyUI+ECharts后台管理系统完整源码

    MVC + easyUI + sqlserver2014 + ECharts 3. 主要功能:新增、修改、删除、分页、导出Excel文件、上传图片、权限设置、图形报表展示 (权限设置只是为了练习easyUI tree的使用,具体项目具体分析) (例子涉及两张表...

    jquery easyui + Ztree +折线图

    比如，你可以用ZTree展示组织架构或文件系统，通过点击节点触发异步加载子节点，同时结合EasyUI的表格组件展示详细信息；而折线图则可以用来展现数据随时间的变化，例如网站访问量、销售数据等。通过这样的组合，...

    完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip

    完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统...

    EasyUI1.4+zTree3.5.16完美结合框架布局

    EasyUI和zTree是两个非常流行的JavaScript库...通过这种方式，开发者可以快速搭建出满足业务需求的后台管理系统，同时保持良好的用户体验。对于初学者和有经验的开发者而言，这种结合都是一种值得学习和掌握的技术栈。

    SpringMVC+jdbcTemplate+easyUI+ztree(增删改查)

    在IT行业中，构建Web应用程序是常见的任务，而SpringMVC、jdbcTemplate、easyUI和ztree这四个技术组件常被用于构建高效、易用且功能丰富的管理后台。下面将详细介绍这些技术及其在“增删改查”操作中的应用。 首先...

    easyui+TP后台模板

    "easyui+TP后台模板"是一个基于EasyUI和ThinkPHP（简称TP）框架构建的后台管理系统模板。EasyUI是一款基于jQuery的UI库，它提供了丰富的组件和预设样式，简化了网页界面的设计工作，而ThinkPHP则是一款国内广泛应用...

    基于MVC+EasyUI+ECharts后台管理系统完整源码 MVCEasyUIEChartsComplete.rar

    基于MVC+EasyUI+ECharts后台管理系统完整源码 源码描述： 一、源码特点 1. 本例子采用Vs2012编译(其它VS版本可以转换后使用) 2. MVC + easyUI + sqlserver2005(及以上) + eCharts 3. 主要功能:新增、修改、删除...

    SSI+jquery+EasyUi+ZTree框架下的进销存系统

    结合上述技术，"SSI+jquery+EasyUi+ZTree框架下的进销存系统"可能的设计思路是： 1. 使用SSI处理服务器端的动态内容，如在页面头部或尾部插入公共的头部信息、脚本引用等。 2. 利用jQuery简化前端代码，提高用户...

    ssm+druid连接池+easyui+ztree的小例子

    在这个小例子中，我们将深入理解这三个组件如何协同工作，并结合Druid连接池和EasyUI、ZTree实现数据管理与展示。 首先，Spring是核心的依赖注入（DI）和面向切面编程（AOP）框架，它允许开发者管理对象的生命周期...

    easyui后台模版

    此资源包括网上几个高分的easyui后台模版，还有自己专门下载的。 1. ace-master.zip 文件夹里面 的模版...4. easyui+ztree后台管理系统模板.zip（8分） 和 官方EasyUI皮肤最新模板.zip（12分） 里面是到CSDN下载的。

    easyui+ashx订单管理系统

    总而言之，"easyui+ashx订单管理系统"是一个实用的学习和参考案例，它将现代Web开发技术与业务逻辑紧密结合，展现了如何利用EasyUI来设计用户友好的界面，以及如何用ASHX处理后台数据操作，对于想要提升.NET开发技能...

    基于MVC+EasyUI+ECharts后台管理系统

    【基于MVC+EasyUI+ECharts后台管理系统】是一种常见的企业级应用架构，它结合了Model-View-Controller（MVC）设计模式、EasyUI前端框架和ECharts数据可视化库，以构建高效、灵活且功能丰富的后台管理系统。...

    JQ EasyUI1.4.4示例 + zTree3.5.19 完美的 tree +tab 框架布局（修正菜单）

    JQ EasyUI1.4.4示例 + zTree3.5.19 完美的 tree +tab 框架布局（修正菜单） 看图介绍！http://blog.csdn.net/cyy11/article/details/50449918 之前下载过的与我联系。

    后台模板HTML+整套Easyui皮肤组件-后台管理系统模板

    后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板...

Magicbox
Global site tag (gtag.js) - Google Analytics