`
zengshaotao
  • 浏览: 789245 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

扩展easyui datagrid的两个方法.动态添加和删除toolbar

 
阅读更多
01 $.extend($.fn.datagrid.methods, {
02     addToolbarItem : function (jq, items) {
03         return jq.each(function () {
04             var dpanel = $(this).datagrid('getPanel');
05             var toolbar = dpanel.children("div.datagrid-toolbar");
06             if (!toolbar.length) {
07                 toolbar = $("<div class=\"datagrid-toolbar\"><table cellspacing=\"0\" cellpadding=\"0\"><tr></tr></table></div>").prependTo(dpanel);
08                 $(this).datagrid('resize');
09             }
10             var tr = toolbar.find("tr");
11             for (var i = 0; i < items.length; i++) {
12                 var btn = items[i];
13                 if (btn == "-") {
14                     $("<td><div class=\"datagrid-btn-separator\"></div></td>").appendTo(tr);
15                 else {
16                     var td = $("<td></td>").appendTo(tr);
17                     var b = $("<a href=\"javascript:void(0)\"></a>").appendTo(td);
18                     b[0].onclick = eval(btn.handler || function () {});
19                     b.linkbutton($.extend({}, btn, {
20                             plain : true
21                         }));
22                 }
23             }
24         });
25     },
26     removeToolbarItem : function (jq, param) {
27         return jq.each(function () {
28             var dpanel = $(this).datagrid('getPanel');
29             var toolbar = dpanel.children("div.datagrid-toolbar");
30             var cbtn = null;
31             if (typeof param == "number") {
32                 cbtn = toolbar.find("td").eq(param).find('span.l-btn-text');
33             else if (typeof param == "string") {
34                 cbtn = toolbar.find("span.l-btn-text:contains('" + param + "')");
35             }
36             if (cbtn && cbtn.length > 0) {
37                 cbtn.closest('td').remove();
38                 cbtn = null;
39             }
40         });
41     }
42 });

 

 

用法:

 

1 $('#tt').datagrid("addToolbarItem",[{"text":"xxx"},"-",{"text":"xxxsss","iconCls":"icon-ok"}])

 

1 $('#tt').datagrid("removeToolbarItem","GetChanges")//根据btn的text删除

 

1 $('#tt').datagrid("removeToolbarItem",0)//根据下标删除
分享到:
评论

相关推荐

    EasyUI DataGrid过滤用法实例

    在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能,帮助用户更高效地查找和管理表格中的信息。 首先,`datagrid-filter.js` 文件很可能包含了实现过滤...

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

    由于EasyUI Datagrid的默认行为不包括鼠标悬停弹窗,我们需要通过修改源码或者扩展实现来添加这个功能。在描述中提到的方法是直接修改了源码,这可能涉及到对EasyUI内部机制的理解,以及对源码的调试和测试。 4. *...

    EasyUI DataGrid 添加工具

    通过合理配置DataGrid的工具栏(`toolbar`),开发者能够轻松地为其添加各种操作按钮,如添加、删除、编辑等,这些操作对于提升用户体验至关重要。本文将详细介绍如何在EasyUI DataGrid中添加工具栏,并对工具栏中的...

    easyui DataGrid动态编辑

    3. **onBeforeEdit** 和 **onAfterEdit**:这两个事件在单元格编辑开始和结束时触发,可以用来做数据验证或自定义操作。例如: ```javascript $('#dg').datagrid({ onBeforeEdit: function(index, row){ // 在...

    EasyUI的一些扩展使用

    EasyUI的一些扩展使用:12_动态行编辑扩充代码,15_HQL模糊查询,16_combobox自动检索需要的条件...动态添加和删除toolbar的项,22_扩展方法使datagrid的列中能显示row中的对象里的属性,23_datagrid中行编辑器扩展实例

    JqueryEasyUI DataGrid例子

    DataGrid 是 EasyUI 的一个重要组件,它可以帮助开发者轻松地展示、操作和管理大量数据。在这个例子中,我们将深入探讨如何使用 jQuery EasyUI 的 DataGrid 实现表格的增删改查功能,并结合后台的 Servlet 进行数据...

    EasyUI DataGrid及Pagination(源码)

    DataGrid是一个强大的表格控件,它可以动态加载数据、排序、过滤、编辑和删除数据等。在DataGrid中,你可以通过配置列定义来展示不同的数据字段,并且可以设置各种样式和交互效果,如固定列、行选择、单元格编辑等。...

    C# MVC4 easyui datagrid expand row

    在“expand row”(展开行)场景中,通常我们会在DataGrid的一行中添加一个按钮或图标,当用户点击时,该行会扩展显示更多的详细信息。实现这一功能涉及以下几个关键步骤: 1. **视图模型**:创建C#类来表示数据...

    easyUI的dataGrid重画

    在本文中,我们将深入探讨如何在EasyUI框架中实现`dataGrid`的重画功能,特别是在自定义搜索框和调整默认按钮大小方面。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括`dataGrid`,它是一个强大的数据展示...

    easy ui datagrid项目完整源代码

    总结起来,jQuery Easy UI Datagrid 是一个强大且灵活的数据展示组件,通过深入研究提供的完整项目源代码,我们可以学习到如何有效地配置和扩展 Datagrid,以满足不同应用场景的需求。这将有助于提升我们的前端开发...

    EasyUI tutorial 中文版 chm

    使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用easyUI转换HTML table到datagrid 使用easyUI给datagrid添加pagination 使用easyUI添加...

    jquery-easyui-1.5.5.2.zip

    例如,创建一个DataGrid只需要在HTML中添加一个`&lt;table&gt;`标签,并通过JavaScript设置数据源和列配置。 ```html 数据网格" class="easyui-datagrid" url="get_data.php" toolbar="#toolbar" pagination="true...

    JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

    以上代码提供了一个基本的框架,用于在JQuery EasyUI datagrid中添加、修改和删除数据行。通过这种方式,开发者可以方便地实现复杂的表格交互功能,提高用户操作的便利性和直观性。需要注意的是,在实际应用中,应...

    Jquery.easyUI js引用以及文档教程

    这个压缩包包含了一些关键的文件和资源,便于你理解和使用 jQuery EasyUI。 1. **jQuery-easyUI 引用**: jQuery EasyUI 的核心依赖于 jQuery,因此 `jquery-1.7.2.min.js` 是必需的,它是 jQuery 的一个版本。`...

    EasyUI操作说明1.7.chm.zip

    9. **表格与树**:DataGrid用于展示和编辑表格数据,Tree则用于展示层次结构的数据,这两个组件在Web开发中非常常见。 10. **增强的jQuery插件**:EasyUI对许多原生jQuery插件进行了封装,如Slider、Spinner、...

    简介EasyUI datagrid editor combogrid搜索框的实现

    EasyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的组件,如datagrid、combogrid等,用于构建简洁且功能强大的Web应用程序。 首先,我们需要扩展datagrid的编辑器功能以支持combogrid。这可以通过向$.fn....

    jQuery easyui datagrid动态查询数据实例讲解

    本文通过一个具体实例,详细地说明了如何整合前端easyui datagrid组件、JavaScript、PHP以及MSSQL数据库,来实现一个动态查询并展示数据的Web应用。通过这种方式,用户可以在网页上灵活地输入查询条件,并即时看到...

    JQUERY-EASYUI添加搜索框

    而jQuery SearchBox则是一个用于EasyUI DataGrid的搜索插件,它可以方便地为DataGrid添加高级搜索功能,提升用户体验。 首先,确保已经正确引入JQuery、JQuery EasyUI以及jQuery SearchBox的库文件。这通常包括`...

    jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...

    在jquery easyui中的datagrid中添加searchbox!

    在jQuery EasyUI中,`datagrid`是一个非常常用的组件,它用于展示数据表格,具有丰富的功能和良好的用户体验。而`searchbox`则是为了增强`datagrid`的搜索功能,让用户能够更方便地查找表格中的特定数据。在标题和...

Global site tag (gtag.js) - Google Analytics