easyui datagrid動態設定行、列、單元格不允許編輯

浪花一朵朵發表於2014-04-18
原文網址 : https://www.cnblogs.com/langhua/p/3672820.html
UI

Easyui datagrid 行編輯、列編輯、單元格編輯設定

 

功能：

動態對datagrid 進行行、列、單元格編輯進行設定不允許編輯。

禁用行編輯：

   在編輯方法呼叫前，對選擇的行進行判斷，如果不允許編輯，就返回不呼叫編輯方法，如果允許編輯，則繼續。

e.g:      var row = $("#dg").datagrid("getSelected");        //取選擇的行

                                               if(row)

                                               {

                                                        if(row.productname=='Koi')//不允許編輯的條件

                                                        return;

                                               }

                                               $('#dg').datagrid('selectRow', index)

                                                                 .datagrid('beginEdit', index);

　　

 

動態設定禁用列編輯：

允許編輯的列都會定義一個editor屬性，按照datagrid列編輯設計理念，不允許列編輯，即把指定列的ecitor屬性賦空。其中: 'listprice'為列名.如果指定的列始終不允許編輯，在列初始化時，不設定列的editor屬性即可。

e.g            var e = $("#dg").datagrid('getColumnOption', 'listprice');

                               e.editor = {};

 

禁用單元格編輯：

單元格在頁面中中現的是一個hmtl控制元件，找到不允許編輯的單元格的html控制元件，設定disabled屬性為true,具體的做法是:先定位到編輯的行，根據指定的列名定位到單元格,獲取這個單元格的editor，每個editor物件都有以下四個屬性:

                                                 

這個editor的target即是呈現單元格的物件，設定這個呈現物件的disabled屬性為true,就禁用編輯了。'attr1'為列名, editIndex待編輯的行

e.g

                                     var row = $("#dg").datagrid("getSelected");  

                                               if(row)

                                               {

         if(row&&row.itemid=='EST-15')

                                                        {

                                                                 var ed2 = $('#dg').datagrid('getEditor', { 'index': editIndex, field: 'attr1' });

                                                                $(ed2.target).attr("disabled", true);

                                                        }

                                               }

 

 

相關文章