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の検索と重載のソースコードは以下の通りです.
ここ数日はプロジェクトの権限管理モジュールを作っています.メニュー管理のフロントは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);
}