首頁 > web前端 > js教程 > jQuery Easyui學習之datagrid 動態新增、移除editor_jquery

jQuery Easyui學習之datagrid 動態新增、移除editor_jquery

WBOY
發布: 2016-05-16 15:17:36
原創
1577 人瀏覽過

 使用easyui行編輯的時候完成編輯的功能比較簡單,但是如果要根據一個框的值動態改變別的值或者編輯的時候禁用某個框的時候就比較麻煩了。

例如像下面這樣:新增行的時候每個值都是手動輸入,修改的時候第一個值不能修改。我們來看下怎麼達到這樣的效果。

jQuery Easyui學習之datagrid 動態新增、移除editor_jquery

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位号码!'
}
}
}]
登入後複製

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板