knockoutjs + easyui.treegrid 可编辑的自定义绑定插件

目前仅支持URL的CRUD。不需要的话可以却掉相关代码，把treegrid的data直接赋值给viewModel，然后用ko提交整个data

1、支持双击编辑

2、单击Cell，自动保存编辑。

3、4个功能按钮。

 

插件源码：

 

ko.bindingHandlers.etreegrid = {
    editing: false,
    editIndex: 0,
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var self = ko.bindingHandlers.etreegrid;
        var opts = valueAccessor();
        $(element).treegrid({
            url: opts.url,
            treeField: opts.treeField,
            idField: opts.idField,
            onDblClickRow: function (node) {
                if (viewModel.add)
                    editRow(node);
            },
            onClickCell: function () {
                if (viewModel.add) {
                    saveRow();
                }
            }
        });

        viewModel.add = function () {
            addRow(getSelectedRow());
        };

        viewModel.edit = function () {
            editRow(getSelectedRow());
        };

        viewModel.remove = function () {
            removeRow(getSelectedRow());
        };

        viewModel.cancel = function () {
            var node = getSelectedRow();
            if (viewModel.onCancel) {
                viewModel.onCancel(node);
            }
            $(element).treegrid("unselectAll");
            try {
                if (self.editing) {
                    $(element).treegrid("cancelEdit", self.editIndex);
                    $(element).treegrid("refresh", self.editIndex);
                    self.editing = false;
                }
            } catch (ex) {
                self.editing = false;
                self.editIndex = 0;
            }
        };

        function getSelectedRow() {
            return $(element).treegrid("getSelected");
        }

        function saveRow() {
            var rowIndex = self.editIndex;
            if (rowIndex == 0) {
                return;
            }
            self.editIndex = 0;
            self.editing = false;

            $(element).treegrid("endEdit", rowIndex);
            $.ajax({
                async: false,
                url: opts.saveUrl,
                method: "POST",
                data: $(element).treegrid("find", rowIndex),
                success: function (data) {
                    $(element).treegrid("refresh", rowIndex);
                    if (viewModel.onSaved) {
                        viewModel.onSaved(data, rowIndex);
                    }
                },
                error: function () {
                }
            });
        }

        function editRow(node) {
            if (!node || node[opts.idField] == self.editIndex) return;
            saveRow();
            self.editing = true;
            self.editIndex = node[opts.idField];

            $(element).treegrid('select', self.editIndex);
            $(element).treegrid("beginEdit", self.editIndex);
            if (viewModel.onEditing) {
                viewModel.onEditing(node);
            }
        }

        function addRow(parentNode) {
            if (self.editing) return;
            var parentId = parentNode ? parentNode[opts.idField] : 0;
            var newNode = viewModel.newNode(parentId);
            $(element).treegrid("append", { parent: parentId, data: [newNode] });
            editRow(newNode);
        }

        function removeRow(node) {
            if (!node) return;
            if (viewModel.onRemoving && !viewModel.onRemoving(node)) {
                return;
            }
            $.messager.confirm('确认', '你确定要删除吗？', function (r) {
                if (!r) return;
                $.post(opts.deleteUrl + "?id=" + node[opts.idField], function (data, statusText) {
                    if (viewModel.onRemoved) {
                        viewModel.onRemoved(data);
                    }
                    else {
                        if (statusText == "success") {

                            $(element).treegrid("remove", node[opts.idField]);
                        }
                        else {
                            $.messager.alert('警告', "删除失败", 'warning');
                        }
                    }

                });

            });
        }
    }
};

 

使用示例：

HTML：

 

<div id="area-form">
    <div id="area-tool-bar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" data-bind="click: add">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" data-bind="click: edit">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" data-bind="click: remove">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" plain="true" data-bind="click: cancel">取消</a>
    </div>
    <table id="area-list" rownumbers="true" title="区域列表" border="0" toolbar="#area-tool-bar" data-bind="etreegrid: tree">
        <thead>
            <tr>
                <th field="Name" width="500" data-options="editor:{type:'validatebox'}">地区名称</th>
                <th field="Code" width="120" data-options="editor:{type:'validatebox'}">地区编码</th>
            </tr>
        </thead>
    </table>
</div>

 

Javascript：

 

(function () {

    var newId = 9999999;
    var listId = "#area-list";

    function AreaModel() {
        this.tree = {
            url: "/area/gettree",
            treeField: "Name",
            idField: "ID",
            saveUrl: "/area/save",
            deleteUrl: "/area/delete",
        };
        this.newNode = function (parentId) {
            return { ID: newId, Name: '', Code: '', ParentID: parentId };
        };

        this.add = ko.observable();
        this.edit = ko.observable();
        this.remove = ko.observable();
        this.cancel = ko.observable();
        this.validate = function (node) {
            return !!node.Name;
        };
        this.onCancel = function (node) {
            if (node && node.ID == newId) {
                $(listId).treegrid("remove", node.ID);
            }
        };
        this.onSaved = function (data, editIndex) {
            if (data.result) {
                var row = data.data;
                if (editIndex == newId) {
                    $(listId).treegrid("remove", editIndex);
                    $(listId).treegrid("append", { parent: row.ParentID, data: [data.data] });
                }
            }
        };
        this.onRemoving = function (node) {
            if (node.ID == newId) {
                $(listId).treegrid("remove", node.ID);
                return false;
            }
            else {
                if (!node.children || node.children.length > 0) {
                    $.messager.alert('删除失败', "该地区有下属分类，不可直接删除！", 'warning');
                    return false;
                }
            }

            return true;
        };
    };
    ko.applyBindings(new AreaModel(), document.getElementById("area-form"));
})();