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

最新推荐文章于 2020-06-17 23:41:08 发布

转载最新推荐文章于 2020-06-17 23:41:08 发布 · 2.4k 阅读

ASP.NET/WEB 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种自定义Datagrid工具栏的方法，包括添加和移除工具栏按钮的功能实现。通过对JavaScript代码的理解，可以轻松地为Datagrid添加带有分割线的按钮组，并能根据需要动态调整这些按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此代码转载：

http://www.cnblogs.com/XiaoGer/archive/2012/06/05/2537047.html

$.extend($.fn.datagrid.methods,
 { 

02
    addToolbarItem: function(jq,
 items){ 

03
        return jq.each(function(){ 

04
            var toolbar
 = $(this).parent().prev("div.datagrid-toolbar");

05
            for(var i
 = 0;i<items.length;i++){

06
                var item
 = items[i];

07
                if(item
 === "-"){

08
                    toolbar.append('<div
 class="datagrid-btn-separator"></div>');

09
                }else{

10
                    var btn=$("<a
 href=\"javascript:void(0)\"></a>");

11
                    btn[0].onclick=eval(item.handler||function(){});

12
                    btn.css("float","left").appendTo(toolbar).linkbutton($.extend({},item,{plain:true}));

13
                }

14
            }

15
            toolbar
 = null;

16
        }); 

17
    },

18
    removeToolbarItem: function(jq,
 param){ 

19
        return jq.each(function(){ 

20
            var btns
 = $(this).parent().prev("div.datagrid-toolbar").children("a");

21
            var cbtn
 = null;

22
            if(typeof param
 == "number"){

23
                cbtn
 = btns.eq(param);

24
            }else if(typeof param
 == "string"){

25
                var text
 = null;

26
                btns.each(function(){

27
                    text
 = $(this).data().linkbutton.options.text;

28
                    if(text
 == param){

29
                        cbtn
 = $(this);

30
                        text
 = null;

31
                        return;

32
                    }

33
                });

34
            }

35
            if(cbtn){

36
                var prev
 = cbtn.prev()[0];

37
                var next
 = cbtn.next()[0];

38
                if(prev
 && next && prev.nodeName == "DIV" &&
 prev.nodeName == next.nodeName){

39
                    $(prev).remove();

40
                }else if(next
 && next.nodeName == "DIV"){

41
                    $(next).remove();

42
                }else if(prev
 && prev.nodeName == "DIV"){

43
                    $(prev).remove();

44
                }

45
                cbtn.remove(); 

46
                cbtn= null;

47
            }                      

48
        }); 

49
    }              

50
});

用法：

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

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

1
$('#tt').datagrid("removeToolbarItem",0)//根据下标删除

======>

你可以看到相关的原理，通过原理你可以就可以自定义带分割线，带搜索栏的任意组合的布局了。