昨天写了一个ko+easyui的同样的实现,感觉写的太乱,用起来十分麻烦,于是今天照着edatagrid,写了一个etreegrid,这样再用ko绑定就方便多了。

使用很简单,$(tableId).etreegrid({idField:''parentIdField:'',treeField:'',saveUrl:'',deleteUrl:''});

还支持一些事件,onSave,onBeforeSave,onEdit,onAdd,onRemove;

Url可以不指定,指定Data即可。  

/**
 * etreegrid - jQuery EasyUI
 *
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2013 maddemon [ zhengliangjun@gmail.com ]
 *
 * Dependencies:
 *   treegrid
 *   messager
 *
 */
(function ($) {

    function buildGrid(target) {
        var opts = $.data(target, 'etreegrid').options;
        $(target).treegrid($.extend({}, opts, {
            onDblClickCell: function (field, row) {
                if (opts.editing) {
                    $(this).etreegrid("editRow", row);
                    focusEditor(field);
                }
            },
            onClickCell: function (field, row) {
                if (opts.editId >= 0) {
                    if (!trySaveRow()) {
                        focusEditor(field);
                        return;
                    }
                }
            },
            onAfterEdit: function (row, changes) {
                //opts.editId = undefined;
                var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl || opts.saveUrl;
                if (url) {
                    $.post(url, row).done(function (json, statusText, xhr) {
                        if (opts.editId === 0) {
                            json = eval("(" + json + ")");//注意这个地方,接口返回的数据的格式,可以根据自己的情况修改
                            $(target).treegrid("remove", opts.editId);
                            var data = json.data;
                            //console.log(data);
                            $(target).treegrid("append", { parent: data[opts.parentIdField], data: [data] });
                        } else {
                            //refresh
                            $(target).treegrid("refresh", row[opts.idField]);
                        }
                        opts.editId = undefined;
                    }).error(function (xhr) {
                        var result = eval("(" + xhr.responseText + ")");
                        $.messager.alert("失败", result.message || result, "warning");
                    });
                    opts.onSave.call(target, row);
                } else {
                    opts.onSave.call(target, row);
                }
                if (opts.onAfterEdit) opts.onAfterEdit.call(target, row);
            },
            onCancelEdit: function (row) {
                opts.editId = undefined;
                if (row.isNewRecord) {
                    $(this).treegrid("remove", row[opts.idField]);
                }
                if (opts.onCancelEdit) opts.onCancelEdit.call(target, row);
            },
            onBeforeLoad: function (row, param) {
                if (opts.onBeforeLoad.call(target, row, param) == false) {
                    return false;
                };
                $(this).treegrid("rejectChanges");
            }
        }));

        function trySaveRow() {
            if (!$(target).treegrid("validateRow", opts.editId)) {
                $(target).treegrid("select", opts.editId);
                return false;
            }
            if (opts.onBeforeSave.call(this, opts.editId) == false) {
                setTimeout(function () {
                    $(target).treegrid('select', opts.editId);
                }, 0);
                return false;
            }
            $(target).treegrid('endEdit', opts.editId);
            return true;
        }

        function focusEditor(field) {
            var editor = $(target).treegrid('getEditor', { id: opts.editId, field: field });
            if (editor) {
                editor.target.focus();
            } else {
                var editors = $(target).treegrid('getEditors', opts.editId);
                if (editors.length) {
                    editors[0].target.focus();
                }
            }
        }
    }

    $.fn.etreegrid = function (options, param) {
        if (typeof (options) == "string") {
            var method = $.fn.etreegrid.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.treegrid(options, param);
            }
        }

        options = options || {};
        return this.each(function () {
            var state = $.data(this, "etreegrid");
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, "etreegrid", { options: $.extend({}, $.fn.etreegrid.defaults, $.fn.etreegrid.parseOptions(this), options) });
            }
            ;
            buildGrid(this);

        });
    };

    $.fn.etreegrid.parseOptions = function (target) {
        return $.extend({}, $.fn.treegrid.parseOptions(target), {});
    };

    $.fn.etreegrid.methods = {
        options: function (jq) {
            var opts = $.data(jq[0], "etreegrid").options;
            return opts;
        },
        enableEditing: function (jq) {
            return jq.each(function () {
                var opts = $.data(this, "etreegrid").options;
                opts.editing = true;
            });
        },
        disableEditing: function (jq) {
            return jq.each(function () {
                var opts = $.data(this, "etreegrid").options;
                opts.editing = false;
            });
        },
        editRow: function (jq, row) {
            return jq.each(function () {
                var dg = $(this);
                var opts = $.data(this, "etreegrid").options;
                var rowId = row[opts.idField];
                var editId = opts.editId;
                if (editId != rowId) {
                    if (dg.treegrid("validateRow", editId)) {
                        if (editId >= 0) {
                            if (opts.onBeforeSave.call(this, editId) == false) {
                                setTimeout(function () {
                                    dg.treegrid("select", editId);
                                }, 0);
                                return;
                            }
                        }
                        dg.treegrid("endEdit", editId);
                        dg.treegrid("beginEdit", rowId);
                        opts.editId = rowId;
                        var node = dg.treegrid("find", rowId);
                        opts.onEdit.call(this, node);
                    } else {
                        setTimeout(function () {
                            dg.treegrid("select", editId);
                        }, 0);
                    }
                }
            });
        },
        addRow: function (jq) {
            return jq.each(function () {
                var dg = $(this);
                var opts = $.data(this, "etreegrid").options;
                var editId = opts.editId;
                if (opts.editId >= 0) {
                    if (!dg.treegrid("validateRow", editId)) {
                        dg.treegrid("select", editId);
                        return;
                    }
                    if (opts.onBeforeSave.call(this, opts.editId) == false) {
                        setTimeout(function () {
                            dg.treegrid('select', opts.editId);
                        }, 0);
                        return;
                    }
                    dg.treegrid('endEdit', opts.editId);
                } else {
                    var selected = dg.treegrid("getSelected");
                    var parentId = selected ? selected[opts.idField] : 0;
                    var newRecord = {};
                    newRecord[opts.idField] = 0;
                    newRecord[opts.parentIdField] = parentId;
                    console.log(newRecord)
                    dg.treegrid("append", { parent: parentId, data: [newRecord] });
                    if (parentId > 0) {
                        var children = dg.treegrid("getChildren");
                    }
                    opts.editId = 0;
                    dg.treegrid("beginEdit", opts.editId);
                    dg.treegrid("select", opts.editId);

                }
            });
        },
        saveRow: function (jq) {
            return jq.each(function () {
                var dg = $(this);
                var opts = $.data(this, 'etreegrid').options;
                if (opts.editId >= 0) {
                    if (!dg.treegrid("validateRow", opts.editId)) {
                        dg.treegrid("select", opts.editId);
                        return;
                    }
                    if (opts.onBeforeSave.call(this, opts.editId) == false) {
                        setTimeout(function () {
                            dg.treegrid('select', opts.editId);
                        }, 0);
                        return;
                    }
                    $(this).treegrid('endEdit', opts.editId);
                }
            });
        },
        cancelRow: function (jq) {
            return jq.each(function () {
                var rowId = $(this).etreegrid('options').editId;
                $(this).treegrid('cancelEdit', rowId);
            });
        },
        removeRow: function (jq) {
            return jq.each(function () {
                var dg = $(this);
                var opts = $.data(this, 'etreegrid').options;
                var row = dg.treegrid('getSelected');
                if (!row) return;
                if (row.isNewRecord) {
                    dg.treegrid("remove", row[opts.idField]);
                    return;
                }
                $.messager.confirm("确认", "确认删除这条数据吗?", function (r) {
                    if (!r) return;
                    var idValue = row[opts.idField];
                    if (opts.deleteUrl) {
                        $.post(opts.deleteUrl, { id: idValue }).done(function (json) {
                            dg.treegrid("remove", idValue);
                            opts.onRemove.call(dg[0], json, row);
                        }).error(function (xhr) {
                            var json = eval('(' + xhr.responseText + ')');
                            $.messager.alert('错误', json.message || json, "warning");
                        });
                    } else {
                        dg.datagrid('cancelEdit', idValue);
                        dg.datagrid('deleteRow', idValue);
                        opts.onRemove.call(dg[0], row);
                    }
                });
            });
        }
    };

    $.fn.etreegrid.defaults = $.extend({}, $.fn.treegrid.defaults, {
        editing: true,
        editId: undefined,
        messager: {},

        url: null,
        saveUrl: null,
        updateUrl: null,
        deleteUrl: null,

        onAdd: function (row) { },
        onEdit: function (row) { },
        onBeforeSave: function (index) { },
        onSave: function (row) { },
        onRemove: function (row) { },
    });
})(jQuery);

  

  

