这几天在做项目的权限管理模块,其中菜单管理的前台采用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);
}
分享到:
相关推荐
和 $('#tg').treegrid('expandAll');会造成严重卡顿, 解决方案: 数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载的data数据中的state属性变更,再重新执行 $('#tg').treegrid('load...
最近涉及到treegrid组件的查询,需要根据查询条件动态更新EasyUI的treegrid组件的动态加载查询结果
下面通过本文给大家介绍下图中的treegrid如何实现? 要求:动态加载;级联勾选;通关类型判断显示包库/还是镜像(列有所不同,镜像共4列),勾选一个复选框,后面的复选框变为不可勾选状态。 下面是具体代码: 1,...
MVC+EasyUITreeGrid懒加载示例,主要对EasyUI中TreeGrid组件的使用进行演示。对于正在学此组件的童鞋,不防花个几分钟看一下。本文主要演示:TreeGrid的简单应用、懒加载方法、控件数据格式。
官方提供的treegrid的ex 我给大家贴出来看看吧: 代码如下: $(function(){ $(‘#tt’).treegrid({ url:’treegrid_data3.json’, onAfterEdit:function(row,changes){ alert(row.name); } }); }) 这个是页面...
这里面包含easyui的chm文档easyui-1.3.5.zip,datagrid项目案例,SSH和easyui整合的案例,easyui异步加载tree,tree和datagrid共用的例子,改好的兼容jQueryUI1.10.3的easyui,另外加一个primeui-10资料。资源分定为1分...
可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回...
//设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是可以勾选的,用来在数据中设置勾选了哪些节点 //这样就可以实现读取url数据时是可以设置勾选了哪些节点,在...
easyui 树加控件 最近看了一个easy感觉里面的树搞得还不错,虽然觉得让人有点不灵活的感觉,我们来说说怎么在树种添加控件效果 在书中添加需要用到formatter这个属性,可以在加载的时候显示 function ...
easyUI 根据一些条件改变DataGrid 行背景颜色 easyUI 创建一个 Property Grid easyUI 展开DataGrid里面的行显示详细信息 easyUI 在主datagrid上创建子datagrid Window easyUI 我的第一个window easyUI ...
主从表,从表是一个treegrid,加载完数据后,点击节点进入编辑状态。 代码如下: columns : [ [ { title : “ID”, field : “id”, hidden : true }, { field : “pid”, hidden : true }, { ...
1.此文件为demo,使用easyui json格式加载数据 2.本人亲测可行,已经运用到项目中 3.暂没发现不兼容的问题:本人使用IE和谷歌
easyui 异步树, 异步加载树结构。 combotree树结构, treegrid树结构
一、EasyUI树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid)。 创建树形网格(TreeGrid) ...
本篇文章主要介绍了Jquery EasyUI tree 的异步加载,可以实现遍历指定文件夹,根据文件夹内的文件生成tree,有兴趣的可以了解一下。
在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义。下面给出两种方法供初学者参考: 方法一: var...
本次更新,我将文档从头到尾和官网发布的最新内容校对了一次,将所有的错误和遗漏的API全部补全和修复了。快半年了,EasyUI又更新了。这次依然以BUG修复和功能改进为主,EasyUI发展至今,主体功能已经基本完善。即便...
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
6、增加combotree对简单数据格式和类标准数据格式的加载,具体参考jquery.easyui.tree.extend.js文件开头说明。 7、修复datagrid.onConfirmEdit事件默认实现bug。 8、增加treegrid.onConfirmEdit事件。 2013-8-12 ...