treegrid控件按条件查询和重加载的实现

最新推荐文章于 2020-03-27 15:26:12 发布

原创最新推荐文章于 2020-03-27 15:26:12 发布 · 588 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数据库 #json #ViewUI

JS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何利用jQuery EasyUI TreeGrid插件实现动态查询与分页加载功能，通过模拟分页控件的键盘事件实现树形表格的数据重载，同时通过设置查询参数实现精确查询。

转载：http://www.iteye.com/topic/1126901

这几天在做项目的权限管理模块，其中菜单管理的前台采用jquery1.7.2和Jquery easyui 1.2.6的treegrid控件来实现查询和和分页功能。

可是在实现这两个功能点时发现treegrid控件没支持类似datagrid的load和reload方法，网络上有的很大一部分是先通过ajax获取数据，然后调用treegrid的reload方法进行渲染。这种方案有个不好的地方就是查询的时候你得自己手动设置当前页和每页显示条数，比较麻烦，浪费了pagination控件封装的分页功能。

在测试中发现，pagination控件根据输入的页数可以直接获取数据库中当前指定页的内容。于是想到了，treegrid的重加载可以通过自动触发pagination控件页数输入框的keydown事件来实现，而查询即可通过先设置treegrid options的queryParams属性来实现查询信息的设置然后加载第一页信息就可以了。

treegrid的查询和重载的源码如下：

$(document).ready(function(){
	$('#menuItemGridId').treegrid({
		url:"menuCtrl.action?cmd=getMenuItemTree" ,
		queryParams:getQueryParams("menuItemSearchId"),
		idField:'menuItemId',
		treeField:'displayName',
		pageList: [5,10,15],
		pagination:true,
		fitColumns:true,
		rownumbers: true,
		animate:true,
		collapsible:true,
		fitColumns:true,
		showFooter:true
	});
	
});

//查询功能
//menuItemSearchId为查询条件所在的form的id
function searchMenuItem(){
	$("#menuItemGridId").treegrid("options").queryParams = getQueryParams("menuItemSearchId");
	autoLoad($("#menuItemGridId").treegrid("getPager"),1);
}

/**
 * 自动触发分页的加载操作

 * @param pager  各个控件对应的pagination组件
 */
function autoLoad(pager,pageNumber){
	var event = jQuery.Event("keydown");//模拟一个键盘事件        
	event.keyCode = 13;//keyCode=13是回车
	
	pager.find('input.pagination-num').val(pageNumber);	//设置跳转页为当前指定页面
	
	pager.find('input.pagination-num').trigger(event);
}


/**
 * 将指定form参数转换为json对象
 */
function getQueryParams(conditionFormId){
	var searchCondition = getJqueryObjById(conditionFormId).serialize();
	var obj = {};
    var pairs = searchCondition.split('&');
    var name,value;
    
    $.each(pairs, function(i,pair) {
	    pair = pair.split('=');
	    name = decodeURIComponent(pair[0]);
	    value = decodeURIComponent(pair[1]);
	    
	    obj[name] =  !obj[name] ? value :[].concat(obj[name]).concat(value);              //若有多个同名称的参数，则拼接
    });
    
    return obj;
}

/**
 * 根据id获取jquery对象
 * @param id
 */
function getJqueryObjById(id){
	return $("#" + id);
}