Easyui Datagrid editor 的几个问题

  首先贴一段自己写得一个datagrid的函数：

function createDatagrid(teamid){
	
    $('#ttt').datagrid({
        title: '团队角色信息',
        width: 750,
        singleSelect: "true",
        idField: "characterid",
        toolbar: '#tb2',
        fitColumns: "true",
        url: 'atatincharacterjson.action?teamid=' + teamid,
        columns: [[
                {field: 'characterid',title: 'ID',hidden: 'false',align: 'center',width: 50}, 
                {field: 'team',title: '团队简称',align: 'center',width: 150,
                    formatter: function(value) {
                        for (var i = 0; i < team_shortnames.length; i++) {
                            if (team_shortnames[i].id == value)
                                return team_shortnames[i].shortname;
                        }
                        return value;
                    }
                    ,
                    editor: {
                        type: 'combobox',
                        options: {
                            valueField: 'id',
                            textField: 'shortname',
                            data:team_shortnames,
                            //url: 'atainallteamshortnamesjson.action',
                            required: true
                        }
                    }
                }, 
                {field: 'character',title: '角色',align: 'center',width: 150,
                    editor: {type: 'text'}
                }, 
                {field: 'staff_member_String',title: '成员（员工）',align: 'center',width: 150,
                    formatter: function(value) {
                        for (var i = 0; i < staffs.length; i++) {
                            if (staffs[i].id == value)
                                return staffs[i].username;
                        }
                        return value;
                    }
                    ,
                    editor: {
                        type: 'combobox',
                        options: {
							multiple:"multiple",
                            valueField: 'id',
                            textField: 'username',
                            data: staffs,
                            //url:'atainstaffinteamjson?teamid='+currentRow.id,
                            required: true
                        }
                    }
                }, 
                {field: 'group_member_String',title: '成员（工作组）',align: 'center',width: 150,
                    formatter: function(value) {
                        for (var i = 0; i < groups.length; i++) {
                            if (groups[i].groupid == value)
                                return groups[i].groupname;
                        }
                        return value;
                    }
                    ,
                    editor: {
                        type: 'combobox',
                        options: {
                            valueField: 'groupid',
                            textField: 'groupname',
                            data: groups,
                            //url:'atainallworkgroupjsonbyteamid.action?teamid=1',
                            required: true
                        }
                    }
                }, 
                {field: 'action',title: '操作',align: 'center',width: 100,
                    formatter: function(value, row, index) {
                        if (row.editing) {
                            var s = '<a href="#" onclick="saverow2(' + index + ')">Save</a> ';
                            var c = '<a href="#" onclick="cancelrow2(' + index + ')">Cancel</a>';
                            return s + c;
                        } else {
                            var e = '<a href="#" onclick="editrow2(' + index + ')">Edit</a> ';
                            var d = '<a href="#" onclick="deleterow2(' + index + ')">Delete</a>';
                            return e + d;
                        }
                    }
                
                }
            ]]
    });
}

//其中一个获取数据的Ajax
$.ajax({
	url:"atainstaffinteamjson.action?teamid="+currentRow.id,
	type:"get",
	async:false,
	dataType:"json",
	success:function(data){
		staffs=data;
		}
	});

其中用到了editor，toolbar，从struts2的action取数据等操作。下面就几个遇到的问题进行下记录：
1.ajax一定要同步，不能异步，不然staffs等可能得不到值就创建了datagrid；
2.combobox的数据使用data时，ajax返回类型一定要是json对象，不能是字符串，如果在editor中直接使用url获取数据而不是data的话，url指向的Action应该返回String类型的值。这两者不同，千万注意。
3.用combobox editor会造成选择某个新项后在原来的地方显示是valueField，而不是textField，这时候必须要使用formatter来修正显示内容。
4.combobox 可以多选的，只需在options中增加multiple:"multiple",即可。
5.combobox多行选择时需要下面函数来覆盖自带的setvalue()：

	$.extend($.fn.datagrid.defaults.editors.combobox, {
		getValue : function(jq) {
			var opts = $(jq).combobox('options');
			if(opts.multiple){
				var values = $(jq).combobox('getValues');
				if(values.length>0){
					if(values[0]==''||values[0]==' '){
						return values.join(',').substring(1);//新增的时候会把空白当成一个值了，去掉
					}
				}
				return values.join(',');
			}
			else
				return $(jq).combobox("getValue");
		},
		setValue : function(jq, value) {
			var opts = $(jq).combobox('options');
			if(opts.multiple&&value.indexOf(opts.separator)!=-1){//多选且不只一个值
				var values = value.split(opts.separator);
				$(jq).combobox("setValues", values);
			}
			else
				$(jq).combobox("setValue", value);
		}
	});

评论

1 楼 无赖二号 2013-09-10  

非常好，非常感谢，感谢分享！