首先贴一段自己写得一个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);
}
});