easyui plugin——etreegrid:CRUD Treegrid的更多相关文章

  1. easyui plugin —— etreegrid:CRUD Treegrid

    昨天写了一个ko+easyui的同样的实现,感觉写的太乱,用起来十分麻烦,于是今天照着edatagrid,写了一个etreegrid,这样再用ko绑定就方便多了. 使用很简单,$(tableId).e ...

  2. 疑似easyui本身bug:easyui时间控件问题,试了几个版本都不行

    最近发现easyui时间控件的值格式不支持带斜杠的日期(2016/10/31),必须是2016-10-31这类的才能正常使用,否则默认初始化为当前时间 <input id="Retur ...

  3. 【jQuery EasyUI系列】创建CRUD数据网格

    在上一篇中我们使用对话框组件创建了CRUD应用创建和编辑用户信息.本篇我们来创建一个CRUD数据网格DataGrid 步骤1,在HTML标签中定义数据网格(DataGrid) <table id ...

  4. 学习 easyui 之二:jQuery 的 ready 函数和 easyloader 的加载回调函数

    Ready 事件不一定 ready 使用 easyloader 的时候,必须要注意到脚本的加载时机问题,easyloader 会异步加载模块,所以,你使用的模块不一定已经加载了.比如下面的代码. &l ...

  5. struts2 easyui实现datagrid的crud

    最近两天因为项目需要,接触了easyui,要用它的datagrid实现crud.第一次做,花了一天时间才完成所有功能,昨天做另外一个模块,同样的功能只用了两个小时. 现在把第一次做datagrid时遇 ...

  6. php热身2:CRUD with Ajax

    这次热身是一个会员管理系统,包括会员注册.登录.资料修改功能,使用ajax技术 1.建表 use common_module; create table if not exists member( u ...

  7. CENTOS elasticsearch plugin install:Failed: SSLException[java.security.ProviderException,解决

    安装Elasticsearch插件时总报SSLException yum upgrade nss 解决

  8. 基于EasyUI Treegrid的权限管理资源列表

    1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...

  9. 解决Jetty Maven Plugin:Please initialize the log4j system properly(转)

    解决Jetty Maven Plugin:Please initialize the log4j system properly.Jetty Maven Plugin环境: <plugin> ...

随机推荐

  1. 关于MongoDB你需要知道的几件事

    Henrique Lobo Weissmann是一位来自于巴西的软件开发者,他是itexto公司的联合创始人,这是一家咨询公司.近日,Henrique在博客上撰文谈到了关于MongoDB的一些内容,其 ...

  2. hibernate学习(7)——HQL查询

    1.HQL查询定义 Hibernate查询分类: 1. get/load 根据OID检索 2. 对象视图检索 c.getOrders 3. Sql语句 createSqlQuery 4. Hql语句 ...

  3. TYVJ P1103 多项式输出 Label:模拟 有点儿坑

    描述 一元 n 次多项式可用如下的表达式表示:  f(x)=an*x^n+an-1*x^n-1+...+a1*x+a0,an<>0其中,ai*a^x 称为i次项,ai称为i次项的系数.给出 ...

  4. windows 文件权限导致的 git 问题

    windows 文件权限导致的 git 问题 在 windows 上使用 git 时,会遇到明明什么都没有改动,但是 git status 显示一堆文件被修改.这时,通过 git diff 可看到什么 ...

  5. c++ 相关的技术资源整理归类

    最近一段时间 c++ 社区里最火热的话题莫过于 cppcon2015 了, isocpp 上一堆相关的新闻,其中有一个页面罗列了该会议的全部主题, 匆匆一瞥几乎眼花缭乱,为期一个星期的会议竟有上百个演 ...

  6. 消息队列入门(三)JMS标准及实现

    >>消息中间件 消息中间件即Message-oriented middleware(MOM),消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集 ...

  7. Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...

  8. activity状态的保存和保持(onRetainNonConfigurationInstance和getLastNonConfigurationInstanc

    本文转载于:http://chengbs.iteye.com/blog/1156167 比较onsaveinstancestate() 与 onretainnonconfigurationinstan ...

  9. TP复习5

    ## ThinkPHP 3.1.2 查询方式#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.普通查询方式 a.字符串 $arr=$m->wher ...

  10. ORACLE 优化

    本文主要从大型数据库ORACLE环境四个不同级别的调整分析入手,分析ORACLE的系统结构和工作机理,从九个不同方面较全面地总结了 ORACLE数据库的优化调整方案. 关键词 ORACLE数据库 环境 ...