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"));
})();