Easy-UI 动态添加DataGrid的Toolbar按钮

　　在前人的基础上进行的修改，不知道他是从哪里引用来的，所以没有粘贴引用地址。

　　原代码不支持1.3.6。

　　修改功能：

　　　　1、如果之前没有添加过工具，用这个方法不能添加（已修复）；

　　　　2、估计是不支持1.3.6，所以在1.3.6下不能删除按钮（已修复）；

　　　　3、添加了在删除最有一个按钮后把按钮容器删除掉；

插件代码：

$.extend($.fn.datagrid.methods, {
    addToolbarItem: function (jq, items) {
        return jq.each(function () {
            var toolbar = $(this).parent().prev("div.datagrid-toolbar");
            //judge does it include toolbar object
            //if don‘t have add one
            if (toolbar.length == 0) {
                toolbar = $("<div class=\"datagrid-toolbar\"><table cellspacing=\"0\" cellpadding=\"0\"><tr></tr></table></div>").insertBefore($(this).parent());
            }

            var tr = toolbar.find("tr");
            for (var i = 0; i < items.length; i++) {
                var item = items[i];

                var btns = $(this).parent().prev("div.datagrid-toolbar").find("tr>td").children("a");

                var cbtn = null;

                btns.each(function () {
                    var text = null;
                    text = $(this).data().linkbutton.options.text;
                    if (text == item.text) {
                        cbtn = $(this);
                        text = null;
                        return false;
                    } else {
                        text = null;
                        return;
                    }
                });

                if (item === "-") {
                    $("<td><div class=\"datagrid-btn-separator\"></div></td>").appendTo(tr);
                } else {
                    if (cbtn) {
                        cbtn[0].onclick = eval(item.handler || function () { });
                        cbtn.css("float", "left").linkbutton($.extend({}, item, { plain: true }));
                    } else {
                        var td = $("<td></td>").appendTo(tr);
                        var tool = $("<a href=\"javascript:void(0)\"></a>").appendTo(td);
                        tool[0].onclick = eval(item.handler || function () { });
                        tool.linkbutton($.extend({}, item, { plain: true }));
                    }
                }
            }
            toolbar = null;
        });
    },
    removeToolbarItem: function (jq, param) {
        return jq.each(function () {
            var btns = $(this).parent().prev("div.datagrid-toolbar").find("tr>td").children("a");
            var cbtn = null;
            if (typeof param == "number") {
                cbtn = btns.eq(param);
            } else if (typeof param == "string") {
                var text = null;
                btns.each(function () {
                    text = $(this).data().linkbutton.options.text;
                    if (text == param) {
                        cbtn = $(this);
                        text = null;
                        return;
                    }
                });
            }
            if (cbtn) {
                var prev = cbtn.prev()[0];
                var next = cbtn.next()[0];
                if (prev && next && prev.nodeName == "DIV" && prev.nodeName == next.nodeName) {
                    $(prev).remove();
                } else if (next && next.nodeName == "DIV") {
                    $(next).remove();
                } else if (prev && prev.nodeName == "DIV") {
                    $(prev).remove();
                }
                cbtn.remove();
                cbtn = null;

                btns = $(this).parent().prev("div.datagrid-toolbar").find("tr>td").children("a");
                if (btns.length == 0) {
                    $(this).parent().prev("div.datagrid-toolbar").remove();
                }
            }
        });
    }
});

使用方法：

 $(‘#tt‘).datagrid("addToolbarItem",[{"text":"xxx"},"-",{"text":"xxxsss","iconCls":"icon-ok"}])
 $(‘#tt‘).datagrid("removeToolbarItem","GetChanges")//根据btn的text删除
 $(‘#tt‘).datagrid("removeToolbarItem",0)//根据下标删除

Easy-UI 动态添加DataGrid的Toolbar按钮,布布扣,bubuko.com