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

Posted 2020-09-06 星火卓越

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

1、支持双击编辑

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

3、4个功能按钮。

 

插件源码：

 

[javascript] view plain copy

 

 

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.   
22.         viewModel.add = function () {  
23.             addRow(getSelectedRow());  
24.         };  
25.   
26.         viewModel.edit = function () {  
27.             editRow(getSelectedRow());  
28.         };  
29.   
30.         viewModel.remove = function () {  
31.             removeRow(getSelectedRow());  
32.         };  
33.   
34.         viewModel.cancel = function () {  
35.             var node = getSelectedRow();  
36.             if (viewModel.onCancel) {  
37.                 viewModel.onCancel(node);  
38.             }  
39.             $(element).treegrid("unselectAll");  
40.             try {  
41.                 if (self.editing) {  
42.                     $(element).treegrid("cancelEdit", self.editIndex);  
43.                     $(element).treegrid("refresh", self.editIndex);  
44.                     self.editing = false;  
45.                 }  
46.             } catch (ex) {  
47.                 self.editing = false;  
48.                 self.editIndex = 0;  
49.             }  
50.         };  
51.   
52.         function getSelectedRow() {  
53.             return $(element).treegrid("getSelected");  
54.         }  
55.   
56.         function saveRow() {  
57.             var rowIndex = self.editIndex;  
58.             if (rowIndex == 0) {  
59.                 return;  
60.             }  
61.             self.editIndex = 0;  
62.             self.editing = false;  
63.   
64.             $(element).treegrid("endEdit", rowIndex);  
65.             $.ajax({  
66.                 async: false,  
67.                 url: opts.saveUrl,  
68.                 method: "POST",  
69.                 data: $(element).treegrid("find", rowIndex),  
70.                 success: function (data) {  
71.                     $(element).treegrid("refresh", rowIndex);  
72.                     if (viewModel.onSaved) {  
73.                         viewModel.onSaved(data, rowIndex);  
74.                     }  
75.                 },  
76.                 error: function () {  
77.                 }  
78.             });  
79.         }  
80.   
81.         function editRow(node) {  
82.             if (!node || node[opts.idField] == self.editIndex) return;  
83.             saveRow();  
84.             self.editing = true;  
85.             self.editIndex = node[opts.idField];  
86.   
87.             $(element).treegrid(\'select\', self.editIndex);  
88.             $(element).treegrid("beginEdit", self.editIndex);  
89.             if (viewModel.onEditing) {  
90.                 viewModel.onEditing(node);  
91.             }  
92.         }  
93.   
94.         function addRow(parentNode) {  
95.             if (self.editing) return;  
96.             var parentId = parentNode ? parentNode[opts.idField] : 0;  
97.             var newNode = viewModel.newNode(parentId);  
98.             $(element).treegrid("append", { parent: parentId, data: [newNode] });  
99.             editRow(newNode);  
100.         }  
101.   
102.         function removeRow(node) {  
103.             if (!node) return;  
104.             if (viewModel.onRemoving && !viewModel.onRemoving(node)) {  
105.                 return;  
106.             }  
107.             $.messager.confirm(\'确认\', \'你确定要删除吗？\', function (r) {  
108.                 if (!r) return;  
109.                 $.post(opts.deleteUrl + "?id=" + node[opts.idField], function (data, statusText) {  
110.                     if (viewModel.onRemoved) {  
111.                         viewModel.onRemoved(data);  
112.                     }  
113.                     else {  
114.                         if (statusText == "success") {  
115.   
116.                             $(element).treegrid("remove", node[opts.idField]);  
117.                         }  
118.                         else {  
119.                             $.messager.alert(\'警告\', "删除失败", \'warning\');  
120.                         }  
121.                     }  
122.   
123.                 });  
124.   
125.             });  
126.         }  
127.     }  
128. };  

 

使用示例：

html：

 

[html] view plain copy

 

 

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：

 

[javascript] view plain copy

 

 

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