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

此代码转载：

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)//根据下标删除

======>

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