读书人

Easyui Datagrid editor 的几个小问题

发布时间: 2012-11-22 00:16:41 作者: rapoo

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(',');}elsereturn $(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);}});

读书人网 >Web前端

热点推荐