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

http://blog.csdn.net/maddemon/article/details/16846183

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

1、支持双击编辑

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

3、4个功能按钮。

插件源码：

1. ko.bindingHandlers.etreegrid = {
2. editing: false,
3. editIndex: 0,
4. init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
5. var self = ko.bindingHandlers.etreegrid;
6. var opts = valueAccessor();
7. $(element).treegrid({
8. url: opts.url,
9. treeField: opts.treeField,
10. idField: opts.idField,
11. onDblClickRow: function (node) {
12. if (viewModel.add)
13. editRow(node);
14. },
15. onClickCell: function () {
16. if (viewModel.add) {
17. saveRow();
18. }
19. }
20. });
21. viewModel.add = function () {
22. addRow(getSelectedRow());
23. };
24. viewModel.edit = function () {
25. editRow(getSelectedRow());
26. };
27. viewModel.remove = function () {
28. removeRow(getSelectedRow());
29. };
30. viewModel.cancel = function () {
31. var node = getSelectedRow();
32. if (viewModel.onCancel) {
33. viewModel.onCancel(node);
34. }
35. $(element).treegrid("unselectAll");
36. try {
37. if (self.editing) {
38. $(element).treegrid("cancelEdit", self.editIndex);
39. $(element).treegrid("refresh", self.editIndex);
40. self.editing = false;
41. }
42. } catch (ex) {
43. self.editing = false;
44. self.editIndex = 0;
45. }
46. };
47. function getSelectedRow() {
48. return $(element).treegrid("getSelected");
49. }
50. function saveRow() {
51. var rowIndex = self.editIndex;
52. if (rowIndex == 0) {
53. return;
54. }
55. self.editIndex = 0;
56. self.editing = false;
57. $(element).treegrid("endEdit", rowIndex);
58. $.ajax({
59. async: false,
60. url: opts.saveUrl,
61. method: "POST",
62. data: $(element).treegrid("find", rowIndex),
63. success: function (data) {
64. $(element).treegrid("refresh", rowIndex);
65. if (viewModel.onSaved) {
66. viewModel.onSaved(data, rowIndex);
67. }
68. },
69. error: function () {
70. }
71. });
72. }
73. function editRow(node) {
74. if (!node || node[opts.idField] == self.editIndex) return;
75. saveRow();
76. self.editing = true;
77. self.editIndex = node[opts.idField];
78. $(element).treegrid('select', self.editIndex);
79. $(element).treegrid("beginEdit", self.editIndex);
80. if (viewModel.onEditing) {
81. viewModel.onEditing(node);
82. }
83. }
84. function addRow(parentNode) {
85. if (self.editing) return;
86. var parentId = parentNode ? parentNode[opts.idField] : 0;
87. var newNode = viewModel.newNode(parentId);
88. $(element).treegrid("append", { parent: parentId, data: [newNode] });
89. editRow(newNode);
90. }
91. function removeRow(node) {
92. if (!node) return;
93. if (viewModel.onRemoving && !viewModel.onRemoving(node)) {
94. return;
95. }
96. $.messager.confirm('确认', '你确定要删除吗？', function (r) {
97. if (!r) return;
98. $.post(opts.deleteUrl + "?id=" + node[opts.idField], function (data, statusText) {
99. if (viewModel.onRemoved) {
100. viewModel.onRemoved(data);
101. }
102. else {
103. if (statusText == "success") {
104. $(element).treegrid("remove", node[opts.idField]);
105. }
106. else {
107. $.messager.alert('警告', "删除失败", 'warning');
108. }
109. }
110. });
111. });
112. }
113. }
114. };

使用示例：

HTML：

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

Javascript：

1. (function () {
2. var newId = 9999999;
3. var listId = "#area-list";
4. function AreaModel() {
5. this.tree = {
6. url: "/area/gettree",
7. treeField: "Name",
8. idField: "ID",
9. saveUrl: "/area/save",
10. deleteUrl: "/area/delete",
11. };
12. this.newNode = function (parentId) {
13. return { ID: newId, Name: '', Code: '', ParentID: parentId };
14. };
15. this.add = ko.observable();
16. this.edit = ko.observable();
17. this.remove = ko.observable();
18. this.cancel = ko.observable();
19. this.validate = function (node) {
20. return !!node.Name;
21. };
22. this.onCancel = function (node) {
23. if (node && node.ID == newId) {
24. $(listId).treegrid("remove", node.ID);
25. }
26. };
27. this.onSaved = function (data, editIndex) {
28. if (data.result) {
29. var row = data.data;
30. if (editIndex == newId) {
31. $(listId).treegrid("remove", editIndex);
32. $(listId).treegrid("append", { parent: row.ParentID, data: [data.data] });
33. }
34. }
35. };
36. this.onRemoving = function (node) {
37. if (node.ID == newId) {
38. $(listId).treegrid("remove", node.ID);
39. return false;
40. }
41. else {
42. if (!node.children || node.children.length > 0) {
43. $.messager.alert('删除失败', "该地区有下属分类，不可直接删除！", 'warning');
44. return false;
45. }
46. }
47. return true;
48. };
49. };
50. ko.applyBindings(new AreaModel(), document.getElementById("area-form"));
51. })();