jQuery EasyUI — 重写datagrid的combotree编辑类型,有需要的朋友可以参考下。
1.重写combotree单选
(1)重写combotree定义代码:
// 重写combotree单选
$.extend($.fn.datagrid.defaults.editors, {
combotree_single : {
init : function(container, options) {
var box = $('<input />').appendTo(container);
box.combotree(options);
return box;
},
getValue : function(target) {
var t = $(target).combotree('tree', target);
var n = t.tree('getSelected');
return n;
},
setValue : function(target, value) {
if (value) {
$(target).combotree('setValue', value.id);
}
},
resize : function(target, width) {
var box = $(target);
box.combotree('resize', width);
},
destroy : function(target) {
$(target).combotree('destroy');
}
}
});
(2)调用代码:
options未使用url的请求方式,而是用data本地加载,防止每次点击列表行的时候都需要发送url远程加载。
{field:'fieldName',title:'标题',align:'center',sortable:true,resizable:true,editor:{
type:'combotree_single',
options:{
data: getTreeData()
}
}, formatter:function(value,row,index){
if(value) {
return value.text;
}
}}
(3)combotree传入数据方法:
使用ajax请求的方式。
function getTreeData() {
var treeData = null;
$.ajax({
type : 'post',
url : '', // 得到数据的URL地址
cache : false,
async : false,
dataType : 'json',
data : {}, // 请求参数
success : function(result) {
treeData = result;
}
});
return treeData;
}
2.重写combotree复选
// 重写combotree复选
$.extend($.fn.datagrid.defaults.editors, {
combotree_multiple : {
init : function(container, options) {
var box = $('<select multiple />').appendTo(container);
box.combotree(options);
return box;
},
getValue : function(target) {
var t = $(target).combotree('tree', target);
var n = t.tree('getChecked');
return n;
},
setValue : function(target, value) {
if (value != undefined && value.length > 0) {
var arrId = new Array();
for (var i = 0; i < value.length; i++) {
arrId.push(value[i].id);
}
$(target).combotree('setValues', arrId);
}
},
resize : function(target, width) {
var box = $(target);
box.combotree('resize', width);
},
destroy : function(target) {
$(target).combotree('destroy');
}
}
});