zoukankan      html  css  js  c++  java
  • knockoutjs + easyui.treegrid 可编辑的自定义绑定插件

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

    1、支持双击编辑

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

    3、4个功能按钮。

     

    插件源码:

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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
     
     在CODE上查看代码片派生到我的代码片
    1. <div id="area-form">  
    2.     <div id="area-tool-bar">  
    3.         <href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" data-bind="click: add">新增</a>  
    4.         <href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" data-bind="click: edit">编辑</a>  
    5.         <href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" data-bind="click: remove">删除</a>  
    6.         <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
     
     在CODE上查看代码片派生到我的代码片
    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. })();  

     
     
  • 相关阅读:
    tfrecord汇总
    python2中的编码的问题
    python multiprocessing的问题
    转载,ubuntu shell ~/.bashrc /etc/bash.bashrc
    singleton模式 Python
    目标检测 tensorflow(预训练模型)
    functools.partial 小记
    python 踩坑小计 virtualenv-site-packages
    python3.6 _tkinter module问题 python源码重新编译
    windows核心编程之网络编程入门篇
  • 原文地址:https://www.cnblogs.com/amylis_chen/p/6629424.html
Copyright © 2011-2022 走看看