前端效果插件

最新推荐文章于 2024-04-27 07:32:36 发布

武汉小喽啰

最新推荐文章于 2024-04-27 07:32:36 发布

阅读量468

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_43318134/article/details/106818538

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 分页插件

下载地址：zx5p

1.1 pagination

我们可以使用jQuery提供的分页插件来实现前端的分页效果。

1.1.1 引入pagination环境

在界面中引入pagination.css与jquery.pagination.js文件即有了其环境。

<link rel="stylesheet" href="css/pagination.css">
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>

1.1.2 定位分页栏位置

在需要显示分页栏的位置加上div标签

<tfoot>
	<tr>
		<td colspan="6" align="center">
			<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
		</td>
	</tr>
</tfoot>

注意：div的id值自定义，类名固定值

1.1.3 初始化分页栏

<script type="text/javascript">
	
	$(function(){
		
		// 调用后面声明的函数对页码导航条进行初始化操作
		initPagination();
		
	});
	
	// 生成页码导航条的函数
	function initPagination() {
		
		// 获取总记录数
		var totalRecord = ${requestScope.pageInfo.total};
		
		// 声明一个JSON对象存储Pagination要设置的属性
		var properties = {
			num_edge_entries: 3,								// 边缘页数
			num_display_entries: 5,								// 主体页数
			callback: pageSelectCallback,						// 指定用户点击“翻页”的按钮时跳转页面的回调函数
			items_per_page: ${requestScope.pageInfo.pageSize},	// 每页要显示的数据的数量
			current_page: ${requestScope.pageInfo.pageNum - 1},	// Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
			prev_text: "上一页",									// 上一页按钮上显示的文本
			next_text: "下一页"									// 下一页按钮上显示的文本
		};
		
		// 生成页码导航条
		$("#Pagination").pagination(totalRecord, properties);
		
	}
	
	// 回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
	// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
	// pageIndex是Pagination传给我们的那个“从0开始”的页码
	function pageSelectCallback(pageIndex, jQuery) {
		
		// 根据pageIndex计算得到pageNum
		var pageNum = pageIndex + 1;
		
		// 跳转页面
		window.location.href = "admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
		
		// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
		return false;
	}
	
</script>

1.1.4 修改插件源码

jquery.pagination.js插件有一个坑，在文件的最后一行有一个回调函数的调用opts.callback(current_page, this);，需要将该函数注释掉，该函数就是用来调用我们写的回调函数的，这里不需要调用，否则就会陷入死循环。

插件下载地址：ds3g

实现效果：

2. layer

一个简单易用的提示插件

下载地址：nxkp

2.1 引入环境

<script type="text/javascript" src="layer-v3.1.1/layer/layer.js"></script>

2.2 用法

最常用的就是直接使用：

layer.msg("操作成功！");

3. zTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。被广泛应用在系统的权限管理中

下载地址：07fj

zTree的API需要发发布到web容器（tomcat）中才能查看，本地不能查看具体细节，例如：

3.1 引入环境

<link rel="stylesheet" href="ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>

3.2 使用

可以参考ZTree的demo案例使用，使用很简单。

3.2.1 参考api定义数据

var setting = {
		view : {
			dblClickExpand : false,		// 是否双击展开
			showLine : true,
			selectedMulti : false,		
			showIcon: true,				// 定义是否显示图标
			addDiyDom: myAddDiyDom,		// 自定义图标
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId",
				rootPId : ""
			},
			key: {
				url: "xUrl"
			}
		}
	};

3.2.2 显示自定义图标函数

// Tree的控件定义   设置节点后面显示一个按钮
// treeNode 代表当前节点对象
function myAddDiyDom(treeId, treeNode){
	// <span id="tree_8_ico" title="" treenode_ico="" class="button ico_docu" style="background:url(glyphicon glyphicon-check) 0 0 no-repeat;"></span>
	let id = treeNode.tId + "_ico";
	$("#"+id).removeClass().addClass(treeNode.icon);
}

3.2.3 加载tree

1）页面

页面很简单，只需要一个ul，class为zree即可

<div class="panel-body"> <ul id="tree" class="ztree"></ul> </div>

2）加载treejs

$.fn.zTree.init($("#tree"), setting, res.data);

res.data为ajax返回的树形数据

3.2.3 添加组件

我们希望在鼠标移动到菜单的时候，显示相应的图标

样式如图：

js函数：

