easyui datagrid 動態添加、移除editor

使用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位號碼!'
                }
            }
        }]

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

發佈了160 篇原創文章 · 獲贊 234 · 訪問量 59萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章