treegridコントロールは条件によって検索し、再ロードすることができます.

2751 ワード

http://www.iteye.com/topic/1126901
ここ数日はプロジェクトの権限管理モジュールを作っています.メニュー管理のフロントはjquery 1.7.2とJquery easuyui 1.2.6のtreegridコントロールを使って照会とページ分割機能を実現しています.
    しかし、これらの2つの機能点を実現するにあたって、treegridコントロールはdatagridのようなロードとreload方法をサポートしていないことが分かりました.インターネット上には大きな部分がajaxを通じてデータを取得してからtreegridのreload方法を呼び出してレンダリングしています.このような方案には悪いところがあります.照会する時は自分でマニュアルで現在のページと各ページの表示バー数を設定しなければなりません.面倒です.
    テストでは、入力されたページ数に応じて、現在指定されているページの内容を直接にデータベースから取得することができます.そこで、treegridの再ロードは、Paginationコントロールのページ数入力ボックスのkeydownイベントを自動的にトリガすることによって実現され、照会は、treegrid optionsのqueryParaams属性を設定して、最初のページ情報をロードすればよいと考えられる.
   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);
}