现在的位置: 首页 > 综合 > 正文

jQuery EasyUI — 重写datagrid的combotree编辑类型

2017年12月02日 ⁄ 综合 ⁄ 共 1674字 ⁄ 字号 评论关闭

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');
		}
	}
});

抱歉!评论已关闭.