easyui datagrid editor
场景:Easyui Datagrid editor 的几个小问题
Easyui Datagrid editor 的几个问题
首先贴一段自己写得一个datagrid的函数:
其中用到了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():
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); } });