easyui datagrid 動態添加、移除editor

4528krkj 8年前發布 | 1K 次閱讀 JavaScript easyui

使用easyui 行編輯的時候完成編輯的功能比較簡單,但是如果要根據一個框的值動態改變別的值或者編輯的時候禁用某個框的時候就比較麻煩了。
比如像下面這樣:添加行的時候每個值都是手動輸入,修改的時候第一個值不能修改。我們來看下怎么實現這樣的效果。
這里寫圖片描述

easyui本身是不提供這么細節的功能的,需要我們自己拓展下:
在編輯的時候移除第一列的editor屬性,添加的時候,添加第一列的屬性。

//擴展datagrid:動態添加刪除editor
    $.extend($.fn.datagrid.methods, {    
        addEditor : function(jq, param) {   
            if (param instanceof Array) {   
                $.each(param, function(index, item) {  
                    var e = $(jq).datagrid('getColumnOption', item.field); 
                    e.editor = item.editor; }); 
                } else {    
                    var e = $(jq).datagrid('getColumnOption', param.field);    
                    e.editor = param.editor;    
                }   
            },  
        removeEditor : function(jq, param) {    
            if (param instanceof Array) {   
                $.each(param, function(index, item) {  
                    var e = $(jq).datagrid('getColumnOption', item);   
                    e.editor = {};  
                    }); 
            } else {    
                var e = $(jq).datagrid('getColumnOption', param);
                e.editor = {};  
            }   
        }
    });

(代碼出自網上大神。)

調用:
移除:

$("#dg").datagrid('removeEditor','cardNo');//這里的cardNo是需要移除editor的列的field值

添加:

$("#dg").datagrid('addEditor',[ //添加cardNo列editor
            {field:'cardNo',editor:{
                type:'textbox',
                options:{
                    required:true,
                    validType:'length[3,3]', 
                    invalidMessage:'請輸入3位號碼!'
                }
            }
        }]

別的操作都可以據此拓展.
(完)

 本文由用戶 4528krkj 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!