// 添加组件
function addHoverDom(treeId, treeNode){
	
	let spanId = "btnGroup"+treeNode.tId;
	
	// 如果已存在，直接返回
	if($("#"+spanId).length > 0 ){
		return;
	}
	
	// 定义span组件
	var html = "";
	
	// 定义三个组件内容
	var addBtn = "<a id='"+treeNode.id+"' class='btnAdd btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg '></i></a>"; 
	var removeBtn = "<a id='"+treeNode.id+"' class='btnRemove btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title=' 删 除 节 点 '>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg '></i></a>"; 
	var editBtn = "<a id='"+treeNode.id+"' class='btnEdit btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' href='#' title=' 修 改 节 点 '>&nbsp;&nbsp;<i class='fafa-fw fa-edit rbg '></i></a>";
	
	// 根据层级关系组装之间
	// 判断当前节点的级别 
	if(treeNode.level == 0) { // 级别为 0 时是根节点，只能添加子节点 
		html = addBtn;
	}
	if(treeNode.level === 1){  // 第二层目录
		html = addBtn + editBtn;
		if(treeNode.children.length == 0){  // 如果存在子节点
			html = removeBtn + html;
		}
		
	}
	if(treeNode.level === 2){
		html = removeBtn + editBtn;
	}
	
	// 将组件添加到a标签之后 tree_4_a
	var aId = treeNode.tId + "_a";
	$("#"+aId).after("<span id = '"+spanId+"'>"+html+"</span>");
}

注意：这里默认只有3层结构

3.2.3 删除组件

前面添加了组件，当鼠标移出的时候，就需要将添加的组件删除掉

// 删除组件
function removeHoverDom(treeId, treeNode){
	// 拼接按钮组的 id 
	var btnGroupId = "btnGroup"+treeNode.tId;
	// 移除对应的元素  btnGrouptree_18
	$("#" + btnGroupId).remove();
}

3.2.3 给组件动态绑定事件

var node = {};
function init(){
	// 添加
	$("#tree").on('click','.btnAdd',function(e){
		// 打开模态框前的值设置
		// 1. 设置标题
		$("#menuSaveModal [class=modal-title]").text("添加");
		// 2. 设置按钮值
		$("#menuSaveModal div[class='modal-footer'] span").text("保存");
		
		// console.log(this.id);
		// 将当前点击的节点ID存入window对象中
		node.id = this.id;
		
		// 打开模态框menuSaveModal
		$('#menuSaveModal').modal('show')
		
		// 打开之前先清空数据
		$("#reset").click();
		$("#menuSaveModal form input[type='hidden']").val('');
		return false;
	});
	
	// 修改
	$("#tree").on('click','.btnEdit',function(e){
		// 打开模态框前的值设置
		// 1. 设置标题
		$("#menuSaveModal [class='modal-title']").text("编辑");
		// 2. 设置按钮值
		$("#menuSaveModal div[class='modal-footer'] span").text("更新");
		
		// 将当前点击的节点ID存入window对象中
		node.id = this.id;
		
		// 3. 回显数据
		var treeNode =  $.fn.zTree.getZTreeObj("tree").getNodeByParam("id", node.id, null);
		$("#menuSaveModal form input[name=id]").val(node.id);
		$("#menuSaveModal form input[name=name]").val(treeNode.name);
		$("#menuSaveModal form input[name=url]").val(treeNode.url);
		$("#menuSaveModal form input[name=icon]").val([treeNode.icon]);
		
		// 打开模态框menuSaveModal
		$('#menuSaveModal').modal('show')
		return false;
	});
	
	// 删除节点
	$("#tree").on('click','.btnRemove',function(e){
		node.id = e.currentTarget.id;
		var treeNode =  $.fn.zTree.getZTreeObj("tree").getNodeByParam("id", node.id, null);
		
		// 添加提示信息
		$("#removeNodeSpan").html(" 【 <span class='"+treeNode.icon+"'></span>&nbsp;<span style='color:red;'>"+treeNode.name+"</span> 】");
		
		// 打开模态框
		$("#menuConfirmModal").modal("show");
		return false;
	});
	
}

3.2.4 与服务端交互事件

// 确定删除
function sure(){
	$.get("menu/delete/"+node.id+".json", function(data){
		  if(data.result === "SUCCESS"){
			  layer.msg("删除成功！");
			  $("#menuConfirmModal").modal("hide");
			  // 重新加载
			  initTreeData();
		  }
		  if(data.result === "FAILD"){
			  layer.msg("操作失败！");
		  }
		},"json");
}

// 保存
function save(){
	var data = $("#menuSaveModal form").serialize();
	var id = $("#menuSaveModal form input[type='hidden']").val();
	if(!id){
		data = data + "&pid="+node.id;
	}
	$.ajax({
		'type': "POST",
		'url':'menu/save.json',
		'data':data,
		'dataType':'json',
		'success':function(res){
			if(res.result === "SUCCESS"){
				// 关闭模态框
				$('#menuSaveModal').modal('hide');
				layer.msg("操作成功！");
				// 重新加载
				initTreeData();
			}
			if(res.result === "FAILD"){
				layer.msg("操作失败！");
			}
		},
		'error':function(res){
			layer.msg("操作出错！");
		}
	});
}

武汉小喽啰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端效果插件

1. 分页插件1.1 pagination 我们可以使用jQuery提供的分页插件来实现前端的分页效果。1.1.1 引入pagination环境在界面中引入pagination.css与jquery.pagination.js文件即有了其环境。<link rel="stylesheet" href="css/pagination.css"><script type="text/javascript" src="jquery/jquery...
复制链接

扫一扫