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

2022-09-22 11:05:12

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

1、支持双击编辑

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

3、4个功能按钮。

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

插件源码：

 

  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：

 

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

knockoutjs + easyui.treegrid 可编辑的自定义绑定插件【转】,布布扣,bubuko.com

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

上一篇：http://numbbbbb.github.io/the-swift-programming-language-in-chinese/chapter1/02_a_swift_tour.html


下一篇：XForms设计器-----web service