`
bozch
  • 浏览: 460887 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery easyui的datagrid中toolbar类似extjs的工具栏靠右浮动

阅读更多

直接上代码:

if(opts.toolbar){
var tb=$("<div class=\"datagrid-toolbar\"></div>").prependTo(_3ae);

var position = $.inArray("->",opts.toolbar);

if(position != -1){
for(var i=0;i<position;i++){
var btn=opts.toolbar[i];
if(btn=="-"){
$("<div class=\"datagrid-btn-separator\"></div>").css("float","left").appendTo(tb);
}else{
var tool=$("<a href=\"javascript:void(0)\"></a>");
tool[0].onclick=eval(btn.handler||function(){
});
tool.css("float","left").appendTo(tb).linkbutton($.extend({},btn,{plain:true}));
}

}

for(var i=position+1;i<opts.toolbar.length;i++){
var btn=opts.toolbar[i];
if(btn=="-"){
$("<div class=\"datagrid-btn-separator\"></div>").css("float","right").appendTo(tb);
}else{
var tool=$("<a href=\"javascript:void(0)\"></a>");
tool[0].onclick=eval(btn.handler||function(){
});
tool.css("float","right").appendTo(tb).linkbutton($.extend({},btn,{plain:true}));
}
}

}else{
for(var i=0;i<opts.toolbar.length;i++){
var btn=opts.toolbar[i];
if(btn=="-"){
$("<div class=\"datagrid-btn-separator\"></div>").css("float","left").appendTo(tb);
}else{
var tool=$("<a href=\"javascript:void(0)\"></a>");
tool[0].onclick=eval(btn.handler||function(){
});
tool.css("float","left").appendTo(tb).linkbutton($.extend({},btn,{plain:true}));
}

}
}

}

在jquery easyui源码中,将此段代码覆盖原来的代码即可。

用法类似分割条'-',只是添加了一个大于号,看就是'->'了。呵呵

上面扩展的是针对的jquery easyui的1.2.2版本。其他的版本可以参考。

/*www.jeestudio.com*/

分享到:
评论

相关推荐

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    jquery easyui datagrid性能优化

    jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。

    JqueryEasyUI DataGrid例子

    在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据驱动的表格。DataGrid 是 EasyUI 的一个重要组件,它可以帮助开发者轻松地展示、操作和...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid 右冻结

    标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时,针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的...

    easyui datagrid 增加鼠标悬停弹窗事件

    在本示例中,我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能:当鼠标悬停在某一行时,弹出一个窗口显示该行的关键信息,例如用于图片预览。以下是对这个知识点的详细解释: 1. **EasyUI Datagrid**: ...

    EasyUI DataGrid过滤用法实例

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件,包括表格(DataGrid)等,使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid ...

    jquery easyui datagrid demo 详解

    在实际应用中,Datagrid 还有很多高级功能,如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等,可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用,可以大大提高开发效率,为用户提供更加友好的...

    EasyUI Datagrid 中文排序的问题

    本文将详细介绍如何解决EasyUI Datagrid中的中文排序问题,并分别从前端和后端两个角度给出具体的实现方案。 #### 二、EasyUI Datagrid简介 EasyUI 是一个基于 jQuery 的简单而强大的 UI 库,它提供了大量的用户...

    jquery easyui datagrid 教程

    jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    jQuery EasyUI仿Extjs界面

    在"jQuery EasyUI 仿 Extjs 界面布局"中,主要涉及以下知识点: 1. **布局管理**:EasyUI 提供了多种布局方式,如流式布局、网格布局、边界布局、表格布局等,这使得开发者可以方便地模拟出ExtJS中的复杂界面布局,...

    EasyUI DataGrid 添加工具

    本文将详细介绍如何在EasyUI DataGrid中添加工具栏,并对工具栏中的各个按钮属性进行解释。 #### 二、DataGrid工具栏属性详解 ##### 1. 工具栏(`toolbar`)属性 DataGrid插件提供了一个`toolbar`属性,用于定义...

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...

    easyui datagrid 动态隐藏显示列

    jquery easyui 扩展 datagrid 自定义动态隐藏显示列

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细介绍如何解决当dataGrid列较多且无数据显示不全的情况,并...

Global site tag (gtag.js) - Google Analytics