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

最新推荐文章于 2020-12-22 04:58:24 发布

maddemon

最新推荐文章于 2020-12-22 04:58:24 发布

阅读量9.1k

点赞数 2

分类专栏： Javascript

本文链接：https://blog.csdn.net/maddemon/article/details/16846183

版权

这篇博客介绍了如何结合KnockoutJS和EasyUI TreeGrid创建一个可编辑的自定义绑定插件。该插件支持URL CRUD操作，允许双击编辑，单击单元格自动保存，以及包含四个功能按钮。示例代码包括HTML结构和JavaScript实现，帮助开发者了解如何应用此插件。

摘要由CSDN通过智能技术生成

目前仅支持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) {